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


  • 16x16 .ico image
  • Must be named favicon.ico
  • Must be located in the document root ( )

Code (optional)

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

iPhone / iPad


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


<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


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


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


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


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

Useful Links

No comments:

Post a Comment