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 16x16 .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 windows desktop support, embedd a 32x32 and 48x48 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 48x48 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/

 

touch icon 57x57 touch icon 72x72 touch icon 114x114

the apple-touch-icon

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 57x57 pixel version named: touch-icon-iphone.png
  • a 72x72 pixel version named: apple-touch-icon-72x72.png
  • a 114x114 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 automaticly 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 the 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 57x57 pixel version named: touch-icon-iphone-precomposed.png
  • a 72x72 pixel version named: apple-touch-icon-72x72-precomposed.png
  • a 114x114 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="/apple-touch-icon-precomposed.png">

 

for more detailed information (what devices/browser use what and how):