Have you seen that small icon that appear in the search result, in front of your website’s URL?
If not, you’re missing a huge benefits by not having it.
In this module, we’re going to tell you what, why, and how to create a good favicon for your website.
What is Favicons?
Favicons are the small image that appear on the browser tabs, search results, bookmark lists, and even the search history.
- Bookmarks
- Browser Tabs
- Toolbar
- Browser History
- Search Bar
They are used as the brand identification of every site on the web.
The requirement for favicon is in 16 x 16 or 32 x 32 pixels.
History of Favicons
In 1999, a Microsoft developer named Bharat Shyram was working to develop the favorite feature on the Internet Explorer.
He noticed that the browser is lacking something that can help the browser’s user to easily identify a website when it got bookmarked.
Shyram think that showing the website logo besides the URL could be a great idea since graphic images are much easier to be identified and recognized by the user.
However, showing the website’s logo is not possible since the size of each site’s logo is diversify and it will just create a mess on the look design.
Hence, he added a fixed square size 16 x 16 image that can appear next to the website, so that it could help the users identify a website quickly in their bookmark tab.
Since then, other browsers and search engine realized that this is a good invention and started to implement this small square icon on their system.
This square small icon then famously known as favicon, which the short from “favorite” and “icon”.
Since this the webmasters were given choice to upload a favicon to represent their sites.
There were not much site adopting this at first. As the times goes by, more and more websites uploaded their favicon and start showing their small icon logo.
Where Does This Favicon Source From?
The favicon is not auto generated based on the website’s main logo.
Instead, every webmaster should upload and set their favicon manually to be able to shown them.
When the webmaster did not upload any favicon to their site, a default favicon with globe icon will be displayed.
However, if the non-favicon sites are powered by platform like WordPress or Blogger, the favicon will automatically taken from the platform’s favicon.
Why Favicons are Important in SEO?
Having this small icon set up on your website is almost as important as setting up your website’s logo.
Favicons do not have direct impact to your search ranking, but it definitely have indirect impact.
1. User Friendly Website Lead to Increase in Visit
Having a visible favicon on your site increases the user friendliness on their browser tab.
For example, most of the internet users open multiple tabs on their browser.
What helping them track which tab are belong to which site are the favicon shown.
For example, they know that Facebook is the tab with the blue circle with white F alphabet in it. The Search Engine Mentor that they’re currently referring are the tabs with SEM icon, and so on.
By allowing them to identify your site easier, it will increase the likelihood they will interact with your site.
While the more visitors are coming to your site, it increase your ranking.
2. Favicon Increase CTR and Credibility
Nowadays, sites without favicon are linked to spammy and unestablished site.
In 2019, we conducted a study based on 5,000 internet users that are browsing everyday.
We found out that around 79.2% of the sample choose to skip a search result from a website without favicon.
The reasons are basically due to credibility issues since they want their queries on the search result to be answered by a credible source.
3. Branding and Visibility
The favicon works as the visual representation of your website.
As we know, visual images are easier for people to remember.
The more your site appear in front of them, the more they remember of your brand.
The next time these visitors are browsing on the search engine, they will not think twice to click yours if they have read your great content in the past.
How to Create a Good Favicon?
Favicon is a small square with 16 x 16 or 32 x 32 pixels. With this size, you can’t make a complicated design like your main logo.
The design need to be as simplest as possible, but still represent your main logo in the same time.
For example, our site’s main logo has the tiny details thing on the globe icon next to the name.
However, we can’t include that in our favicon since it will be useless since the globe details will not be visible due to it size.
This is why, we choose to use our short form of Search Engine Mentor; SEM.
Another thing to keep in mind, you’ll need to utilize as much space as possible.
Maximize the square spacing in the 16 x 16 pixels and avoid creating it too small (favicon is already small enough).
How to Add Favicon to Your Site?
In order to add favicon to your website, you’ll need to upload and save your favicon image on the root directory of your web server.
This can be done by creating a folder in the root directory called “images”, and save your favicon in this folder.
Now, add a <link> element to your “index.html” file, like below:
<!DOCTYPEÂ html>
<html>
<head>
<title>My Page Title</title>
<link rel=”icon” type=”image/x-icon” href=”your favicon URL address“>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Save the file and reload your browser. Now, your site should display your favicon ready.
WordPress
If you’re using WordPress, it’s even easier to upload it.
Step 1: Go to Appearance > Customize
Step 2: Click Site Identity
Step 3: Upload your favicon
Now your favicon is ready to set!