16×16 Pixels of Branding: The Importance of Favicons
Until very recently, I had no idea what a favicon was. But, upon the recommendation of new media consultant Marshall Kirpatrick (who’s been meeting with the roster of Nemo bloggers including me), I was told to get one.
A favicon (short for favorites icon) is a 16×16 pixel icon that is associated with a particular webpage. If your browser supports a favicon, it appears in the upper left corner of the URL bar next to the site’s address. The favicon originally got its name from the file favicon.ico that was placed in the root directory of a web server. This would then show up in your display of favorites (bookmarks).
WHY SHOULD YOU GET A FAVICON?
Usability: Favicons help a user quickly find a webpage among multiple browser tabs without having to read the page titles. Also, they make scanning a big list of bookmarks much faster.
Branding Awareness: Favicons assist in making a visual representation of your site to visitors. They also make your site look more professional.
MAKING AND SOURCING FAVICONS
I won’t bore you with the details on how to make and install a favicon. There are tons of really solid tutorials floating around the web including those by Photoshop Support and The Site Wizard.
If you want a fantastic favicon in a hurry or can’t decide on an image to use, don’t fret! There are so many great favicon resources!
a. Free Favicon has a nice selection of favicons with great depth and web 2.0 detailing.
b. Genfavicon is a favicon generator that allows you to upload an image to the site, crop it and immediately view the results. (Chami is also highly recommended and offers a similar solution). I tried out Genfavicon and it took me less than 30 seconds to get a great result!
d. Faviconize shows off the best favicons from around the internet. The inspiration is endless!
e. Bluejar.com is offering 20 free themed favicon sets.
IN CLOSING
Favicons are one more tool in your branding arsenal and have the power to distinguish your website from the competition. While favicons alone won’t make your site a force to be reckoned with, they are free and easy to make. Every little bit of branding helps, even if it’s only 16 x 16 pixels of visibility.
Get in touch: 
28 People have left comments on this post
I love Favicons! xx
[Reply]
Haha, I just noticed that you & I have matching ones in pink & red! Aww!
[Reply]
I had no idea what those were called, but I’ve been thinking about them lately. Thanks for all the information. =)
[Reply]
If my website is hosted on Blogger, is there a way to change my favicon from that horrible orange and white B?
[Reply]
I wish all the sites had these favicons.
Do you know if they would transfer as a webapp icon on the iPhone?
[Reply]
I noticed when you got your favicon! I agree, they’re very important. Well, as a perfectionistic touch at least.
[Reply]
I just recently discovered favicon’s too.. & I love them! It is an important step in branding and it just looks plain cute
[Reply]
Brilliant, I always wondered what those things were called. Blogger should at least offer different coloured favicons, the orange is grating.
[Reply]
Thanks for this info on Favicons. I just found a really neat one for the website I’m about to launch – I don’t think it would’ve occurred to me before reading your post. I haven’t commented before, but I love your blog!
[Reply]
argghh does anyone know how to get favicons to work with IE?
[Reply]
Gala: Yes, hearts rule! I actually made a mouth with pill one, but it was too hard to tell what it was…so I joined you and Star in the hearts brigade.
Kelly: I just found this article specifically about Blogger favicons that might help:
http://www.bluejar.com/adding-a-favicon-on-blogger/
Marisol: I’m not iPhone savvy, but there must be a way!
popartpistol: Same here! I always recognized favicons but could never figure out what their name was!! It appears that the Blogger ‘B’ can be changed. See this tutorial:
http://www.bluejar.com/adding-a-favicon-on-blogger/
Rosie: You’re welcome, thanks for reading!
[Reply]
good idea! I just did it.
[Reply]
Thanks for the link! That was probably the easiest bit of html I’ve ever done.
[Reply]
Maybe hearts brigade should be our mafia name ;D
[Reply]
I must say, i totally noticed the ‘favicon’ (i didn’t know what they were called until now). I’m a sort of new reader and i love your aesthetic!
[Reply]
Vanessa: Thanks for stopping by! Favicon is such a funny word, I would have never even known what to search for if it wasn’t for the consultant informing me!
[Reply]
Thanks for the link! Favicons do a lot for branding, especially now with directories and other outlets using them more and more these days.
I HEART favicons. :c)
[Reply]
thanks so much nubby! i didn’t know how they were called. i went through your links, created my favicon and even managed to put it up!xo
[Reply]
I haaaate websites which dont have a favicon. >=[
[Reply]
I have to admit, the only reason I didn’t have you on my bookmark tool bar (I use Mozilla) was because you didn’t have a favicon. Not that it stopped me from visiting your site… but still… ^_^ *adds*
[Reply]
i’ve been putting this off for SOOOO long. i really hate to get around to doing it!! thanks for the awesome reminder!
[Reply]
gilda: You MUST have a favicon by the time I get back to NY next month or I will lecture you!! Haha!
[Reply]
eep!!!
[Reply]
gilda: YES! I saw that you just made a favicon via Twitter! Heeee!
[Reply]
Thanks for the mention, really appreciate it! Nice favicon by the way it seems to really suit your blog from what I have read.
[Reply]
Hey nubby! Thank you so much for all the info. :0)
[Reply]
I finally got a favicon! It took me ages to figure out how, the internet seems to have many conflicting how-to articles about it that just confused me! At first, I wanted to get a purple heart as a throwback to my blogging masterminds, but I finally settled on a logo I drew of a tree! Your article was a great help!
[Reply]
course seasonally namudno efficient election wanbang ayulabs baidyanath bankgiftgift jeopardise digits
lolikneri havaqatsu
[Reply]