Regular readers of the Minty Ferret may have realized that I’ve recently added a favicon to the site. Favicons are little images that show up beside the web address and bookmarks - just look above. See the ferret paw-print? That’s a favicon.

So here’s a quick tutorial on making a favicon and uploading it so it works on your website.

Open a 16×16px document.

Design your favicon. You only have a small area to work with, so keep it simple! You might want to stick to just a letter, a portion of your logo, or something uncomplicated that represents your website.

Now select File > Save for Web.

Although favicons are .ico files, there is no option to save it as such in Photoshop. We need to save it as a .gif and then use a third-party software to convert it to a favicon-friendly file.

Once you’ve finished saving it as a .gif, head on over to Favicon from Pics. Upload your .gif image to their site.

Now download the provided file to your computer.

Unzip the folder…

And upload the favicon.ico file to the root of your website.

Add the following code between the HEAD tags on every page you want your favicon to show.

<link rel=”Shortcut Icon” href=”/favicon.ico”>

Note: If you’ve done this and your favicon is still not working, you have have to specify the full path to the icon. For example, I had to use http://mintyferret.com/favicon.ico instead of /favicon.ico to get it to work.

Upload the revised files to your webspace. And there you have it! Your very own favicon.

Looking for favicon inspiration? The Favicon Gallery has a nice list of favicons for you to peruse.

Similar Posts

• Generate a Favicon for your Website!
• I’m Taking Requests!
• Free Scalable RSS Icons for your Blog!
• Calendar Icon Tutorial
• Changes Around the Minty Ferret