technology  | 

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)

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

  2. 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