- Why It’s Important to Add a Favicon to Your Website
- Recommendations for Creating a Proper Favicon
- How to Create a Favicon for a Website
Favicon is a small icon sized 16x16 pixels that appears in browser tabs, the bookmarks bar, browsing history, as well as in search results on Google, Bing, and other search engines. The main purpose of a favicon is to help quickly locate the desired website among many open browser tabs and in bookmarks. By taking the time to create it, you can enhance brand recognition and increase user trust in your web resource.
Why It’s Important to Add a Favicon to Your Website
Despite its tiny size, a favicon plays an important role in promoting an online brand. When thoughtfully designed, this icon becomes just as much a part of branding as a logo or slogan.
Websites with a favicon are also easier to find in bookmarks or among open browser tabs. Instead of reading the name of each one, users can easily identify the needed web page just by glancing at its icon.
By creating a favicon that differs in color or shape from those of competitor sites, you can also use this element to easily increase your CTR. Such an icon will immediately make your online project stand out in search engine results (if they display it). And without a doubt, this website favicon will attract users' attention.
Note! The icon is important but not the only factor in increasing CTR. The correctness of the title and description also greatly affects it. For successful promotion, it’s also essential to understand how to properly develop a sitemap, eliminate duplicate pages, and implement proper internal linking.
Recommendations for Creating a Proper Favicon
There are many online services for creating a favicon that can turn an image into an icon in just a few clicks. However, you should first review the recommendations for creating a favicon for your website:
- Watch the favicon size. Using a website or company logo as a favicon is a common practice. And if the logo is designed in a minimalist style and doesn’t contain many small details, this is the right approach. It’s a different story if the image identifying the company or brand includes tiny elements and many colors. In that case, when compressed to 16x16 pixels, a beautiful logo turns into a blurry smudge.
- Create a website icon with your brand identity in mind. Use your brand colors, font, and graphic elements. Remember that this tiny image will eventually become part of your branding.
- Use the first letter, a shortened version, or an abbreviation of the brand name. Look at the favicons of giants like Facebook, Wikipedia, and Google. They feature the first letter of the company name styled in a branded manner. Consider this option, especially if you don’t yet have a logo or are using a text-based logo.
Note! A favicon can include not only letters from the company name but also from the domain name (if it differs from the brand or trademark name). With us, you can quickly register a domain in an international, regional, or thematic zone at a low price.
How to Create a Favicon for a Website
We’ve covered the principles of creating a website icon. Now it’s time to learn how to make a favicon correctly:
- Create an image that you will use as an icon for your blog or online store. We recommend doing this using the free software GIMP or its commercial counterpart Adobe Photoshop.
- Make sure the image size is 16x16 pixels.
- Save the icon and name it favicon.ico.
- Upload the favicon to the root directory of the website.
If, for some reason, you cannot use a file in the .ico format as a favicon or place it in the website's root directory, add the following code to the HEAD section of each web page:
< link rel=shortcut icon href=/icons/favicon.png type=image/png >
Here, /icons/favicon.png is a sample path to the icon, and image/png is the MIME type of the image you’re using. A list of image MIME types is available on Wikipedia.
That’s it — the favicon installation is complete!
If your web resource is powered by a popular CMS, it's very likely you can add a favicon directly from the CMS admin panel. For example, to do this in WordPress, go to the Dashboard and select the menu item “Appearance” → “Customize” → “Site Identity” and upload the favicon in the “Site Icon” block.
Now you know what a favicon is, why it’s important, and how to create it correctly. With this knowledge, you’ll easily design a memorable website icon that will eventually become as powerful a branding element as your logo and your online resource’s color palette.
Like the article? Tell your friends about it: 
