I’m going to admit something kind of geeky. I really like favicons. They’re fun. They’re a great branding tool. And they’re something simple that small business owners can do to spice up their sites and even increase usability for users.
If you don’t know what a favicon is, let me offer some assistance:
Favicons are the mini, 16×16 pixel graphics that represent your Web site up in the address bar, in a user’s list of bookmarks or in their browser tabs. They allow your visitors to create a visual connection with your site.
Neat! How do you create one?
Design your favicon:
- By Hand: Open up your favorite graphics program and get to it. You’ll want to either create a new file that is 16×16 pixels and zoom in until the area is workable OR open up an area that is larger, but still some kind of multiple of 16×16. When you’re designing your favicon by hand, use something that will accurately represent your brand – whether it be a common color scheme, your company initials, etc. Whatever you create will have to stand the tough restrictions of 16×16 pixels.
- With tools: If you’re design challenged (no worries, I am too), there are some great tools that make it easy for even people like us to create great favicons. For example, Favicon.cc will give you some structure and let you build yours straight from their site or FavIcon from Pics will let you upload a pic and generate the favicon for you. Simple!
Save your favicon: When saving your file, reduce it to 16 bit and save as “favicon.ico” if you’re using Photoshop or “favicon.gif” or “favicon.png” if you’re using something else. If you are using Photoshop and want to give your favicon some extra oomph, it’s recommended you download the Windows Icon file format plugin so you can save in the ICO format.
Upload your favicon: Connect to your server and upload your favicon to the root folder of your site. Then, add the following HTML code to the head section of your Web page (between the two Head tags) (pick your file type):
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”v>
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>
<link rel=”icon” href=”/favicon.png” type=”image/png”>
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>
Refresh: Once you’re done, refresh your browser and you should see your favicon appear. If not, give it a few minutes. Sometimes it takes a little bit for everything to sync.
And that’s it! Four steps and you have a great branded favicon that will help users recognize your site in the list of bookmarks or in their browser. Pretty simple, right?
Just for fun, here are some of my favorite favicons on the Web:
Michigan fireworks
Jeffrey Zeldman
Boing Boing
Encyclopedia.com
Fool.com
Michael Gray’s SEO Blog
Any other personal favorites?
You must be reading my mind Lisa! I just made my own favicon for my blog last week and I sure could have used these instructions then. I flew by the seat of my pants and I’m not thrilled with how it turned out. I’m gonna try tweaking it with the links you provided. Thank you for another great lesson. They’re always useful.
I love favicons and it really is a small thing, so Just Do It!
slopoke
man i love yola it has inspired me to get things goin my website http://www.hiphopheroin.com has its own favicon and check out my site lemme know what you guys think!
TJ McCue
I have always loved them, too, but never knew how to do it. Very cool. Thanks for the lesson.
Ivana Taylor
Thanks Lisa – I have made the favicon, but just haven’t been able to upload it into my site – this has motivated me to give it another try
Thanks for the guide! It is funny, the R (as in Revolution theme template) favicon on my blog has disappeared and is now the standard Blogger logotype. I will see if I could manage to take EGO logotype made by John Cox & Allen Forkum and create a favicon!
Now I have something to do during the weekend… 😉
RedHotFranchises
I was always wondering how to do this for sometime now until I read your article. Thanks! Favicons are crucial for branding your website.
Beth Robinson
Thanks for the link to http://www.favicon.cc. It was the extra push I needed to go do favicons for my sites, which was something I’d been meaning to do for a while.
Zafar Majid
Thanks didn’t realise that it was that easy!
As you say, they are fun and a great branding tool.
I know just the image that I can use.
Neal O'Sullivan
Very good directions. However, I cannot read your instructions without losing my breath. Is not this service available for hire? In order to remain competitive, I have to dedicate my time honing my specific skills. What say you?
Anita Campbell
Hi Neal, I had to smile when I read your comment. Sure, you can hire this stuff out. But you also can teach yourself a lot of this stuff. Come on guy, get your head out of those spreadsheets and set up a website!
See you at the Mayor’s golf outing …
— Anita
Anita Campbell
The biggest challenge I have had is knowing the “root folder” of your site.
Anyone care to shed light on how to easily tell the “root folder” from other folders, such as your website folder?
Cool post with great detail. I suggest stopping by faviconblog.com (http://www.faviconblog.com) on his site there is a lot of information not only on how to create a favicon, but how to get it working on your site and to troubleshoot it if it isn’t working. Pretty cool.
-Loren
http://www.theteachingbox.com
Vahur
Today, it feels normal that each website has own favicon.