Menu
Favicon business got complicated during last years. New kinds of devices (re)invented, like tablets and smart smartphones. They use favicons in new ways (e.g. as application icons on homescreens) and require vendor-specific ways of linking them. In similar way, browsers now allow creating desktop-shortcuts for web-apps (which also use favicons for icons). Worse, we now have high-resolution ("retina") displays in both portable devices and laptops, which require higher-resolution images for icons. Even worse, different browsers (and versions) support different image-formats for icons and different sizes. Starting with 16x16-only .ico-only IE6 and ending with Opera, which now supports .svg icons.
What should I do in order to support crisp icons on most devices and browsers of today?
So far the best resource I could find was html5boilerplate, which recommends having the following files:
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
favicon.ico # 32x32
while not putting any links to them in <head> tag.
Edit: another consideration is that .ico files can store several images with different resolution in them. Is this useful or supported?
729
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons. The favicon is supported by several files: A favicon.
A favicon is a browser icon that represents a brand or website. Most often seen next to a web page's title in browser tabs, favicons can also be found in address bars, bookmark lists, search results pages, toolbars, browser history, and other places across the web.
Microsoft recommends 16×16, 32×32 and 48×48. Yes, a single ICO file can contain multiple graphics. Desktop browsers often use the favicon in a tab, and on standard resolution displays, the 16×16 version is fine: 16×16 favicon.
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
There is some official advice at http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html which seem to confirm your list.
Ideally, the favicon.ico file should contain multiple resolutions in the one file as up to date browsers can now take advantage of this and a 16 x 16 icon is never going to look very good on a retina screen.
Microsoft apparently now recommend the favicon.ico file contain at least 16×16, 24×24, 32×32 and 64×64.
I just launched a free online tool that will create favicons like this at: http://iconifier.net
See the readme page on the website for more links to the latest favicon information.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
