Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

How To Give Your Site A Favorite Icon

By David Walsh on August 1, 2007

Undoubtedly, you've been to websites that have a custom icon in the address bar. Oftentimes the icon is the organization logo, mascot, or at the very least the organization's colors. There's a lot more to the favorite icon than most people probably think.

Advantages of the favorite icon include:

File size is extremely small, so there's no real increase in load time
Favorite icons are cached, which means a one-time download (until cache expires)
You can explicitly set the favorite icon but an implicit file is checked if one is not defined
Increased website credibility and branding
Shows users professionalism and attention to detail
Most browsers use your cached favorite icon as the favorite / bookmark icon
Incredibly easy to "install"

Favorite Icon Requirements & Recommendations

If there is no favorite icon defined in the <head> section of your page, the browser will look for a "favicon.ico file in your website's home directory. Your favorite icon should be a .ico file; Mozilla Firefox accepts PNG files but for maximum browser compatibility, use a true icon file. Your icon should be 16 pixels wide by 16 pixels tall (32x32 will be scaled downward, though) and 256 color is the optimal palette.

So how do you do it? There are a few ways.

Implicitly Selected Favorite Icon

Simply place your "favicon.ico file in your website's home directory. Simple.

Explicitly Choosing Your Favorite Icon

Yes, the "<link>" tag is used for more than just stylesheets! You can define your favorite icon by placing the following code in the <head> section of your website:

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Summary

If you really want to show your website visitors that you care about attention to detail, use a custom favorite icon. There is minimal effort involved in creating an icon and the advantages are worth the time spent.

Recent Features

By David WalshApril 10, 2012
CSS Animations Between Media Queries
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
By Chris CoyierAugust 13, 2013
Chris Coyier’s Favorite CodePen Demos
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

By David WalshMarch 30, 2010
Growl-Style Notifications Using MooTools Roar
When I think of premier MooTools plugin developers, Harald "digitarald" Kirschner is usually one of the first people that come to mind. Harald has built some of MooTools' most popular plugins, including AutoCompleter, FancyUpload, and History Manager. My favorite plugin created...
By David WalshApril 7, 2008
MooTools 1.2 OpenLinks Plugin
I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

Discussion

Hugo

Here’s what I use:

print("<link rel="icon" href="./favicon.ico" type="image/x-icon" />");
print("<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />");

If you need to create a favicon from a jpg, gif, or png then head on over to http://www.favicon.cc/

Hugo
disregard the print command…I’m trying to figure out how to post code in the wmd. Sorry for the mistake.
Drefus
Thanx – I get a complete “overstanding” of the ideas
Drefus
Why doesn’t the link reference work for Chrome?

Avcreativecenter.com