How To Give Your Site A Favorite Icon

By  on  

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
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

Discussion

  1. 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/

  2. Hugo

    disregard the print command…I’m trying to figure out how to post code in the wmd. Sorry for the mistake.

  3. Thanx – I get a complete “overstanding” of the ideas

  4. Why doesn’t the link reference work for Chrome?

    Avcreativecenter.com

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!