It's been a while since I looked into favicons, back in the day you could just pop one into the root of your domain and job done! So have things changed much?
Firstly, what exactly is an .ico file anyway?
The
.ico file format is an image file format for computer icons originally in Microsoft Windows. An
.ico file contains one or more small images at multiple sizes and color depths.
Where did it all begin?
Favicons were first supported in 1999, browsers look in the web root for a file called
favicon.ico Or it could be specified in another location using a link tag with the rel attribute having the value "shortcut icon"...
<link rel="shortcut icon"
href="http://mydomain.com/mypath/myicon.ico" />
The icons where primarily used for bookmarks by IE.
The trouble with .ico files
An
.ico file typically contains multiple bitmap images, so is not really suited for web use where compressed file formats like
.png are more suitable. (For a time, the MSN favicon used more bytes than the entire Google homepage, including the logo!
[cite: ieinternals blogs.msdn.com])
Also, if a browser or device uses a specific icon, does it really want to download all the other versions as well, why not just download the relevant icon? And another thing, how do you tell what icons are contained within the
.ico file, are they all correct, what if you need to add or edit one?
So what's the icon used for?
- Bookmarks and history (original usage)
- Browser tab and address bar
- Speed dial
- Desktop shortcuts
- iOS/Android home screen icons
- Windows task bar and Metro tile
- Probably many others...
That’s a lot of use cases! In order to support most browsers and platforms, you need more than a dozen graphics. You'll need iOS icons with the rel attribute value "apple-touch-icon", browser icons with the rel value "icon" (not "shortcut icon") and the MS tiles meta tag name msapplication-TileImage...
iOS..
<link href="/..." rel="apple-touch-icon" sizes="WxH" />
Web browsers etc...
<link href="/..." rel="icon" sizes="WxH" type="..." />
MS ties...
<meta name="msapplication-TileImage" content="/..." />
Altogether, you might need something like the following, depending on what versions of iOS you want to support...
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
To further complicate things IE11 will accept a browser configuration file specified by a meta tag named msapplication-config...
<meta name="msapplication-config" content="/ie-config.xml" />
You can put all the paths to all the the images and tile background colour, it might look something like this.
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
<TileColor>#009900</TileColor>
</tile>
<badge />
<notification />
</msapplication>
</browserconfig>
So that's quite a lot of images, but at least they are compressed and separate so you can view them etc... so things are looking up.
Everything is a bed of roses... NOT!
Most modern browsers support a png favicon but…
- Firefox and Safari will use the favicon that is listed last
- Chrome for Mac will use whichever favicon is .ico formatted (if there is one), otherwise the 32×32 png
- Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the will use the .ico file if there is one
- If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari
- Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices
- Opera, will choose from any of the available icons at complete random
- IE no PNG support (but IE on Vista+ supports RGB/a PNGs inside ICO) caching nightmare!
[cite:
jonathan tneal]
And what's worse is in FF and Chrome unneeded favicons are downloaded even though they aren't displayed or used anywhere. (FF bug-751721, Chrome bug-324820)
What to aim for, in short...
Have a favicon.ico in the root of the webapp, but don’t reference it with a <link ./> tag as this will cause a number of browsers to use it even when there is a better png alternative. You should still have the favicon.ico in the root directory as older browsers will request it by default and you don't want a load of 404s on your server.
Add link tags with rel="icon" sizes="width x height" for all sizes you want to support.
Create a browser config xml for IE11
Don't overdo it! Don't create 100's of png's as FF and Chrome will download them all regardless!
Further reading...
