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="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

© Sean McManus. All rights reserved.

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 and music

Artificial: album cover shows a steampunk heart

Artificial

What happens beyond AI when the machines become emotional? Discover my new album of electronic music here.

Mission Python book

Mission Python

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

Coder Academy book

Coder Academy

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

Cool Scratch Projects in Easy Steps book

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!

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About