Page MenuHomePhabricator

Update favicons to provide high res variant
Closed, ResolvedPublic

Description

For screen with a pixel ratio higher than 1 (e.g. Retina displays on MacBook and iOS devices) we should provide a higher resolution favicon than we're doing right now.

Instead of 16x16, we need 32x32.

I'm not sure whether a simple 32px PNG (replacing the 16px PNG we are serving right now) works as expected.

We might have to create an .ICO instead, which would contain both.


Version: wmf-deployment
Severity: enhancement
Whiteboard: gci2013
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=52019

Details

Reference
bz45036

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedSn1per
ResolvedNone
ResolvedNone
ResolvedNone
ResolvedNone
Resolvedtomasz

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:30 AM
bzimport set Reference to bz45036.
bzimport added a subscriber: Unknown Object (MLST).

Could we get a list of the ones that don't have that currently?

I know Commons and the wikis using the WMF logo all have multi-res icos, which should probably be the practice in general as it would cover this while maintaining compatibility, but which remain to be done?

This has recently been improved a lot.

Right now there are no favicons served in PNG format, nor are they any favicons served directly from Commons. They're all in bits.wikimedia.org/favicons now [1].

They are as follows[2]:

  • black-globe.ico [48x48, 32x32, 16x16]
  • chapcom.ico 16x16
  • commons.ico [32x32, 16x16]
  • community.ico [32x32, 16x16, 32x32, 16x16] (double: once transparent, once with crispy white edges)
  • incubator.ico [32x32, 16x16, 32x32, 16x16 (double: no visible difference)
  • internal.ico 16x16
  • mediawiki.ico 16x16
  • office.ico 16x16
  • piece.ico 16x16
  • spcom.ico 16x16
  • usability.ico [48x48, 32x32, 16x16]
  • wikibooks.ico 16x16
  • wikidata.ico 16x16
  • wikimania.ico 16x16
  • wikinews.ico 16x16
  • wikipedia.ico 16x16
  • wikiquote.ico 16x16
  • wikisource.ico 16x16
  • wikispecies.ico 16x16
  • wikiversity.ico 16x16
  • wikivoyage.ico 32x32
  • wiktionary/en.ico 16x16
  • wiktionary/si.ico 16x16
  • wmf.ico [32x32, 16x16]

So:

  • most are only 16x16
  • some have odd duplicates

I'd recommend we go for multi-res icos of [48x48, 32x32, 16x16].

[1] https://gerrit.wikimedia.org/r/gitweb?p=operations/mediawiki-config.git;a=blob;f=wmf-config/InitialiseSettings.php;h=cc038c0a5f98b417bc454c519b8500a320bb7636;hb=HEAD#l9247
[2] https://gerrit.wikimedia.org/r/gitweb?p=operations/mediawiki-config.git;a=tree;f=docroot/bits/favicon;h=becb7607354a12c9bec232c01d6010b9bee0f4c7;hb=HEAD

Here's a small update to see where we are (thanks to Isarra's amazing work on this):

  • black-globe.ico [48x48, 32x32, 16x16]
  • chapcom.ico [16x16]
  • commons.ico [32x32, 16x16]
  • community.ico [32x32, 16x16] — still four layers instead of just two;
  • incubator.ico [32x32, 16x16] — still four layers instead of just two;
  • internal.ico [16x16]
  • mediawiki.ico [32x32, 16x16]
  • office.ico [16x16]
  • piece.ico [16x16]
  • spcom.ico [16x16]
  • usability.ico [48x48, 32x32, 16x16]
  • wikibooks.ico [16x16]
  • wikidata.ico [32x32, 16x16]
  • wikimania.ico [32x32, 16x16]
  • wikinews.ico [16x16]
  • wikipedia.ico [32x32, 16x16]
  • wikiquote.ico [32x32] — should have two layers in different sizes instead;
  • wikisource.ico [32x32, 16x16]
  • wikispecies.ico [16x16]
  • wikiversity.ico [32x32, 16x16]
  • wikivoyage.ico [32x32] — should have two layers in different sizes instead;
  • wiktionary/en.ico [16x16]
  • wiktionary/si.ico [16x16]
  • wmf.ico [32x32, 16x16]

