A web resource icon, an icon, a favicon and even a favicon – as soon as they do not call a compact image that acts as a mini-logo of the site.
This is a small icon thatevery open browser tab. It is the favicons that help us quickly understand which site is on each tab – especially when there are so many of them that it is impossible to read the name.
In this article, we decided to figure out why you need favicons, where you can see them, what you need to create a favicon, and what format is best to use.
As you may have guessed, the favicon is not as simple as it seems at first glance. This is not just a small image that “decorates” your site, but an important part of its identity, branding and usability.
What is a favicon and where is it used
Favicon (favicon) is literally translated from English. Favorite Icon (FAVoritesICON). This is the name of the bookmarks in the Internet Explorer browser, where for the first time visual icons began to be used to quickly find the desired site.
Usually, a favicon for a website contains a logo, the first letter of the company name, or any other image that matches the specifics of the business. The main thing is that these elements fit organically into the square shape.
Where can you see the favicon?
- On open tabs in front of the site name. If you haven’t downloaded the favicon, your site will have a standard black and white planet icon.
- In the browser’s browsing history.
- On the bookmarks bar.
- In favorites, where you save all the interesting pages.
- In Search desktop and mobile results – both in organic and in advertisements.
- In Google mobile and desktop search results. Favicons appeared on mobile screens back in the spring of 2019, but in desktop results – literally in the first weeks of 2020.
Wherever you see favicons, they draw attention to themselves, help to remember the brand and distinguish it from others, increase company awareness and create the effect of a full-fledged business. You will not confuse favicons of your favorite brands with any others.
How do you create your own favicon for your website? Can you just shrink the existing brand logo and upload it to the site? What size favicon should I use? Let’s figure it out.
Brief technical instructions for favicons
It is necessary to observe the technical parameters of favicons in order for the site icons to be displayed on any devices – in good quality and with the picture that you intended. And you need to start by choosing the right format and size.
The most famous, albeit outdated, favicon format is ICO. Its main advantage is that one file can store several options for the size of the favicon.
Previously, Internet Explorer only supported this format, but today almost all famous browsers recognize icons in PNG, some in GIF, JPEG, SVG. The exception is Internet Explorer 10 and earlier versions of the browser, which only accept ICO files.
Today ICO is considered a bit outdated format, most often PNG is preferred. Why this particular format? The answer is simple – to keep the favicon high quality under any circumstances (browsers and devices). PNG is supported and displayed correctly by almost all modern browsers.
Favicons in SVG, GIF, JPEG format have problems precisely in the absence of such widespread support. But I still want to say a few words in defense of the SVG format – icons in SVG are scaled without loss of quality, which in the future may be an excellent solution to all problems with displaying favicons. It is up to the browsers, which have already gradually begun to implement support for this free vector graphics format.
You can find out which favicon formats are supported by different browsers using the Can I Use online service. For example, you will be able to see which browsers support or do not support PNG and SVG favicons.
favicon formats Favicon
classic favicon size is 16×16 pixels. Therefore, you should definitely check how your icon looks at such a small resolution.
Other sizes that are commonly used for a favicon, depending on the type and operating system of the device:
Not so long ago, some webmasters received an email from Google recommending increasing the favicon resolution to 192×192.
letter from google
The letter said that better favicons can bring 2 times more clicks on new tabs in Chrome and on the Android home page. Agree, they are unlikely to want to click on a vague favicon, which means that a low resolution icon is not an option for a good user experience.
A few general rules to follow:
Use a square site icon.
Do not use a favicon of someone else’s company or of an unacceptable nature (for example, a swastika) – otherwise the search engine will display a default picture – a colorless planet.
The favicon must be crawlable by search robots.
Five years ago, with the release of HTML5, the sizes attribute was introduced to make working with favicons a lot easier. This attribute must be specified in the format width x height without units (if there are several, use a space). For example:
Technical parameters favicons largely depend on the devices or browsers that will read them. That is why there are many online services that help to take into account all the nuances and create site icons in the right formats and sizes.
How to make a favicon online
If you have the thought to just rename your logo file to favicon.ico, forget it – it doesn’t work that way. You will most likely expect errors when displaying a favicon in different browsers.
How to avoid this?
There are several ways to create a favicon for a website:
- Make it in a graphics editor, for example, in Photoshop using a special plug-in Favicon.ico.
- Draw a favicon in special online services (for example, Katvin or favicon.cc) and then download it from there in a suitable format.
create a favicon
- Use the image you have (for example, your logo) and upload it to the online favicon generator – for example, Favicon.by, Realfavicongenerator.net, etc.
- Download ready-made favicons for the site from special banks of icons – for example, Findicons gallery. This assembly contains over 500 thousand icons. Another option is IconJ with 18 thousand favicons.
When you download the generated favicon, all that remains is to add it to your site.
How to add a favicon to your site
First, upload the finished favicon to the root directory of your site using a file manager such as Filezilla.
After that, you just need to insert the following code into the meta tag:
With basic technical We figured out the moments of favicons, and now let’s move on to what is considered appropriate in the design of favicons, and what should be forgotten.
Favicon design – when simpler doesn’t mean worse
Before you start coming up with ideas for your favicon, take a look at the search results for your key queries and see which favicons are already presented there. And try to answer yourself these questions:
Will your favicon stand out from the competition? Perhaps if your competitors have colored icons, you can use black and white or consider an image that is conceptually different from others.
If you want to use a gif moving favicon, will it differentiate you from other icons? Or it will simply distract and even annoy users, creating the effect of an incompletely loaded site (which is more likely).
Can you clearly say in size 16 * 16 what is depicted on the favicon? Try to keep your favicon free of small details, clearly distinguishable, and full of rainbow colors.
Is your favicon associated with your industry and your website design? One favicon on the bookmark bar can be used to remember which niche this site is from, and sometimes which site it is from, if the favicon preserves the visual style of the brand.
Three pillars of a good favicon – it should be clear, simple and memorable.
Now that you know how to create a beautiful favicon and add it to your site, will it show up in search engines? Let’s check!
How to check a favicon and fix basic errors
To quickly check how a favicon is displayed in major search engines, you can simply Google your resource. Or use the following links, substituting your website address in them:
Yandex – https://favicon.yandex.net/favicon/mysite.ru
Google – https://www.google.com/s2/favicons?domain=mysite.en
Common crawlThere is another option for checking the favicon on different devices – using special services, for example, Realfavicongenerator.
If your favicon is not displayed in Yandex or Google, start by checking the following points:
Is the graphic image in ico, png or gif format located in the root of the resource?
Is the code leading to the image on the resource pages spelled out correctly?
Is the icon blurry and unique?
Is the favicon file available for crawling by crawlers?
Please note that its display directly depends on the path to the image. If you want to remove or change the favicon, you just need to delete or change the favicon.ico file (jpeg, gif, png).
There may be some nuances with the display of favicons in Yandex. For example, Yandex does not display icons on all pages in search results. If the site is below the 10-15 position, then there will be no image next to the link.
In general, if everything is done correctly on your part, keep in mind that indexing favicons in search engines takes time. This is done by a separate robot that uploads icons to its server, so the indexing of a graphic image can take several weeks.
Why every site
needs a favicon Favicons help web resources not to get lost in a huge number of other sites and make them more attractive and professional in the eyes of visitors.
Our “Site Analysis” tool, which conducts a full technical inspection of your resource, including checks for the presence of a favicon. You can analyze your site simply by registering an account with SE Ranking.
check favicon in audit
If there is a favicon, but the audit does not see it, then there is a problem with indexing or the address of the icon. Check everything again.
Our English-speaking colleagues say: “The devil is in the little things.” And the favicon is the very small detail that can influence the perception of your site and brand, their recognition and even the number of clicks from search.
A good favicon is an integral part of the brand and technical standard of every site, and is definitely worth the time spent on it.