Creating a FavIcon the Easy Way

I recently decided to update the FavIcon for this site (the little icon in the address bar). The old one was something I’d hacked together myself in visual studio, and just didn’t seem friendly enough for me.

There’s a number of online generators that create the icons for you from a picture, and they really seem to do a great job while keeping everything extremely easy.

These are two that I’ve personally used on more than one site:

FavIcon from Pics

First find a picture that is similar to what you’d like the icon to look like:

image

Just choose the file and then click the Generate button, and you’ll see the new icon exactly as it will look in the address bar.

image

I used the icon but ended up cleaning it up a bit in an image editing application.

Dynamic Drive – FavIcon Generator

Just choose the picture, click the Create Icon button, and see the preview.

image

The only problem you might notice is that usually your icons will end up with a color background even though you might prefer they have transparency.

Installing your FavIcon

Once you have the icon file, you can save it somewhere on your website. Edit the header/theme for the site and insert the following line, adjusting the path if necessary.

<link rel=”shortcut icon” href=”/favicon.ico” >

That’s about all there is to it.

Lowell Heddings, better known online as the How-To Geek, spends all his free time bringing you fresh geekery on a daily basis. You can follow him on if you'd like.