Favicons, guide to the site’s thumbnail images
By now we are used to seeing them appear in browser tabs and also in Google SERPs, where they have a prominent place in the classic preview snippet, appearing next to the name of the positioned site: we are talking about favicons, the small images representative of the site that help the brand communicate better with users and become a little more visible and memorable. Provided, of course, that we do not make mistakes and correctly perform all the steps to add a favicon to our site, as also required by Google’s new guidelines on the subject.
What is a favicon
The term favicon comes from the contraction of the English words favorite icon and therefore literally means favorite icon: it is precisely the thumbnail icon associated with a site or a specific web page, and it is usually a small image or logo that should be relevant to the content of the related website, helping to reinforce brand consistency.
Sometimes, it is also referred to as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, and can be created and added directly by web designers, site managers or owners, or inposted through specific software.
Many recent user programs (such as browsers and newsreaders) use them and display them as a visual reminder of Web site identity in the address bar or tabs.
Favicons, a history spanning more than 20 years
Favicons were first introduced in 1999 by Microsoft, which integrated them into Internet Explorer 5: at that time, they could be loaded onto sites from computer files called favicon.ico, which had to be placed in the site’s root folder. When a user added the address to Internet Explorer’s favorites, the browser would add and display the favicon next to the URL.
This also allowed the site to find out the number of visitors who had added the page to bookmarks, estimated by the amount of requests for the favicon. Today this “side effect” no longer works, since all modern browsers load the favicon file to be displayed in the Web address bar, regardless of whether or not the site is added to bookmarks.
File and format evolutions
The standard format of favicons was regulated in the same year by World Wide Web Consortium in the HTML 4.01 specification, and already in the following months updated to the XHTML 1.0 specification: for the format definition, a “link type element” with a “Rel attribute” must be included in the HEAD tag of the document, of the name and path of the favicon, and the file can be hosted in a folder of an external website and have an image file format (and not . ico mandatory); it is therefore also possible to store a favicon in file formats such as GIF, PNG, JPEG, APNG and SVG of any size, and by taking advantage of the peculiarities and potential of the .gif format it is possible to create animated favicons (which, however, are only supported by some browsers).
The characteristics of favicons
In classic dimensions, the favicon is thus a graphic icon in ICO files of square sizes (initially 16×16, later increasing in size), with color or transparent support in 16 or 24 bits, and from being only present in Internet Explorer favorites the favicon has made its way over the past 20+ years to other browsers as well, extending its use and presence in step with technological evolutions. Today favicons appear in every browsing tab, usually on the left-hand side, and are often the only visible sign of the site when multiple tabs are opened simultaneously on a single window.
The usefulness of favicons
Thus, favicon icons are a business card for a site, and therefore one should devote special care to their creation, trying to respect the style and visual appearance of one’s brand and the site with which it is associated, of which it becomes an ambassador. More: the favicon must be relevant and clear, that is, have relevance to the proposed content or services offered and make it immediately clear to the user what is the message it is intended to communicate.
How to add favicons to your site
In a nutshell, favicons are small graphic signals that can help improve people’s user experience, because they make search faster and more visual (in bookmarks, but also in SERPs) and allow you to find the URL you need at the right time among all the other bookmarks pinned.
The simplest and most common way to add a favicon to a site is to use the appropriate HTML “rel” tag, placed in the head section of an HTML file, to specify the location of the file within the web server.
So the basic syntax is: <link rel=”icon” href=”http://[path]/favicon.ico” />
which becomes <link rel=”icon” href=”http://[path]/favicon.gif” type=”image/gif” /> if we choose the .gif format
and <link rel=”icon” href=”http://[path]/favicon.png” type=”image/png” /> if we adopt the .png format instead.
More precisely, also referring to Google‘s guidance, the correct method to identify a favicon is to add a tag to the header of the home page with the syntax
<link rel=”icon” href=”/path/to/favicon.ico”>
When we load a favicon for the first time or when we replace the previous one we may need to clear the cache to display it in the browser, because sometimes simply reloading the page is not enough.
Favicons and Google: guidelines for adding the image correctly
The latest favicon landing is among Google’s search results from both mobile and desktop (with final announcement coming on March 8, 2023, as seen in the tweet below).
Favicons and site names are coming to desktop! You can learn more about how to provide site names and define favicons in search results here:https://t.co/AGkfEeIbIs https://t.co/E7PxSacIIx https://t.co/WBHGf12Xkw
— Google Search Central (@googlesearchc) March 8, 2023
Today, the icons have also gained more space in SERPs than originally planned-and are now enclosed within a gray circle, which gives greater prominence to the logo colors.
In recent weeks, the Mountain View team has also been updating its icon optimization guidelines and tips, specifying the correct syntax to use to make a site’s favicon suitable for SERPs and clarifying some dubious aspects.
The rules to follow to ensure that our site’s favicon can actually appear in SERPs are simply six, including technical guidance and other more theoretical suggestions, but in any case “there is no guarantee that the favicon will show up in search results” even if we meet all the parameters, Google explains.
- Google Search supports only one favicon per site, where the site is defined by the host name. So if we have two different hosts (such as https://www.example.com/ and https://code.example.com/) we can set two different favicons, while a subdirectory of a site (such as https://www.example.com/sub-site) can only use the favicon set for https://www.example.com/, which will be applied to the site and its subdirectories, as the explanatory image below makes clear.
- The favicon file and home page must be scanned by Google, i.e., Googlebot’s work must not be blocked.
- The favicon URL must be stable (so we must not change the URL frequently).
- The favicon must be multiple sizes of 48 px square; all valid favicon formats are supported, and SVG files do not have a specific size.
- The favicon is designed as a visual representation of the website brand and allows users to quickly identify it when scrolling through search results.
- Google clearly specifies that it will not display and will ban icons that it considers inappropriate, such as those with images of pornography or symbols that incite hatred (a field into which swastikas, for example, fall): if the system identifies a favicon with “such an image, Google will replace it with a default icon.”
From a technical point of view, Google extracts information about the favicon based on the following attributes of the link element:
- rel should be set to one of the possible available strings, namely icon / apple-touch-icon / apple-touch-icon-precomposed / shortcut icon.
- href should be set by indicating a relative ( /smile.ico) or absolute ( https://example.com/smile.ico) path as the favicon URL.
Also, compared to what was stated (and required) earlier, in the latest formulation dating back to October 2023 Google removed the hosting location requirement from the favicon documentation. In other words, it is no longer mandatory to host the favicon in the same domain as the homepage of the site to make the image eligible to appear in Google search results.
How favicon scanning works
Also through October 2023, we knew that Google had developed and activated a special user agent for downloading website-defined favicons, which is simply called Google Favicon: it is a low-volume crawler that, from time to time, “may visit the site’s home page based on indicators collected during indexing or triggered by a user’s request,” reports the documentation.
Another specification: in order for the user agent Google Favicon to crawl the page, we could request that the home page of the site be indexed, knowing that it may take a few days or a longer period for updates to appear in search results. If it was the user who requested the crawl, Google Favicon ignored the rules in the robots.txt file.
In the latest update, however, this reference has been completely removed, and Google has clarified that for the favicon to be indexed, it is necessary to allow the two respective user agents Googlebot-Image and Googlebot to scan the favicon file and the home page of the site. Thus, the search engine no longer uses the Google Favicon HTTP user agent, but this does not and has not resulted in any changes for site owners: Google Favicon was in fact dependent on the Googlebot-Image and Googlebot user agent tokens, which remain regularly supported.
Favicons in Search: issues and icon penalization
About limitations in the display of favicons we can refer to what Barry Schwartz reported on Search Engine Land, in 2019, the year Google definitely added icons to SERP snippets. In fact, the well-known expert recounted two very particular cases of penalties applied by Google for completely different reasons: the first concerns the American Nazi party, which had a swastika as its default favicon, which Google replaced with a generic image (a grayish globe) after appropriate verifications.
More peculiar was the situation that Bill Hartzer, one of the most famous voices in the international SEO community, found himself in: the favicon on his site was simply a graphic rendering of the Ad letters, which closely resembled the Google Ads graphic in SERPs. Again, Google verified the situation and removed the icon deemed not to meet its guidelines.
Both penalties, however, had no effect in terms of the site’s ranking or placement in Google Search, and so the manual action only concerns the removal of the custom favicon from search results.
For the record, today Bill Hartzer set up another favicon, inspired by his initials, while the American Nazy Party site continues to appear in SERPs with the neutral favicon because, as we can see by analyzing the source code of its home page, it still keeps the swastika image as its icon…
