Favicons - Best practices

favicon apple-touch-icon
Leon picture Leon · Sep 26, 2013 · Viewed 74.9k times · Source

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?

Answer

philippe_b picture philippe_b · May 23, 2014

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 browsers
  • Apple touch icon for iOS and Android devices
  • Windows 8 tiles
  • Pinned tab icon for Safari on OS X El Capitan

For 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.

Related questions

How to add a browser tab icon (favicon) for a website?

I've been working on a website and I'd like to add a small icon to the browser tab. How can I do this in HTML and where in the code would I need to place it (e.g. header)? I …

Read More
Adding a favicon to a static HTML page

I have a few static pages that are just pure HTML, that we display when the server goes down. How can I put a favicon that I made (it's 16x16px and it's sitting in the same directory as the …

Read More
How do I force a favicon refresh?

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one. Problem is that I can not see it in any browser. The old favicon shows up or I …

Read More