A favicon, sometimes affectionately called a "favicon," is a small square image displayed in browser tabs, bookmarks, and Google search results. A favicon is typically displayed next to a page's title and visually confirms a website's identity.
The first web browser to introduce favicons into its interface was Internet Explorer in 1999. Initially, icon dimensions could be as small as 16 x 16 pixels. This was largely due to the slow speeds of internet connections at the time – even such a small image increased page load times in an era that, from today's perspective, is almost "paleoinformatic." It's also important to remember small screen sizes – large, high-resolution monitors were expensive back then, and a larger icon size could disrupt the browser's interface and harm its user experience.
Favicon Icon – Recommended File Size and Format
Today, virtually all browsers can scale favicons to the appropriate size for specific resolutions or software. When paired with a CMS that supports favicon management, it's usually enough to upload a larger file (even 512 x 512 in WordPress with some themes) to the server, and the software will handle the rest. Most browsers and devices will display favicons at 16 x 16 or multiples thereof – 32 x 32, 48 x 48, and more.
A favicon file can be saved in PNG, GIF, or ICO format (all modern browsers will display it), as well as JPG and SVG (compatible with all browsers except the now-defunct Internet Explorer). This means the website icon can support transparency (PNG and ICO) and even animation (GIF – however, an animated image will only display in Firefox and Opera; unfortunately, this option is currently unavailable in browsers like Google Chrome).
(The rest of the article can be found below the form)
How to make a favicon?
Creating a favicon image requires only an idea and any graphics program – even Paint, which is built into Windows by default, can help in the simplest version. You can also use online programs like "favicon generators," which will instantly generate an image with the appropriate parameters.
It's worth keeping in mind that the image will usually be displayed at very small dimensions. This means the entire brand logo likely won't fit. The key to a properly designed shortcut icon is maintaining maximum readability. Perhaps just the logo or the first letter of the name will work? A favicon should attract the viewer's attention and, of course, align with the brand's visual identity – it's an integral element of the website that can, to some extent, influence website traffic.
It's worth noting that many users use non-default browser themes, as well as dark or day/night modes. Therefore, choose a favicon that will look good on both light and dark backgrounds.
How to add a favicon to your website?
As I mentioned earlier, most websites based on popular CMSs make uploading a favicon very easy . WordPress simply requires clicking Appearance -> Customize -> Site Icon and then uploading a previously prepared file. To enable this option, a theme that supports the wp_head() function is required – fortunately, virtually all modern templates offer this option.
If you want to set the favicon manually, place the following snippet in your HTML code:
<link rel="icon" href="/lokalizacja/pliku/favicon.ico">
Of course, instead of the above path, set the correct favicon file location for your website.
Other attributes are:
- rel=”shortcut icon” – will serve as the shortcut image;
<link rel="shortcut icon" href="/lokalizacja/pliku/favicon.ico">
- rel=”apple-touch-icon” – for display on Apple mobile devices.
<link rel="apple-touch-icon" href="/lokalizacja/pliku/favicon.ico">
In a more advanced version, the HTML code might look something like this:
This way, the favicon displays in both smaller and larger sizes, and also correctly on iPhones and iPads.
It's worth noting that sometimes a website's icon is blocked by the robots.txt file. The favicon will display in the browser, but it won't appear in search results. You can check this using Google's Robots.txt Tester. Detailed instructions on how to set the icon to appear in the SERPs (Search Engine Result Pages) can be found on the official Google developer website.
Favicon and SEO
A website icon doesn't directly impact a page's ranking in search results. However, it can impact a page's SEO , though it does so in a roundabout way.
A favicon essentially establishes a website's identity, adds credibility, and helps build trust with your audience. It also attracts attention and encourages clicks, increasing organic traffic and, therefore, signaling to Google's bot that the site is valuable to users.
Website Icons and Websites
So, it's definitely worth setting a website icon – whether you do it via the admin panel or HTML code, a favicon enhances your website and helps build brand awareness. It's one of hundreds of small elements that contribute to increasing website traffic, attracting new customers, and improving conversion rates.
Favicon FAQs
A favicon (short for favorite icon) is a small graphic icon that represents a website or online store. It most often appears in the browser's tab bar (right next to the page title), as well as in saved bookmarks, browsing history, and Google search results.
Its main purpose is to support the brand's visual identity (branding) and give the website a professional appearance. Furthermore, a favicon drastically improves user experience (UX) – it makes it easier to locate the right page when you have multiple tabs open in your browser and their text titles disappear.
Graphics should primarily be square (1:1 aspect ratio). The classic and most commonly displayed sizes are 16x16 or 32x32 pixels. However, modern CMS systems (such as WordPress) often require uploading an image at least 512x512 pixels in size, from which the system will automatically generate icons adapted to various devices and high-resolution screens (e.g., Retina).
Historically, the most popular file format was the .ico file extension. Today, lightweight .png files that support transparency and vector-based .svg files that scale perfectly without loss of quality are the standard.
A favicon should be as simple as possible, as at 16x16 pixels, fine details become completely invisible. Ideally, you should use the symbol from your company's main logo or the first letter of your brand name. You can create it in a graphics program or use free online favicon generators that will automatically crop and format your logo.
- In CMS systems (e.g. WordPress): Usually, you just need to go to the admin panel, select "Appearance" -> "Customize" -> "Site Identity" and upload the file there in the "Site Icon" field.
- In pure HTML code: You need to upload the graphic file to the server and then paste the appropriate link tag (e.g. ) in the page code section.
Summary
The above article covers the following topics:
- A favicon is a small square image that appears in browser tabs, bookmarks, and Google search results.
- Recommended dimensions are 16 x 16 or multiples up to 512 x 512. Supported formats include PNG, GIF, ICO, JPG, and SVG allowing transparency and animation.
- The key is maximum readability in small sizes, compliance with the brand's visual identity and good appearance on light and dark backgrounds.
- A favicon is added in WordPress via the Appearance, Customize, and Site Icon options. Manually adding it requires placing HTML code with the file location.
- A favicon does not directly impact your search engine ranking, but it does confirm your website's identity and attract attention.
