16×16 Pixels of Branding: The Importance of Favicons
by Nubby, 08.06.08 at 8:06 pm :: permalink :: rss
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 16x16 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.







August 6th, 2008 at 8:15 pm
I love Favicons! xx
August 6th, 2008 at 8:15 pm
Haha, I just noticed that you & I have matching ones in pink & red! Aww!
August 6th, 2008 at 8:21 pm
I had no idea what those were called, but I’ve been thinking about them lately. Thanks for all the information. =)
August 6th, 2008 at 8:42 pm
If my website is hosted on Blogger, is there a way to change my favicon from that horrible orange and white B?
August 6th, 2008 at 8:56 pm
I wish all the sites had these favicons.
Do you know if they would transfer as a webapp icon on the iPhone?
August 6th, 2008 at 9:42 pm
I noticed when you got your favicon! I agree, they’re very important. Well, as a perfectionistic touch at least. ;)
August 6th, 2008 at 10:37 pm
I just recently discovered favicon’s too.. & I love them! It is an important step in branding and it just looks plain cute
August 6th, 2008 at 10:54 pm
Brilliant, I always wondered what those things were called. Blogger should at least offer different coloured favicons, the orange is grating.
August 7th, 2008 at 12:28 am
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!
August 7th, 2008 at 1:40 am
argghh does anyone know how to get favicons to work with IE?
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! :)
August 7th, 2008 at 2:30 pm
good idea! I just did it.
August 7th, 2008 at 3:32 pm
Thanks for the link! That was probably the easiest bit of html I’ve ever done.
August 7th, 2008 at 6:24 pm
Maybe hearts brigade should be our mafia name ;D
August 8th, 2008 at 8:21 pm
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!
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!
August 9th, 2008 at 10:07 pm
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)
August 10th, 2008 at 1:15 am
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
August 10th, 2008 at 6:31 am
I haaaate websites which dont have a favicon. >=[
August 12th, 2008 at 11:36 am
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*
August 12th, 2008 at 11:22 pm
i’ve been putting this off for SOOOO long. i really hate to get around to doing it!! thanks for the awesome reminder!
gilda: You MUST have a favicon by the time I get back to NY next month or I will lecture you!! Haha!
August 13th, 2008 at 10:00 pm
eep!!!
gilda: YES! I saw that you just made a favicon via Twitter! Heeee!
August 26th, 2008 at 3:53 pm
Thanks for the mention, really appreciate it! Nice favicon by the way it seems to really suit your blog from what I have read.