Update favicons to provide high res variant (tracking)
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

bzimport added a subscriber: wikibugs-l.
bzimport set Reference to bz45036.
Krinkle created this task.Via LegacyFeb 15 2013, 8:20 AM
Isarra added a comment.Via ConduitMar 9 2013, 5:13 PM

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?

Krinkle added a comment.Via ConduitMar 13 2013, 12:53 AM

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

tomasz added a comment.Via ConduitApr 25 2013, 2:16 PM

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:

Isarra added a comment.Via ConduitApr 28 2013, 5:55 PM

(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?

brion added a comment.Via ConduitApr 28 2013, 6:00 PM

(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.

Isarra added a comment.Via ConduitApr 28 2013, 6:38 PM

(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.

tomasz added a comment.Via ConduitOct 7 2013, 8:53 PM
  • Bug 53741 has been marked as a duplicate of this bug. ***
tomasz added a comment.Via ConduitOct 7 2013, 9:03 PM

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.

Qgil added a comment.Via ConduitNov 28 2013, 5:17 PM

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

tomasz added a comment.Via ConduitNov 28 2013, 5:47 PM

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.

Qgil added a comment.Via ConduitDec 4 2013, 7:25 PM

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.

tomasz added a comment.Via ConduitDec 4 2013, 9:01 PM

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 :-)

Qgil added a comment.Via ConduitDec 5 2013, 11:01 PM

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.

Qgil added a comment.Via ConduitDec 6 2013, 5:02 AM

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!

bzimport added a comment.Via ConduitDec 6 2013, 4:34 PM

vladjohn2013 wrote:

Depends on: 58101

hashar added a comment.Via ConduitDec 6 2013, 10:41 PM

Thank you very much guys to be working on this!

gerritbot added a comment.Via ConduitDec 9 2013, 11:56 AM

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

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

gerritbot added a comment.Via ConduitDec 9 2013, 12:49 PM

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

Qgil added a comment.Via ConduitDec 30 2013, 10:16 PM

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

tomasz added a comment.Via ConduitJan 27 2014, 7:11 PM

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.

hashar added a comment.Via ConduitJan 27 2014, 7:50 PM

Thank you everyone!

Qgil added a comment.Via ConduitJan 27 2014, 9:39 PM

Yes! Thank you everybody.

mxn added a subscriber: mxn.Via WebNov 24 2014, 9:01 PM

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.