Favicon and android main icon icon

Regarding these detailed descriptions of the madness that is the fav icon:

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 syntax <link rel="icon" .. />

for its desktop icons, which is the same syntax for the fav icon.

Does anyone have cryptic size combinations and orders to be able to target Android to a single desktop icon and still maintain browser compatibility.

For example, our fav icon has a transparent background, and we would prefer dedicated icons for home screens.

+3


source to share


1 answer


Answer

Create and declare the following icons in the following order:

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

Note. Android Chrome can use 192x192 icon for start screen and bookmark, though v37 doesn't seem to do that.

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

Clarifications

For reference Android Chrome uses the 192x192 icon



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

      

I've done some experiments about the Android Chrome icon . Conclusions:

  • Android Chrome actually uses the 192x192 icon.
  • If it cannot find the 192x192 icon, it looks for the bottom definition icons: 191x191. Else, 190x190. Else ...
  • It doesn't use anything higher than 192x192. For example, if you suggest a 16x16 icon and a 194x194 icon, Chrome chooses a 16x16 icon, even though a 194x194 icon sounds like the best choice.

About other browsers: As far as I know, there is no other browser that explicitly selects the 192x192 icon. Good. Otherwise it will be a blocking problem. There are two policies:

  • Some browsers choose low resolution PNG icons (for example, Windows Firefox uses a 32x32 PNG icon).
  • Some browsers choose the highest resolution PNG icon (eg IE 11).

With this information, the game will now offer both browsers what they want, so no one (but Android Chrome) will get a special 192x192 icon. So the answer is above.

A little extra twist around the order. This usually doesn't matter as the browser only needs to select the icon based on its size. Except for Firefox, which picks the last advertised icon .

+11


source







All Articles