A favicon is an icon placed in front of the page name in a browser tab. As a rule, the picture contains a logo, the first letter of the brand name or an image that is relevant to the subject of the resource.
A favicon is a picture, an icon of a web page. Such images were first used in the Internet Explorer browser. A recognizable picture helped you easily find the desired site among the many open tabs. Called such pictures FAVoritesICON – translated as “icon for favorites”, hence the simplified name – favicon.
Now the favicon is present not only in the tabs, but also in the bookmarks panel, in the history and bookmarks of the browser, in the desktop and mobile search engine results.
Regardless of where it is placed, the favicon attracts the attention of users, and helps to remember the site.
Why a favicon is needed
The main purpose of a favicon is to distinguish a brand or its site among browser tabs. In the absence of an icon, the tab displays a picture of a black and white planet, which makes it impossible to recognize the site. Imagine that your browser has 10-15-20 tabs open at the same time. With so many pages open, the header text is simply not visible, and the desired site can only be recognized by the image.
In addition, a favicon is an opportunity to make the brand more recognizable and memorable to the audience. The picture attracts attention, is remembered and associated with the brand. Later, when users see the same icon in search results, ads or bookmarks, they remember the brand.
For site owners, a favicon is useful because:
- provides recognition of the site and, consequently, the brand;
- allocates a resource among competitors;
- indirectly confirms the owner’s attention to detail;
- Complementing the style of site design.
Visitors favicon facilitates the search tab or bookmark.
Favicon design
The three main characteristics of a good favicon are clarity, simplicity and memorability. The image should be clear, memorable and easily recognizable.
To understand how good the finished icon is, we recommend answering the following questions:
Does your favicon stand out from your competitors? Look at the search engine results for your keywords and study the favicons. Pay attention to the shape, color, and content of your competitors’ pictures. You need to come up with something that will be drastically different.
Does the favicon evoke associations with a brand, site or type of business? A good icon when you first look at it helps you remember the category of the site or identify brand affiliation. As an experiment, you can show the image to outsiders and ask what related thoughts they have.
Is it clear what exactly is shown in the favicon? Keep in mind that in a small picture it will be difficult to distinguish small details. Try to avoid too bright colors. They will distract attention from the content of the site.
The format of the favicon
Initially, pictures for the favicon created only in the format .ico. This format was used for bookmarks Microsoft Internet Explorer. Icons placed in the root directory of the site under the name favicon.ico.
The format. ico is convenient because it can specify several sizes of icons with different bit sizes. The drawback is that browsers do not always choose the correct image size and as a result, favicon is displayed in low resolution.
Later .ico was replaced by .png and .svg. They are well displayed and weigh less. The majority of modern platforms and operating systems support .png, and the format .svg is used in Safari MacOS.
Sometimes favicons are made in .jpeg and .gif formats. This is acceptable, but undesirable, because not all browsers support these formats. Firefox and Opera allow you to use animated “gifs”, but I do not recommend their use – moving pictures will distract the visitor’s attention when viewing the site and irritate the user when displayed among browser tabs.
How to place it on the site
To add a favicon on a site without CMS, you need:
- Insert between the tags … on the main page of the site a fragment of code with the address of the icon and the type of data being transmitted. You need to specify the path to the icon storage location – URL. Then the name of the file with the icon and the format to use – for example, favicon.png.
- If you have edited the page outside of hosting, upload the file of the page you are editing to the hosting, replacing the existing file, and save it. It’s more convenient to edit the file directly on the hosting by connecting to it with a code editor via FTP. For example, through Notepad++.
- In the root folder of the site (“public_html”; “html”; “site”; “www”) or in the folder with images upload the icon file. Use the file manager in the hosting control panel or a third-party FTP client.
Common errors
There are different reasons why a favicon does not appear. For example:
Page caching by the browser. To fix the problem, clear the browser cache and refresh the page. The key combination “CTRL + F5” will help to clear the cache while staying on the page.
Incorrect format or size of icon. Check the format compatibility and presence of all required attributes in your favicon code.
Incorrect code placement. Make sure that the icon code is placed in a block.
Too little time has passed. It might take from two weeks to two months for search engines to index a favicon.
Deny indexing of the icon in the robots.txt file. Allow indexing: correct Dissalow: favicon.ico to Allow: favicon.ico.
Inappropriate image. Make sure that the image does not contain any elements similar to illegal characters (offensive pictures, 18+ images).
Low quality or non-uniqueness of the favicon. Search engine sometimes ignores icons with low resolution or copied from other resources.
Search engine filters on the site. Indirect signs of filters: decline in attendance for no apparent reason, dropping out of the search for a large proportion of pages.