Just like following a recipe to bake a cake, there are certain steps involved in creating a functional, successful website that are core essentials – registering your domain, writing the code, curating graphics and creating relevant content. And after that there are a few finishing touches that are a bit more fun, like adding your site’s favicon!
What Is a Favicon?
A favicon is a small icon that is used as a visual website identifier. The most common place for a favicon is in the tab of your web browser, next to the site title. Depending on the browser, you may also see the favicon in the address bar next to the site address or, if the site is bookmarked, next to the site’s title in the bookmark menu.
There are a few search engines that place the favicon next to a website title in search results, but that’s not as common.
Why Is a Favicon Important?
Think of the favicon as a first way to create brand recognition in the eyes of your consumers. Most people are visual learners, meaning they are more likely to remember something if they see it as a graphic. Your site title will probably be the very first thing a person reads, but the favicon will probably be the next thing they notice – in which case, you want to take the opportunity to plant your brand firmly in the memory of a consumer, and continue to do so each time that consumer accesses your website.
How Do I Know if My Site Has a Favicon?
It’s easy to determine if your site has a favicon. Open your website in a browser and look at the tab at the top. If you see your company’s logo or other image specific to your brand, then your site has a favicon; if you see a generic image, read on to learn how to add a favicon to your site.
What Are the Technical Specifications for a Favicon?
First, choose what you would like to use as your site’s favicon. Nine times out of ten this will be your company’s logo. However, if your company doesn’t have a logo you can use a generic image or alphanumeric character that relates to your site’s content (although we strongly recommend you consider creating a logo for your company to increase your brand image).
Favicons are small, either 16 X 16 or 32 X 32 pixels in size. This doesn’t give you much to work with, and when creating your favicon the image can look blurry. But don’t worry: when your favicon is reduced to the size in which it’s displayed on a web browser, it should be crystal clear.
Favicons must be in icon (.ico) format. If you need to convert your favicon from another graphic image format to icon format, there are lots of free online converters that you can use – a quick search will give you plenty of options.
How Do I Add the Favicon to My Site?
You have two options: you can either have one favicon that displays for all webpages on your site, or you can specify different favicons for specific pages.
To add a favicon for all pages of your website, rename your favicon file favicon.ico and upload it to your web root file. Once it’s been uploaded, your browser should automatically start displaying your favicon.
If you want to specify a favicon for a certain page, begin by uploading the favicon with any name (remembering to append .ico on the end) and save it anywhere on your site, likely the place where your other images are stored. Then add the following code to your site:
<link rel=”shortcut icon” href=”/images/newfavicon.ico” type=”image/x-icon” />
You’ll need to change the /images/newfavicon.ico with the path to your new favicon.
And that’s it!
If you’re using a professional template with a good CMS, it should give you the option of adding a favicon, which is as simple as adding the .jpg file in the allocated field and click save.
Just like adding frosting to a cupcake, adding a favicon is a fun yet essential step to creating the perfect website. Happy faviconing!