Table of contents
A favicon, also known as a shortcut icon, is a small square image displayed in a browser tab, in bookmarks, and also in Google search results. The favicon is usually displayed next to the page title and visually “confirms” the identity of the site.
The first web browser to introduce favicons was Microsoft Internet Explorer in 1999. Initially, the dimensions of the icon could only be 16 x 16 pixels, largely due to the low speed of the Internet connection in this era – even such a small picture increased the page loading time. Another aspect is the small size of the screens – large ones capable of handling high resolutions cost a little fortune back then, and the larger icon size could make the browser’s interface less useful and harm its UX.
Favicon – recommended image size and file format
Today, virtually all web browsers are able to scale the favicon image to a certain size, appropriate for a specific resolution or software. In combination with a CMS that supports favicon files management, it is usually enough to put a larger file on the server (even 512 x 512 in WordPress with some themes), and the software will do the rest. Most browsers and devices display a favicon of 16 x 16 pixels or its multiples – 32 x 32, 48 x 48 pixels and more.
The favicon file can be saved as PNG, GIF, or ICO file (will be displayed by all modern browsers), as well as JPG and SVG files (compatibility with all browsers except for Internet Explorer, which is unsupported). This means that the website icon can have transparent background (PNG file and ICO format) and even animations (GIF – however, the animated image will only be displayed in Firefox and Opera, unfortunately this option is currently not available e.g. in Google Chrome).
How to create a favicon?
In order to create a favicon image you just need an idea and any graphics app – even Paint, built into Windows by default, can do the job. You can also use the “favicon generator” apps , which will immediately generate an image with the appropriate parameters.
Please note that the image will usually be displayed in very small size – most likely 16 x 16 or 32 x 32. This means that the entire brand logo will probably not fit there. The key to a properly designed shortcut icon is to maintain maximum readability. Perhaps the first letter of the brand’s name will be suitable? A favicon should attract the attention of the recipient and of course be consistent with the visual identification of the brand – it is an integral element of the website that is able to influence the traffic on the website to some extent.
It is worth knowing that many people use non-default browser themes and dark mode or day / night mode. For this reason, choose a favicon that will look good with both light and dark backgrounds.
How to add a favicon to a website?
As I mentioned earlier, most websites based on popular CMSs allow you to easily add a favicon. WordPress only requires clicking Appearance -> Customize -> Site Icon, and then uploading the previously prepared file. For such an option to be possible, a theme must support wp_head () function – fortunately, this possibility is offered by virtually all modern templates.
If you want to set the favicon manually, put the following in the html code:
<link rel="icon" href="/file/directory/favicon.ico">Of course, instead of the above path, set the correct location of the favicon file for your website.
The other attributes are:
rel=”shortcut icon” – sets icon as a shortcut image;
<link rel="shortcut icon" href="/file/directory/favicon.ico">rel=”apple-touch-icon” – for display on mobile devices with Apple iOS;
<link rel="apple-touch-icon" href="/file/directory/favicon.ico">In a more advanced version, the html code may look like this example:
<link rel=”icon” href=”file/directory/favicon-32×32.png” sizes=”32×32″><link rel=”icon” href=”file/directory/favicon-192×192.png” sizes=”192×192″><link rel=”apple-touch-icon” href=”file/directory/favicon-180×180.png”><meta name=”msapplication-TileImage” content=”file/directory/favicon-270×270.png”>In this way, the favicon is displayed both in smaller and larger sizes, and also correctly on iPhones and iPads.
It is worth knowing that sometimes the website icon is blocked by the robots.txt file – the favicon is then displayed in the browser, but it will not be shown in the search results. This can be checked in the Google’s Robots.txt Tester. Detailed instructions on how to set the icon to go to SERPs (Search Engines Result Pages) can be found on the official Google website for developers.
Favicon and SEO
The site icon does not have a direct impact on the page’s position in search results. However, it can affect the SEO of the page, although it will do it a non-obvious way.
A favicon image essentially confirms a website’s identity, adds credibility to it, and helps build trust among your audience. At the same time, it attracts attention and encourages clicks, increasing organic traffic, and therefore gives the Google crawler a signal that the page is valuable to users.
Icons for sites and web sites
So it’s definitely worth setting a website icon – whether you do it with the control panel or html code, the favicon enriches the website and helps in building brand awareness. This is one of the hundreds of small elements that contribute to increasing website traffic, attracting new visitors and customers and improving your conversion rate.
