HowTo: Website icons for all browsers/devices (favicon, apple-touch-icon, etc)

favicon on browser tab

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/

 

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

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-72×72.png
  • a 114×114 pixel version named: apple-touch-icon-114×114.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=”114×114″ href=”/touch-icon-114×114.png” />
    <link rel=”apple-touch-icon” sizes=”72×72″ href=”/touch-icon-72×72.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 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-72×72-precomposed.png
  • a 114×114 pixel version named: apple-touch-icon-114×114-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=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png” />
    <link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png” />
    <link rel=”apple-touch-icon-precomposed” href=”/touch-icon-iphone-precomposed.png” />

 

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


say something about this post

  • (will not be published)

7 responses to “HowTo: Website icons for all browsers/devices (favicon, apple-touch-icon, etc)”

  1. joey jones Reply

    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

    • joey jones Reply

      oops, it was supposed to be these 2.

      touch-icon-iphone-precomposed.png
      apple-touch-icon-precomposed.png

      • theksmith Reply

        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!