Search code examples
androidfavicon

Separate favicon and android homescreen icon

In reference to these thorough write up's on the madness that is fav icons:

http://www.jonathantneal.com/blog/understand-the-favicon/

https://mathiasbynens.be/notes/touch-icons

http://en.wikipedia.org/wiki/Favicon

Android is now starting to use the <link rel="icon" .. /> syntax for it's homescreen icons which is the same as the fav icon syntax.

Does anyone have the mysterious size combinations and ordering to be able to target android with a separate homescreen icon and still keep cross browser compatibility.

For example our fav icon has a transparent background and we'd prefer dedicated icons for homescreens.

Solution

  • Answer

    Build and declare the following icons in this order:

    • 192x192 PNG icon (designed for Android)
    • 194x194 PNG icon (classic favicon design, with transparency)
    • 32x32 PNG icon (classic favicon design, with transparency)

    Note: Android Chrome may use the 192x192 icon for both home screen and bookmark, although v37 does not seem to do so.

    You can use this favicon generator to create code and pictures you can use as a template. Since it does not support differentiated pic for Android, you will need to add the 194x194 picture manually. Full disclosure: I'm the author of this site.

    Explanations

    For reference, Android Chrome uses a 192x192 icon

    <link rel="icon" sizes="192x192" href="/favicon-192x192.png">

    I've made some experiments about the Android Chrome favicon. The conclusions:

    • Android Chrome really uses the 192x192 icon.
    • If it cannot find a 192x192 icon, it looks for lower definition icons: 191x191. Else, 190x190. Else...
    • It does not use anything above 192x192. For example, if you offer a 16x16 icon and a 194x194 icon, Chrome picks the 16x16 icon, even if the 194x194 icon sounds like a better choice.

    About the other browsers: as far as I know, there is no other browser that explicitly picks the 192x192 icon. Good. Else, that would be a blocking issue. There are two policies to deal with:

    • Some browsers choose some low definition PNG icons (eg. Windows Firefox uses a 32x32 PNG icon).
    • Some browsers choose the PNG icon with the highest definition (eg. IE 11).

    With these information, the game is now to offer to both kind of browsers what they want, so no one (but Android Chrome) will take the special 192x192 icon. Thus the answer above.

    A little additional twist about the order. Normally, it is irrelevant, since a browser is supposed to select an icon based on its size only. Except for Firefox, which picks the last declared icon.