Favicon problems

What is a favicon?

Favicon is an icon that is shown in opened tab of some  page, next to document title (title tag) of that specific page.

Like you can see, from the image above this little icon can cause problems when you don’t add it, or add it, or change it, for several reasons:

• wordpress default icon can show up
• wrong icon format for specific device, or wrong format in general
• browser caching
• proper behavior on different  devices – manifest.json
• google caching

Although everything mentioned can seem logical from standpoint of someone who already tackled this problem, from the standpoint of someone who encounter this type of problem for the first time, it seems insurmountable. You can easily make a mistake, because there are actually a lot of hidden stuff behind this, that neither experienced web developers nor SEO experts doesn’t know that they exist. Because, the icon shows on their computer. But the problem is deeper, much deeper than just placing favicon.ico in document root, and truthfully I don’t understand why placing favicon is so much complicated than that.

Let’s move forward and go through listed issues to find out what we are dealing with …

WordPress default icon

What ever CMS(Content Management System) you prefer/use, if it follows some SEO trends, that CMS will cover what happens when something or someone searches for favicon.ico file on your website(for example https://example-website.com/favicon.ico) – you don’t want to show default 404 page – url not found.

Ah well, who now ask for that resource and why, you ask? Well, browsers are the first one, independently from html tags who can point to other favicon resources for better preview of your favicon, and also search engines(Google, Bing ..), by using their crawlers(small indexing scripts) – yup, favicons are shown in mobile search results. So if you haven’t placed favicon.ico in your website root, and you defined all needed html tags to show it on different devices, for example, you can see html tags  for favicon bellow:

<link rel="apple-touch-icon" sizes="180x180" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/favicon-16x16.png"/>
<link rel="manifest" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/manifest.json" crossorigin="use-credentials"/>
<link rel="mask-icon" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/safari-pinned-tab.svg" color="#ff4700"/>
<link rel="shortcut icon" href="//gsmsolutions.co.rs/favicon.ico"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-config" content="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/browserconfig.xml"/>
<meta name="theme-color" content="#ff4700"/>

all is lost, in SERPs, this won’t be shown – for example, in most popular CMS – wordpress, its default  icon will be shown – w-logo-blue-white-bg.png, and not your custom awesome icon, because you haven’t placed favicon.ico file in website root folder, so once crawler try to fetch it, wordpress conviniently redirect that request(302 temporary redirect), to its own default icon(w-logo-blue-white-bg.png), which will be shown next to your website results on mobile/tablet devices. Well, all is better than 404, so why not displaying their own logo, like in the image bellow:

Yeah, I’ve forgotten to add favicon.ico as well, although I’ve done everything else properly, and now I wait until google decide to refresh it, so I’ve got inspiration to write this article out of it, so you don’t make same mistake…

Except favicon.ico file, there  is also apple-touch-icon.png image with default dimensions – 180×180 pixels, which is used by apple devices.

Conclusion: if you reference images through html tags, from wherever you’ve placed them, or not, you must place two default images in you website root folder:

• one in ico format – favicon.ico (64×64 px)
• other one in png format – apple-touch-icon.png (180×180 px)
• and on top of that all, add other dimensions which you will reference using appropriate html tags and place them in the head section of your html page
• and on top of that, you need to add / reference files browserconfig.xml and manifest.json, and their examples you can find on our website, in head section(look source code of this page – head section)

Wrong icon format for specific device, or wrong format in general

File favicon.ico is something that is locked, file name locked, file extension – locked – ico format. Extension ico is abbreviation from icon and it needs to be square one, for example 64×64 pixels, larger than 16×16, and from your larger icon, google will create 16×16 and show that in search results. It’s enough just to place it in your website root folder, you don’t even need to reference it anywhere in the code, to show up in search results.

Browser caching

When you change your icon,  you need to clear browser cache, or visit your page through incognito tab. If you don’t clear browser cache, you’ll look your old icon for some time.

Proper behavior on different  devices – manifest.json

Like I’ve already stated above, there is a set of html tags which helps how favicon will be displayed on different devices, browsers, in google search box – autocomplete results, bookmarks, different operating systems etc. You can also style background color behind your icon even browser theme color (example how chrome app is colored on touch devices), as well as your website category – through manifest.json file and browserconfig.xml file.

You can also see examples of these two files in this page source, or if you don’t want to get into this that much, you could use some online tools to help you generate needed files and tags, ready for implementation – https://realfavicongenerator.net or for testing implemented icons on different devices – https://realfavicongenerator.net/favicon_checker. Just keep in mind, that no online tool isn’t perfect, you would need to tweak this a bit to fit your needs, and for a refference use our website.

Nobody forbids you to be creative, but still you are limited to use square, using raster vs vector, but you can still use some advantages of knows graphic formats:

• gif (if you want animated favicon)
• png (if you need alpha channel / transparency in your favicon)
• or standard – jpg

but still, you’re limited to a square with relative small dimensions.

Google cache

You change everything, you do everything properly, but you need to wait for a Google crawler to refresh results, based on your changes.

Could this be simpler?

I don’t know what happened, that changed from placing a favicon.ico in your website root to this, but it seems it has gone too far now. Even smallest implementation mistake, endangers how website/app will look on specific device. Developers aren’t even aware how much time and attention they need to provide to some small 16×16 image, which is shown next to document title, so favicon will be shown everywhere correctly.

I personally think that this should be a lot easier than this, and that this will even be more complicated as new devices appear. We’ll see. Good luck with favicons.