Menu
Updated question:
What is considered best practise when creating favicons in 2022?
This is the original question asked back in 2013:
I'm trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons and now Tile icons too.
I've read this post: http://www.jonathantneal.com/blog/understand-the-favicon but I'm still a bit hazy on exactly what to use that will look reasonably good on all devices and browsers >= IE8.
I think I should create the following:
ICO
favicon.ico (32x32)
PNG
favicon.png (96x96)
Tile Icon
tileicon.png (144x144)
Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
based on this https://github.com/h5bp/html5-boilerplate/issues/1367
...and then use this code to serve 'em up?
<link rel="apple-touch-icon" href="path/to/touchicon.png"> <link rel="icon" href="path/to/favicon.png"> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- or, set /favicon.ico for IE10 win --> <meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png"> Am I missing anything?
I'm not clear whether this will cover IE 10?
504
Today, favicon. ico still has widespread support across a variety of browsers. However, more contemporary websites tend to use favicon.
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons. The favicon is supported by several files: A favicon.
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon. ico unless you've specified a shortcut icon via <link> . So if you don't explicitly specify one, it's best to always have a favicon. ico file, to avoid a 404. Yahoo!
The optimal size for favicons is 16x16 pixels. That's how they appear in browser tabs, address bars, and bookmark lists. Ideally however, you'll create your favicon in multiple sizes. That way you'll see properly scaled versions on larger screens rather than the 16x16 version stretched out.
Favicon is way more complex than what it sounds. 10 years ago, favicon.ico was the only needed item. Then, there was the touch icon, then multiple touch icons dues to the various iOS devices screen resolutions, then there was the tile icon for Windows...
Some answers here are very comprehensive - and overwhelming (all this, only for a favicon?). Yet, they fail at indicating that the 310x310 tile icon for Windows is recommended to be 558x558. And since they were written a few months ago, they do not mention the recent manifest for Android Chrome M39 or the pinned tab SVG icon for Safari on OS X El Capitan.
Per-platform design is another tough, yet neglected topic. For example, favicon are often transparent. But iOS does not support transparency (for an example of this, compare the SO touch icon and what you get when you add SO to your iPhone's home screen).
For these reasons, what I consider a best practice for favicon is to not create it manually. Instead, use a tool to automate the whole process and enforce platform guidelines.
I advice you to use RealFaviconGenerator. It generates all pictures and HTML code you need to get the job done:
favicon.ico and PNG icons for desktop browsersFor example, it not only generates the msapplication-TileImage picture and markup but also the more recent browserconfig.xml file supported by IE11. It was also updated a few months ago to support the Android Chrome manifest and Safari OS X El Capitan.
Full disclosure: I'm the author of this site.
139
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
