SEARCH

How-To Geek

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.

  • Published 10/24/07

Comments (7)

  1. Seth

    Nice post.

    But how is “Installing MySQL Server 5 on Ubuntu” a related post?

    “Well, since I set up this favicon, installing MySQL should be snap.” :)

  2. The Geek

    Seth,

    Good catch on the related posts… I think the problem is that I’ve not written very much on this particular topic, so the related content generator just “gives up” and links to whatever has a few of the same words.

    Installing MySQL on ubuntu is definitely a snap!

  3. Butwheaty

    Here’s a site that creates a favicon, or you can create your own from scratch!

    http://www.favicon.cc/

  4. The Geek

    I thought about including that site when I was writing this, but since I titled the article the “easy way” I figured I shouldn’t…

    But I do like that site, good stuff.

  5. Barron

    I always appreciate a good favicon. For my “always open” tabs in Firefox I use the Faviconize Tab extension, so a good-looking and distinctive favicon is a must.

  6. Iconoclast hero

    Anyway to get blogspot to display a favicon?

  7. SuperAwesomeBlog Guy

    If you use WordPress, I found the Shockingly Simpe Favicon plugin ( http://wordpress.org/extend/plugins/shockingly-simple-favicon/ ) to be excellent, especially for the less tech-minded in actually enabling the favicon.

Enter Your Email Here to Get Access for Free:

Go check your email!