A favicon (short for favorite icon) is a small, 16×16-pixel image displayed to the left of a URL in most modern web browsers. Depending on the browser, a favicon may also appear next to the website name in a list of web bookmarks.
I’m sure you’ve seen favicons before, but you may not have known there was a name for these images or thought about how important it is for your website to have one.
What is the Point of Favicons?
First and foremost, a favicon helps your website appear more professional and credible. Although it’s a small part of a website, the inclusion of a favicon shows attention to detail and also gives the impression of a more complete site.
Next, a favicon provides an opportunity to further reinforce your brand. Branding is a challenge for many businesses, and a favicon gives you the opportunity to get your logo or your colors at an additional location on the web.
Finally—and most important in my opinion—a favicon makes a website more user friendly. With more and more people using tabbed browsers, the fact that your favicon will show up in the tab next to the page title makes it even more important for brand reinforcement and recognition.
Here is an example of a Firefox browser with multiple tabs open. Notice how the tabs that begin with “Schaumbur…” and “Chicago Zo…” do not have a favicon. When a favicon is not installed, a blank square displays instead.
Personally, I start to feel overwhelmed if I have more than about five tabs open at once, but if you walk around the offices at Launch, you’ll see most of my coworkers have 20+ tabs open at any given time. If you want a user to return to your website, make it easy for them to recognize your site with your favicon.
How to Create a Favicon
If you don’t have access to a web designer, you can use a free favicon generator like http://favicon-generator.org/. There are many tools available to generate a favicon based on the look and feel of your website. Your final favicon file should be a 16×16-pixel image saved as an .ico file.
When creating your favicon, make sure it is easy to distinguish from others so people can find your site easily in a list of tabs. Also, keep in mind that your favicon does not need to be a shrunken version of your logo—it can be a symbol and/or a single letter. Check out these favicons for inspiration.
How to Install a Favicon
First, save your image as favicon.ico, and upload this “favicon.ico” file to the root of your website.
Once this is done, add the favicon install code to the header.php file for your website. For most websites, you can use the following code in your header before the </head> tag, but sometimes you may need to change the path for where you favicon is located:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
Favicons may just be a tiny part of your website, but they play a large role in branding and recognition from a user perspective. Don’t overlook the power of favicons!