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?

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.
Upload it to the root of your server as favicon.ico. That should be it, but it doesn't always work like that.
So, include this code in your webpage between the <HEAD> and </HEAD> tags: <LINK REL="SHORTCUT ICON" HREF="https://www.sean.co.uk/favicon.ico"> 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.

Credits

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps

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

Earworm

In this entertaining techno-thriller for adults, Sean McManus takes a slice through the music industry: from the boardroom to the stage; from the studio to the record fair.