Hrvatski

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?

favicon

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 Download.com 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!





Branding & web design by Nela Dunato

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!

Facebook