printer friendly version

Adding a favicon to webpage

Ever wondered how to get this tiny icon next to the URL in your address bar and the bookmarks?


That's really easy. The hardest part is actually drawing it. Here's a short guide.

Drawing the icon

You need an icon editor. The most famous of all is probably Microangelo — a very powerful, but costly tool. You can get free trials of various icon software on and see which one you like best. If you're a Photoshop user, you can get a free plugin at Telegraphics which will enable you to save your images as .ico files.

Create a new image sized 16x16 pixels, 1 frame, up to 256 colors. You could try resizing a bigger image to this size, but results will rarely be good — the best way is to go pixelling from scratch.

Using an icon editor is very similar to using MS Paint, they usually have all the essential tools like the pencil, eraser, flood tool, marquee, line tool and similar. This is a screenshot of IconArt Freeware Version

IconArt software

If you want to make your icon transparent, you must choose a transparency (mask) color for the background.

Draw an image (this part is entirely on you), and when you're done, save it as .ico file. It's the common practice to name it favicon.ico altough you may be more creative when choosing a name.

Applying the icon to a webpage

Add this code inside the <head> section of all your pages:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Make sure the link is correct. After uploading the files (and the icon) to your server, open your page. If nothing happens, try refreshing it. Bookmark it. Is the icon there? Great, you did it :)

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business