the favicon.ico
works in Firefox, IE, Safari, Chrome (and others). also works in Windows when dragging a shortcut to the desktop.
- at the minimum create an 8-bit 16×16 .ico format icon file
- name the file favicon.ico and put it in the root of your website
- add this code between the <head> and </head> tags of your html:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
if you want Windows desktop support, embed a 32×32 and 48×48 pixel version in the same .ico file
if, like most people, the art if tiny icon creation is baffles you – the simplest solution is to use one of the many web tools that take a normal picture and create the .ico for you.
- for best results, start with a square image, preferably with a transparent background (use a .png).
- resize the image down as close to the 48×48 large target size in something like Photoshop and adjust it to you liking
- use a conversion/generator tool, my favorite is Dynamic Drive’s here: http://tools.dynamicdrive.com/favicon/
the apple-touch-icon(s)
works on all apple iOS devices (iPhone, iPad, iTouch, etc). partially works on Android 2.1 and 2.2+.
create 3 different sized versions of your site icon, in the .png format:
- a 57×57 pixel version named:
touch-icon-iphone.png - a 72×72 pixel version named:
apple-touch-icon-72x72.png - a 114×114 pixel version named:
apple-touch-icon-114x114.png
to make use of these:
- put the files in the root of your website
- add this code between the <head> and </head> tags of your html:
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-72x72.png" /> <link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
the iOS devices will automatically turn your image into a “button” with rounded corners, “glass” effect, and dropshadow. if you want to provide an alternative “pre-composed” version of your image (telling iOS, don’t mess with my junk) do the following (this step is required for Android support, Android ignores the non-pre-composed version):
create 3 different sized versions of your site icon, in the .png format:
- a 57×57 pixel version named:
touch-icon-iphone-precomposed.png - a 72×72 pixel version named:
apple-touch-icon-72x72-precomposed.png - a 114×114 pixel version named:
apple-touch-icon-114x114-precomposed.png
to make use of these:
- put the files in the root of your website
- add this code between the <head> and </head> tags of your html:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="/touch-icon-iphone-precomposed.png" />
Thanks a lot – I was wondering what those icons was for
fyi, in the last example the file name that you specified doesn’t match the file in the code provided
touch-icon-iphone-precomposed.png
apple-touch-icon-precomposed
oops, it was supposed to be these 2.
touch-icon-iphone-precomposed.png
apple-touch-icon-precomposed.png
http://www.icoconverter.com/
…is ideal.
Thank you for the helpful info! Just wanted to point out that one line of your example code is missing the tag-closing “/>” at the end:
I give up. The one for “touch-icon-iphone-precomposed.png”
thanks, i think i fixed the place you were talking about.
this article is in bad need of updating actually, the Apple sizes are now different, and there’s also Windows 8 specific stuff possible too… maybe i’ll find time to edit it soon. in the mean time if anyone finds this, be sure to reference the link to the Apple documentation (at end of the article) for more current info!