Tuesday, April 15, 2008

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:

favicon in browser and tab

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.
Favicon maker- Create a favicon from any image
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!

10 comments:

Rascallion said...

Thanks for this post. I have mastered putting favicons on my Blogger blogs but haven't tried it on my actual website. (www.tumtumtreedesigns.com.) I will have to try this and hopefully not break it!

plasticfreenyc said...

Just saw this post.. thanks for the shout out to kerrymonaghan.com! Favicons are so cute. I managed to make one for www.plasticisforever.blogspot.com, thanks to this post!
Kerry

Anonymous said...

It took a little bit of work but i got my favicon created and working on my blog today! Thank you for your help, you have a great blog with tons of good SEO info. See the fanicon at www.familymanfitness.com.

Unknown said...

I see it, RL Morgan! Way to go.

Anonymous said...

if you know how to make a favicon how come your blog doesnt have a one?

Unknown said...

A fair question. Because I just haven't yet. I work on so many other sites, that I just haven't designed one for this site, that is about to get a little makeover anyway. But thanks for asking.

adrin said...

Nice Blog. I liked it.

Make website india

Free Wallpapers said...

really nice tips for web developers

Anonymous said...

Great post thanks for the read, most website seo company have a certain niche and method they follow i will keep your post in mind.

Penis Enlargement Pills said...

I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.