A favicon is a recognizable element of the page. Let’s find out why the graphic logo is not displayed in browsers and online interfaces and how to deal with it.
What Does Web Browser Icon Missing Mean?
A favicon is a graphic image in the form of a small icon that appears next to the site name at the top of the browser, snippets, bookmarks, and in advertisements. The icon is stored in the search history, service interfaces, which facilitates user experience.
Almost all browsers, including IE, Chrome, Firefox, Safari, apply a favicon to indicate new tabs. When trying to re-enter the site, the image is loaded from the cache.
What triggers this issue?
Sometimes, despite the fact that the icon has been created and installed, it is distorted, remains invisible, or disappears altogether.
Common causes that lead to this error are:
- incorrect file format;
- wrong icon size;
- an error in the html code or URL;
- the URL of the logo changes frequently;
- the file is not indexed by Google;
- the file is on local hosting;
- Google considers the logo design unacceptable.
This is an incomplete list of causes. If you’re wondering why your site has lost its favicon, we advise you to study Google’s guidelines for developers: https://developers.google.com/search/docs/advanced/appearance/favicon-in-search.
How to check the issue?
The easiest way is to enter the URL of the site into the browser and see if the logo is displayed next to the site URL. You need to check this for different browsers and devices.
Analysis when site has no favicon is not enough to optimize your site for search engines!
Make a full audit to find out and fix your technical SEO in order to improve your SERP results.
Why is this important?
A missing icon is not as serious as a 404 error. But it requires attention as well.
Favicon URL is indexed by the search engine to be displayed next to the site name. A favicon increases the clickability of the page by improving brand awareness.
A recognizable favicon will help to easily identify the page, improve interaction with users, who will visit the website more often and stay on it longer. User experience is taken into account by search engines and has a positive impact on the ranking.
How to fix the issue?
The course of action will depend on the cause of the error. Determine it with the help of this article and Google guidelines.
Resetting the page or clearing the cache on your site or browser may be sufficient to fix the issue.
If that doesn’t work, try other options.
- Different graphic formats are used to create a favicon, but some of them are not supported by all browsers and their versions. In this case, it is recommended to use .ICO images.
- The logo size can be 16×16, 32×32, 48×48, 96×96, 144×144 pixels. However, keep in mind that the standards of each CMS are different, and they can change the size. For example, this is the case when you add a favicon through WordPress, Squarespace, Shopify, and Angular and React frameworks. The icon is added to them with the help of settings in the menu of the admin panel or special plugins.
- A new logo file is saved in the root directory of the website. Information about it, including the name and location of the file, is added to the <head> section of the page. If you place a favicon in <header> by mistake, it will be lost.
- Check the html code for errors. For a regular favicon in ICO format, it looks like this: <link rel=”icon” href=”favicon.ico” type=”image/x-icon” />; <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />.
- The address must be stable. If you often change it, it will not link to the site, and search engines will not be able to respond to it.
- If the search engine can’t index the image and link it to the site, remove the ban on indexing.
- Some browsers, including Google Chrome, require the file to be uploaded to the server.
- The image or its element can be similar or contain hatred symbols, elements of pornography, other inappropriate content. In this case, the search engine will replace it with the default image.