HTML Code and Image File Generatior for All Favicons

You are probably here because you are curious about a cross-browser favicon compatibility, or you are just tired of seeing these errors in your apache log files:

GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 

GET /favicon.ico HTTP/1.1" 404

I was the later, but this post should help with both.

Internet Explorer

Facts

• 16x16 .ico image
• Must be named favicon.ico
• Must be located in the document root ( http://servername.com/favicon.ico )

Code (optional)

<link rel="shortcut icon" href="/favicon.ico"> 

iPhone / iPad

Facts

• 57x57,  72x72, 114x114, and 144x144 .png images
• Name it whatever, put it wherever

Code

<link rel="apple-touch-icon" type="image/png" href="/favicon_57.png" /> 

<link rel="apple-touch-icon" type="image/png" href="/favicon_114.png" sizes="114x114" /> 

<link rel="apple-touch-icon" type="image/png" href="/favicon_72.png" sizes="72x72" /> 

<link rel="apple-touch-icon" type="image/png" href="/favicon_144.png" sizes="144x144" />

Everything Else

Facts

• 64x64 .png image
• Name it whatever, put it wherever

Code

<link rel="icon" type="image/png" href="/favicons/favicon_64.png" />

Update

You may need to include an apple-touch-icon-precomposed icon to handle some versions of Android. Read more here.

Code

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

Useful Links

• Generate code & files for all favicons from one image file
• Create .ico images with web-based editor