How to Make a Favicon - This Website Helps You Make the .ico File

Here is a great website to make a favicon: http://tools.dynamicdrive.com/favicon/

What is a favicon? It's the cute little graphic in the top of your browser bar that is usually pretty close to your logo design. Here's a picture to show you what a favicon looks like:



I've circled the favicons in red. The little blue and brown favicons that say "km" in script are little ones we created for www.kerrymonaghan.com, and they are my favorite ones at the moment. The orange favicon to the right is Blogger's. It's showing the page that that I am currently typing this post on. What is it good for? For brand awareness, of course! Favicons work in most browsers, including Firefox, Safari, and Internet Explorer. Other browsers are catching on.

Not only can the user quickly identify your website if they are using "tabbed browsing," which is when several websites are open in one browser window, but the favicon can also show up when the user bookmarks your page on their own computer, or in social bookmarking websites like Stumbleupon. Actually, those websites will most likely show a thumbnail of your web home page.

How to Make a Favicon
There are many ways to skin this cat, but here is how I do it:

1. In Illustrator, set your art board to be 16px x 16px. That's how big a favicon is. The size of your pinky nail.

2. Design your graphic, and always look at it from actual size, since other people won't be able to zoom in.

3. Save it as a .jpg. Sometimes, I send it to my programmer as an .svg file to make sure I've done everything right, and then he polishes it off.

4. Now you'll need to save it as a .ico file, and call it favicon.ico. Go to http://tools.dynamicdrive.com/favicon/ to help you with this, if your computer can't correctly create a .ico file.

You only need to call it favicon.ico, not pink-favicon.ico or something. The online tools that make the favicon work will only look for "favicon.ico".

5. Finally, you can upload it to your root directory, which means that you'll upload it to the file that is usually one past the www folder, if you have FTP access, which you can usually get by going through your host's website. I always prefer CuteFTP for my FTP access. If that just confused you, you could hire someone like my company, Katie James Pixelated, to quickly do this for you. If you have a blog, you might need to access your template code and insert it before the HEAD tag. Ideally, if your website is built for it, you should only need to upload this file into one place. If your website does not have include files, or is not dynamic, then you may need to include this file into each of your pages. But again, if that just confused you, it may be best to hire out.

If you have created a cute favicon, please share it with us by dropping a link to your website in the Comments below!