As far as I understand, the 16x16 icon is used in most browsers (in the address bar, on tabs, and for bookmarks), while 32x32 is used on the Windows 7 taskbar, some desktop icons, and 48x48 is used in Windows XP icons (some sites suggest having a bigger favicon, too, but I'm not sure we want to do that just yet).

Further reading:

(In reply to comment #4)

  • wikiquote.ico [32x32] — should have two layers in different sizes instead;
  • wikivoyage.ico [32x32] — should have two layers in different sizes instead;

Are there examples of browsers/apps that cannot scale down a 32px favicon as needed?

(In reply to comment #5)

Are there examples of browsers/apps that cannot scale down a 32px favicon as
needed?

None that I know of... however it's sometimes good to do some pixel-level adjusting, or manual sharpening, on the 16x16 version.

(In reply to comment #6)

(In reply to comment #5)

Are there examples of browsers/apps that cannot scale down a 32px favicon as
needed?

None that I know of... however it's sometimes good to do some pixel-level
adjusting, or manual sharpening, on the 16x16 version.

Indeed - ones like meta certainly need that (or at least a specific render) or they get all fuzzy-like, but more basic ones probably don't. I couldn't really tell the difference with wikimania's and wikivoyage's, for instance, which included testing on broken, crappy, and passable quality monitors. I couldn't test high-quality because I don't have one of those, though. Too expensive.

(In reply to comment #4)

As far as I understand, the 16x16 icon is used in most browsers (in the
address
bar, on tabs, and for bookmarks), while 32x32 is used on the Windows 7
taskbar,
some desktop icons, and 48x48 is used in Windows XP icons (some sites suggest
having a bigger favicon, too, but I'm not sure we want to do that just yet).

Are the 48px ones worth including? If XP is the only thing that uses them it seems like a pretty specific use case.

  • Bug 53741 has been marked as a duplicate of this bug. ***

See https://bugzilla.wikimedia.org/show_bug.cgi?id=53741#c0 for a summary as of 2013-09-04 and the discussion below.

In short, we generally serve users with favicons up to 48x48px, with the exception of the Office Wiki favicon, which is also available in 256x256px version (not sure why).

See also comment 4 for an overview of which operating systems use what size of favicons, and some interesting reading on the subject.

Can someone summarize in a single comment the work that still needs to be done to fix this bug, please? We will convert this work in a Google Code-in task that will be probably completed soon.

Thank you!

https://www.mediawiki.org/wiki/Google_Code-In

Essentially, all the icons mentioned in comment 4 that do not have the [X] sign next to them need to be recreated, with three layers (16x16, 32x32 and 48x48 pixels) each, just like https://bits.wikimedia.org/favicon/black-globe.ico.

Comment 7 provides some general information on why some more complicated logos need pixel-level adjustment or sharpening.

After the logos are re-created, they need to be submitted into the mediawiki-config repo (mediawiki-config/docroot/bits/favicon, to be exact) through Gerrit.

Take a look at http://www.google-melange.com/gci/task/view/google/gci2013/5798454555049984

As soon as you are happy with that task to fix wikibooks.ico I will create separate tasks for all the rest.

Thanks Quim, this looks fine.

In case other people are as lazy as me, there is a nice on-line service which can generate multi-layer .ico files from a single PNG at http://convertico.org/image_to_icon_converter/. You use it at your own risk, etc., but it worked fine for me :-)

Alright, now we have GCI tasks open for each favicon. We should only need to wait and see new bugs being open as blockers of this one.

wikibooks.ico and commons.ico have been already claimed by students.

I have asked Thomas (a GCI student) to stop fixing bugs from task he hasn't claimed, so others can join in as well. For your information, GCI students can claim only one task at a time.

You can review those patches ignoring any GCI rules. If they are good and the bug is resolved as FIXED we will close the task (if it's claimed) or delete it (if it isn't). Thank you!

vladjohn2013 wrote:

Depends on: 58101

Thank you very much guys to be working on this!

Change 100360 had a related patch set uploaded by Hashar:
update several favicons

https://gerrit.wikimedia.org/r/100360

Change 100360 abandoned by Hashar:
update several favicons

Reason:
merge commit can't be submitted until all dependencies got submitted themselves. So we can't really do --no-ff merges or octopus merges when the dependencies are in the same branch.

https://gerrit.wikimedia.org/r/100360

Only one favicon to go! Commons. Started, unfinished, maybe abandoned: Bug 58804

The Google Code-in task is available for any student willing to take it.

http://www.google-melange.com/gci/task/view/google/gci2013/5835082036150272

The patch with the new favicon for Commons has now been merged and deployed, so I think we can mark this bug as RESOLVED FIXED.

Good job, everyone, and special thanks to Quim and all Google Code-In students without whom we couldn't have achieved this.

Phabricator_maintenance renamed this task from Update favicons to provide high res variant (tracking) to Update favicons to provide high res variant.Aug 13 2016, 9:38 PM