Creating a favicon & touch screen icon

A favicon (favourite icon) is a bitmap image file which when uploaded to your site will appear before the URL in the address bar of a browser, in a Window end-users favourite list, next to your home page's title, whenever your site is bookmarked, and as an icon short cut image on the home screen of a touch screen device such as a smart phone, iPad or Android tablet.

How do I make one?

There are specialist applications for making favicons at the variety of sizes that different OS's use, but you can do it with Photoshop or any paint program that allows you to save images in standard web formats. You will need to make 3 files ..

  1. 16px x 16px bit-mapped .ico file for desktop browser address bars and book mark / favourite lists
  2. 72px x 72px .png file for touch devices, smart phones, Apples iOS and Android tablets
  3. 114px x 114px .png file for touch devices with retina displays, eg smart phones, Apples iOS and Android tablets

Here's how to do it ..

  1. Create an simple image that contains the fundamental branding aspects of your site (drawn from the sites colours, logo, etc). Do this at a larger size, perhaps 400 x 400 or 200 x 200. You will need to zoom out (reduce its size) so you can judge visually if it will work at the 114 x 114, 72 x 72 and 16 x 16 sizes you will need. You may decide to create 3 versions, the one at the largest size might have more detail.
  2. Save your file in its native file format, and at its full size, for future editing.
  3. Reduce the file to 16 x 16 and save it as a 128 dithered gif at the root level of your site. Name it "favicon.ico" (overwrite the .gif extension). This is a hack that works well, but you may wish to use one of the many websites that have a Java app to do this for you and create a native windows .ico file.
  4. Go back to your original artwork size, this time reduce it to 114 x 114 and save it as a png file to the root level of your site. If you wish it to appear as it is (ie without the gloss effect that iOS devices add), name it "apple-touch-icon-114x114-precomposed.png". If you like the iOS effect name it "apple-touch-icon-114x114.png". Do the same for the 72 x 72 version.
  5. You will need an additional bit of code in the head tag to ensure that retina displays use the larger size whilst non retina displays use the standard 72px x 72px .png file. ..

    <link rel="shortcut icon" href="favicon.ico" />
    <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">

  6. Bookmark your homepage to see the16 x 16 icon appear in the Favourites window. If it doesn't appear, clear your browsers cache and history, restart the browser and try again.
  7. In iOS, use the share button in Safari to create a link icon/button on your home screen, you will see the 72x72 or 114x114 icon has been selected.