Favicon.ico

From Helpful
Revision as of 14:07, 11 June 2019 by Helpful (Talk | contribs)

Jump to: navigation, search
Related to web development, hosting, and such: (See also the webdev category)
jQuery: Introduction, some basics, examples · plugin notes · unsorted

Server stuff:

Dynamic server stuff:

This article/section is a stub — probably a pile of half-sorted notes, is not well-checked so may have incorrect bits. (Feel free to ignore, fix, or tell me)

favicon.ico

The favicon is the 16x16 pixel icon beside the url in the address bar, in tabs, and (as seems the original intent) in bookmarks.


There are only ad-hoc conventions for the format and the way it should be referenced.

All browsers ought to support ICO, PNG, and GIF.

Some allow animaged GIF, JPEG, and/or APNG. See also this table.


Most browsers will support images larger than 16x16 and would scale them down as necessary (32x32, 48x48, 64x64, and 128x128 are seen with some frequency). (though for those that show 16x16 pixels, an actual 16x16 image will often look cleaner than a scaled-down image)


Some browsers automatically request favicon.ico, typically only under the host root.

Others will only do so when HTML explicitly references it; see notes below.


Explicitly including (HTML)

You can add one via HTML (this example for PNG) using something like:

<link rel="icon" href="/img/app-icon.png" type="image/png">


Further notes:

  • The value for rel isn't standardized. Microsoft's suggestion did not consider standards (they used "shortcut icon" but did not consider that rel is seen as space-separated token set instead of a string). Some browsers are randomly picky, so in the wild you see:
    • rel="icon" (fairly usual)(verify)
    • rel="shortcut icon"
    • rel="SHORTCUT ICON" (some older browsers would take only this)(verify)
    • rel="ICON"
  • ICO's mime type is image/vnd.microsoft.icon. Before its definition, there was no standard, though image/x-icon was the conventional value (with a little less meaning).


Creating

Various image editing programs (such as GIMP) can save to the ICO format, there are utilities like png2ico and such out there, and a whole load of websites that do the work for you (e.g. html-kit.com/favicon)

specific platforms

apple-touch-icon

iOS (iPhone, iPad, iPod Touch) will use these typically larger images, as may some Android devices and the odd browser feature, often for nicer-looking icons on a home screen or such.


Muc​h the same story as favicon, in that it will look in pre-set places (/apple-touch-icon.png and /apple-touch-icon-precomposed.png) unless you tell it where to go, using:

<link rel="apple-touch-icon" href="/iphone.png"/>

or

<link rel="apple-touch-icon-precomposed" href="/iphone_precomposed.png"/>

Notes:

  • apple-touch-icon-precomposed means the iOS won't add effects like a shine


See also:


android-chrome

Targeted 192×192 and 128×128 icons, preferring the 192, apparently mentioning 128 for overlap with some others. If you declare many sizes, It seems to pick the largest it can find (≤192).

Declard like:

<link rel="icon" type="image/png" href="/fav192.png" sizes="192x192"/>

(earlier versions also used the apple touch icon, and had 196x196 icons)


See also: