It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from © Sean McManus.
Home > Articles > Webmaster resources > Creating Favicons

Creating a favourites icon for your website (favicon.ico)

Curious about how to customise the icon shown with your website address or are you here because your server reports that favicon.ico is the most popular missing file on your site?

On this page, I'll tell you how I made the favourites icons on the various pages of my site. In this screengrab of my homepage in Internet Explorer, the icons are ringed in red:

Screenshot showing favourites icon in IE

Screenshot showing the favourites icon in the address bar and favourites list in Internet Explorer

What is favicon.ico?

It's a Microsoft invention. Internet Explorer will look for it when someone visits your site. If it's there, it'll be shown as the icon in the address bar with your URL. If it's not there, the browser shows IE's default picture of a piece of paper with an 'e' on it. It will also show with your webpage title in the favourites list. Visitors can drag the icon out of the address bar onto their desktop to have a link to your site there too and the logo is used there at double size.

Favicon.ico is now recognised by Netscape as well.

How do I make one?

  1. Create an image file. It should be 16x16 pixels, although IE will also scale a 32x32 icon on the fly. I used the free Irfanview to resize an image and convert it to ICO format.
  2. Upload it to the root of your server as favicon.ico. That should be it, but it doesn't always work like that.
  3. So, include this code in your webpage between the <HEAD> and </HEAD> tags: <LINK REL="SHORTCUT ICON" HREF=""> But linking to your own icon, obviously. When you link to your icon like this, you can give it a different name to favicon.ico and can have lots of different favourites icons for different pages on your site by linking to different icons from each page. I've created different icons for several sections of my site, as the screenshot above shows. You need to include the appropriate LINK REL code on each webpage of your site, so incorporating it in a template can make your life much easier.

How do I make a favicon for the iPod Touch or iPhone?

ipod touch photo The Safari browser in the iPod Touch and iPhone enables users to bookmark sites that appear as icon shortcuts in the interface, like those shown in the photo on the right. In Apple's jargon, they're called 'web clip bookmarks'.

To set one up for your site, you need to create an image file that is 57x57 pixels, and save it as a PNG file. Then upload it to the root of your website (where your default webpage, such as index.htm is stored) with the filename apple-touch-icon.png. The iPod Touch or iPhone will put a glassy overlay on it to make it look like an Apple icon.

If it's not working, or if you want to have different icons for different pages, you can add a link to the icon, similar to how you link to the normal favicon: <LINK rel="apple-touch-icon" href="customIcon.png">

...where customicon.png is the filename of your custom icon, including its path if necessary.

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus.