What is a favicon? How to create a favicon.

Do you know what a favicon is? For a long time, I knew what it was, but didn’t know that was the name for it. A favicon is the little image that you see on the tabs of your browser for different websites:

Favicon Example

One of the nice things about the favicon is that it’s what shows up in your favorites list/bookmark bar next to the website. It can give you a quick visual on what site you’re on, or an easy reference point to get back to a tab isn’t active. If you can also get your logo image to look good in a favicon, it’s a great little branding image.

To get a favicon on your website, you either have to convert an existing image, or use a tool that can create a .ico file. I guess it can also be done with a .png or .gif file, I usually covert to an .ico file (since that was the way I learned to do it.)

A favicon is only 16 x 16 pixels, so the logo has to be identifiable at that size. My Ask Joanne “signature” logo doesn’t work as a favicon, so I use:

ask

shrunk down to 16 x 16 pixels and converted into an icon file.

For converting files, I use: http://www.favicon.cc/ and upload the image I want to use.

Favicon Generator

This online software then creates the favicon image and you can download the finished image to your computer.

The next steps are also easy. Upload the favicon image in the root directory of your website. And then add a little bit of code to the header section of your homepage:

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

Once that’s complete you should be able to just refresh your page in your browser and Voilà! new favicon for your website!

Leave a Reply

Your email address will not be published. Required fields are marked *