Favicons are small, impactful icons located on the left side of a browser tab, allowing users to maintain an overview of all open pages. These icons usually display a simplified logo or image that is easily linked to the corresponding web page, hence enhancing user guidance while browsing the internet.
The ideal favicon design depends on a brand’s unique characteristics. Given the limited size, it’s recommended to opt for simpler, less detailed logos. The value of a favicon is illustrated by the terms composing the word: “favorite” and “icon”. They are often referred to as “icon for favorites”, appearing in browser tabs, web page bookmarks, application icons, search menus, browser search results, and browsing histories.
The Importance of a Favicon
The favicon serves various key roles on a web page:
- Professionalism: A favicon signals a professional website, thereby instilling confidence in visitors about your brand. It shows that you pay attention to the smallest details, which doesn’t go unnoticed even by those unfamiliar with the term “favicon”.
- Identification: Favicons facilitate faster website identification, particularly when multiple tabs are open. They also aid brand recognition in app listings or search engines.
- Brand Strengthening: A well-designed favicon can boost your brand image, making it easier for users to recognize your brand and potentially influencing their decision-making process.
What size is recommended for a favicon?
It is recommended that all web pages include a favicon. In this way, it is easier to find the page you are looking for. In addition, you will help to make the website look more professional and you will make it work better from an SEO point of view. However, there are strict rules on how big a favicon should be. In most browsers the measurements 16 x 16 pixels or 32 x 32 pixels are required. While the 32 x 32 pixel favicon is recommended for high resolution displays, the 16 x 16 pixel favicon is often used for other purposes. Therefore, the simplest thing is to include both in the code.
Not all browsers require the same dimensions for the favicon. Therefore, in addition to favicons with 16 x 16 pixels or 32 x 32 pixels, other variants are recommended.
Favicon size for google
In addition to these two sizes for favicons presented, there are formats that are also useful and better to include, especially for Google. Search results on this platform are served with a favicon that should adhere to the dimensions of 48 x 48 pixels . As an alternative, you can opt for a multiple format of these dimensions. This favicon size is also important for Android, which uses favicons in this size for home screen shortcuts. For devices with a high screen resolution, the 192 x 192 pixel favicon is also useful.
Favicon size for Apple devices
In the case of Apple, the issue is complicated. The most appropriate favicon sizes vary depending on the end device it is displayed on. For the iPhone, the format 60 x 60 pixels is used, although a higher resolution can also be used, as long as it is a multiple of this value. This allows for optimal viewing at high resolution, which is scaled down for other purposes. Therefore, a 180 x 180 pixel image icon is a good choice. iPad icons, on the other hand, display at 83.5 x 83.5 pixels . For Retina and Super Retina displays, a favicon dimensions of 167 x 167 pixels is recommended.
The most important favicon sizes at a glance
Other exceptions apply for some browsers and devices. Older devices, in particular, theoretically require other dimensions for the correct browser icon size. Here is a list of the most common favicon dimensions:
| Browser or device | Size |
| Most modern browsers | 16 x 16 or 32 x 32 pixels |
| Google and Android | 48 x 48 or 192 x 192 pixels |
| iPhone (latest models) | 60 x 60 or 180 x 180 pixels |
| iPad (latest models) | 83.5 x 83.5 or 167 x 167 pixels |
| Chrome web store | 128 x 128 pixels |
| Google TV | 96 x 96 pixels |
| Internet Explorer 9 | 24 x 24 pixels |
| iPad home screen | 72 x 72 pixels |
| iPhone (older models) and iPod Touch | 57 x 57 pixels |
| iPhone 4 home screen | 114 x 114 pixels |
| Opera Speed Dialer | 195 x 195 pixels |
File extensions: what formats can a favicon have?
You can use various image formats for your favicon. However, it is the Windows image file format .ico, supported by many browsers, that is used most frequently. For its part, the .png format is recommended for larger graphics that can also function as tactile icons. Other formats are .svg or .gif .
Generator to create a favicon
Since there are several aspects to pay attention to when setting the right favicon size for your web page, the easiest thing to do is to use a generator. It will guide you through all the steps and check that the favicon is compatible with all major browsers. Finally, you can add the favicon in WordPress or put a favicon in HTML.
How to add a favicon with HTML
The safest way to include a favicon on your web page is to do it with HTML. To do this, upload it to the main directory of your domain. Discover step by step how to integrate this image icon on your website.
Step 1. First create the image icon in the correct format. Check that the image complies with the recommended favicon size, include if possible contrast in the colors used and check that it also works with a low resolution.
Step 2 . Upload the favicon to your domain’s home directory.
Step 3. Now in the head enter the following code.
However, this is only possible if the favicon is saved in .ico format . For .png, the code is as follows:
If you have created your favicon in .gif format, use this code:
Add a favicon without code
There is an easier way to insert a favicon in HTML. You won’t need to write any code, just create the file and give it the correct name. Once the favicon is created in the correct format, save it under the name favicon.ico in your domain’s home directory. This method only works if the given name is correct. All letters must be written in lowercase.
However, this way of proceeding carries with it two disadvantages: First, most browsers recognize this method, but not all. Second, this procedure requires that all subdomains created under the main domain are also displayed with this icon. Therefore, integrating the favicon through code has a greater guarantee of success.
Integrate favicons in responsive web pages
Including a favicon on your website offers you numerous advantages: it shows a more professional appearance, a unified design line and can be found more quickly. This little symbol is especially important for mobile devices such as smartphones or tablets, as it serves as a touch icon to save a web page on the home screen. For this, the device uses the saved image file. However, because there are differences between different providers, you must create several formats:
- An .ico file, especially needed for older browsers. In this case, the file name should be favicon.ico .
- A .png file for most modern browsers. It is called favicon.png .
- An Apple touch icon for Android Chrome and iOS Safari. This is in the format 128 x 128 pixels.
The easiest way to create a favicon is to use a suitable program for it.
Favicon Examples
To illustrate the versatility of favicons, consider these examples from Google, LinkedIn, and YouTube:
LinkedIn takes a different approach and serves as proof that the favicon doesn’t always need to include the first letter of the name. The white “in” on a blue background is powerful and well known.
YouTube shows how a good favicon can also work without including lyrics. The play button, which also belongs to the company logo, is unmistakable and stands out in any browser.
In the Digital Guide you can find numerous articles that will be of great help for your online project. In addition to the perfect style guide for websites, you can find information on how to add a favicon to WordPress, logo size and formatting, as well as other logo creation tips and tricks.
