Favicons – why something so small is important

There once was a small image, only 16×16 pixels, who lived in the address bar of a web browser. This little guy also had three twin brothers. One lived in a browser’s open tabs, another lived in the bookmarks directory, and the third was popping up inside the content of websites themselves. Though small, these little dudes provided something very important to the internet, and those who ignored them paid dearly. These collections of 256 square pixels all have the same name, and it is mighty indeed: FAVICON.

We are Favicon. We are legion.

Favicons are the little images that you see as you browse the web that help identify websites.  For example, check out these little buggers and see if any are instantly recognizable:

  favicon_wikipedia     favicon_gmail     favicon_facebook

In order from left to right, we have Wikipedia, GMail, and Facebook. We’ve all seen these icons. They are everywhere. When you load a website, its favicon (if it has one) appears in your browser’s address bar, on the active tab, and if you save the site, in your bookmarks folder. They are also starting to appear on websites to quickly identify links. Theoretically, any URL that you visit has the capacity for a favicon. That’s a lot of places!

Branding, consistency, practicality

Favicons are important for a few reasons. They provide an extra edge of professionalism for your site. Without a favicon, a browser tab might only display a blank white page icon like this:  favicon_page Some web platforms like Drupal will display their own favicon if you don’t add your own: favicon_drupal

Favicons are a great way to keep your brand visible and consistent, too. Very often, a favicon will be a scaled-down version of a company’s logo, or at the very least an abstract image that is consistent with your brand’s color scheme. They help unify a user’s experience with your website. Furthermore, favicons can help users (including you) easily organize bookmarks visually. A bookmark for Facebook, for instance, is easily identifiable because you are probably on Facebook right now, aren’t you? :)

Think about the way that icons display on smartphones. We often identify our apps by their images, not by the text that names them. Favicons are the same way, and they are everywhere. So make sure that you are on the cutting edge – get a favicon!

Add a favicon

To properly deploy a favicon, create a 16×16 pixel image featuring a shrunken version of your logo or a clever thing that you’d like to use to easily identify your site. Here at Spotted Koi, we just use our regular logo: favicon_spottedkoi  Save your image in an ICO, PNG, or GIF format, then send the file to your website’s root directory. Remember the filename!

Then find the space in your website’s theme where the <head> tag begins and insert the following code: <link rel=”shortcut icon” type=”image/x-icon” href=”YOURFILENAME.GIF” />

Be certain to add this code before the <head> tag ends, which will look like this: </head>  If you’re not comfortable with editing HTML, you can use the Shockingly Simple Favicon Plugin!

Favicon thanks you for your time.

Keep in mind it can take a little while for the internet to notice that you have a favicon loaded, so be patient!

One thought on “Favicons – why something so small is important

  1. Pingback: Tips Tuesday and is Your Blog an Info Charity Site?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>