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:
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: Some web platforms like Drupal will display their own favicon if you don’t add your own:
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: 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!