The favicon is a small square image that represents a website in web browsers. If you take a look at the address bar of your browser right now, I’m sure you’ll see several favicons including SE Ranking’s one. Typically, favicons feature a logo, the first letter of the company name or simply an image that reflects the specifics of the website it represents.
Favicons help us quickly visually match every browser tab with a certain website. And if you‘re like me and tend to keep dozens of tabs open simultaneously—ultimately being unable to read their names—favicons are your best friends that make finding the website you need much easier.
From Internet Explorer to Google’s SERP
Back in 1999, the favicon was introduced in Internet Explorer as a way of helping searchers tell bookmarked web pages apart from others. And since bookmarked pages were (and probably still are) called “Favorites” in Internet Explorer, the words ‘favorite’ and ‘icon’ were blended together to create a new term.
1. Nowadays, favicons are displayed right above the address bar regardless of whether the website is bookmarked or not. And in the small chance that a website doesn’t have a favicon, the browser will display a generic browser symbol.
2. In addition to the address bar, favicons can also be found in the browser history.
3. Bookmarked pages will also come with a favicon, both in the Bookmarks bar…
4. …and under ‘Other Bookmarks’ as well.
5. Since May 2019, Google has been using favicons in the mobile SERP, plus the desktop SERP also got a new look at the start of 2020.
Favicons attract user attention and boost brand awareness. If users visit a website with a memorable favicon a couple of times, they will then easily distinguish it from others in the future. Think about a famous brand you interact with on a daily basis—like Facebook or Twitter—you should be able to easily picture its favicon with your eyes closed.
The favicons Facebook and Twitter have look exactly like their respective logos. So, does it mean that all you need for a favicon is to minimize your logo image and upload it onto your website? Let’s dive deep into all the technical details and talk about what it takes to create a favicon.
Meeting technical requirements
Now, if you want your favicons to show up properly on all sorts of devices—in good quality and with the picture that you have in mind—you need to follow favicon guidelines, standards, best practices, basically, all technical parameters.
But where do you need to start? Start by choosing the right favicon format and size.
Originally, all favicons were created as ICO files—a format developed by Microsoft to store Windows program icons. The biggest advantage of this format is that it can store images of different sizes in a single file.
In the past, Internet Explorer only supported this file format, but modern day web browsers let you use PNG icons as well with some browsers even supporting GIF, JPEG, and SVG favicons. The only exception here being earlier versions of Internet Explorer, such as 10 and lower—they are only compatible with ICO files.
Generally, ICO favicons are now considered a bit outdated and most websites today have favicons in the PNG format. The reason for this is image quality: High cross-browser and cross-platform compatibility PNG favicons look a lot better in most modern browsers and devices.
Favicons in the SVG, GIF, and JPEG file formats are not that great in terms of browser compatibility. However, this may change in the future. The SVG (Scalable Vector Images) format may become the new norm as using it will solve the problem of creating multiple favicons in different sizes to cater to every popular device. So, while only a few browsers currently support SVG favicons, others may very well catch up soon.
To learn which favicon formats are supported by different browsers, check out the Can I Use website. Here you can see, for example, which browser versions are compatible with PNG and SVG favicons.
The classic favicon is only 16х16 pixels in size. Some older browsers still use tiny squares, but if you want your favicon to look good on modern devices, you’ll have to also create favicon variations with a higher resolution. Depending on the OS type, you may need to use the following sizes:
So, what favicon size is preferable? Google recommends going with the largest possible resolution of 192×192. Recently, some webmasters received a letter from Google that encouraged them to use high-resolution favicons to get more clicks. At the moment, Google simply stretches existing low-resolution favicons when a bigger size is required—like for the Android home screen. As a result, all of the images look blurry and take away from the user experience.
So, if you don’t want to lose out on clicks, consider “upgrading” your site’s favicon. And here are some general guidelines you should stick to:
- Use a square icon.
- Favicon should represent only your brand and not contain inappropriate symbols (like swastikas) — otherwise Google will not show it and will use the generic favicon symbol instead.
- Favicon file should be accessible to Google crawlers.
Now, as size attribute was introduced in HTML5, you can as well easily specify several sizes of the same icon. The attribute allows you to set the width and the height of the favicon, and you can also specify several values separated by a space:
<link rel="icon" sizes="<16>X<16>"> <link rel="icon" sizes="<16>X<16>,<32>X<32>">The technical parameters of favicons largely depend on the devices or browsers that scan them. For this reason, there are hundreds of online services out there that can help you take all of the nuances into account and create favicons that are of the right format and size.
Turning to the web for help in creating a favicon
If you ever get the idea to simply change the name of your logo file to favicon.ico, forget about it because it doesn’t work like that. You will most likely get plenty of errors when it comes to displaying your favicon in different browsers.
Can this be avoided?
Sure. As a matter of fact, there are several ways of creating a website favicon, such as:
1) Create it in a graphical editor like Photoshop using a special plugin Favicon.ico.
Once you download the generated favicon, all that’s left is to add it to your site.
Decorating your site with a favicon
First, upload your favicon to the root catalog of the site using a file manager such as Filezilla. Then all you have to do is insert the following piece of code into the <head></head> meta tag:
<head> ... <link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon"> ... </head>
Alright, now that we’ve figured out all of the main technical aspects of favicons, let’s move on to what is considered appropriate in the design of favicons, and what should be completely erased from your memory.
Simple doesn’t mean worse in favicon design
Before you go running off to write down your next favicon idea, why not take a good look at the search results that come up for your target keywords? What do the favicons that they have look like?
And as you’ll be doing that, ask yourself these questions:
Does your favicon stand out from the crowd? Perhaps, your rivals sprinkle their favicons with color, and, to oppose that, you could go for a black and white favicon or even something conceptually different instead.
Can an animated GIF favicon help you be different? Or will it just be a total eyesore for searchers, creating an effect that will (most probably) make it seem as if your website hasn’t finished loading.
Do you clearly understand your favicon when it’s 16×16 pixels? Do your best not to have any small details in your favicon and do not attempt to include every imaginable color in it either.
Is your favicon representative of your niche and website? Sometimes, you can just look at a brand’s favicon and immediately understand the sort of business it’s in. Other times, you can even recognize the exact visual style of the brand and it’s website in the favicon.
Keep in mind that a great favicon will always be clear, simple and memorable.
Now that you know how to create a beautiful, memorable favicon and add it to your website, it’s time to figure out whether or not it will be correctly displayed in search engines. Let’s go in for a closer look!
Checking your favicon for critical errors
Simply Googling your website will allow you to quickly check how your favicon is displayed in search or you can use this link example to only pull up your site’s favicon:
There’s also another way of checking how the favicon looks on different devices: Using special online services, such as Realfavicongenerator.
However, if your favicon doesn’t show up correctly or at all on Google for any reason, start by checking the following things:
- Is the graphic image located in the resource’s root folder in the ICO, PNG or GIF file format?
- Is the code leading to the image on the resource’s pages written out correctly?
- Is the favicon clear and unique?
- Is a favicon file accessible to search crawlers?
I want to point out that the path to the image has a direct impact on how well the favicon is displayed. If you want to delete or edit your favicon in any way, all you have to do is delete or modify the favicon.ico file (JPEG, GIF, PNG).
Generally speaking, even if you do everything correctly on your part, keep in mind that it does take time for search engines to index favicons. In fact, there’s a whole dedicated bot that does nothing but this. What it actually does is it uploads website icons on its server, so it can take up to several weeks for your graphic image to get indexed.
Why you can’t do without a favicon
Favicons help websites stay afloat in the vast ocean of online resources, plus make them more attractive and professional in the eyes of the visitors.
If you need any help with yours, turn to our Website Audit for help. Among other things, it can run a full technical check-up for your website that includes finding your favicon.
If you’re sure that you have a favicon, but our Website Audit does not seem to see it, then there’s an indexing problem or the address of the website icon is incorrect. Go over everything again to make sure.
You know how they say that the devil’s in the details? Well, your favicon is a very small detail that can affect the public perception of your site and brand, their recognition and even the volume of traffic it gets from search, so don’t underestimate it.
To sum up, don’t mess around with your favicon as a good favicon is an integral part of your brand and the technical standard of your website. It’s definitely worth every second that you invest in it.