- What is a favicon?
- A few reasons to add a favicon
- How to create a favicon
- Tools
- Some popular alternatives are:
- How to add a favicon
- WordPress
- Website Builder
- Another application or a custom website
- Check your favicon
- In conclusion
What is a favicon?
A favicon, which is short for a favorite icon, is the small image that you usually see in web browsers next to the title of a website. The first browser that supported it was Microsoft’s Internet Explorer 5, released in March 1999. Back then, the image was also known as a shortcut icon, a bookmark icon or a website icon. In the end of 1999, the favicon was standardized by the World Wide Web Consortium (W3C).
Today, you will see a favicon in multiple places – bookmarks, browser history, search engine results, or even as shortcuts on desktops and mobile devices. This is why, as small as this website element may seem, it is actually quite important. Let's take a look at a the reasons why you need to create a memorable favicon, and how to create and add it to your website.
Favicons used in browser history Favicons in Google Search results
A few reasons to add a favicon
- Brand Awareness. A favicon is usually a smaller version of a company logo or it is specifically designed image, which resemble the logo or the brand name. Sometimes a logo may not be suitable for the relatively small format of a favicon, which requires certain adaptations. If you see the Facebook or the BBC favicon, for example, you don’t need to see the tab title to know what website is loaded there. People will associate the favicon with your brand name, so they will recognize the brand and your company wherever they see them. To build your brand online you need to be consistent. Use your logo, or an adaptation of it for your favicon. Don't change its colors, shape or form.
- SEO. While having a favicon does not have a direct effect on your SEO, it can bring benefits to your site indirectly. If the site is bookmarked and users can find it easily, it will likely get more hits. As a result, it may get a small boost in search engine results as search engines tend to favor popular websites. In addition, browsers usually look for a favicon.ico image (if a different one is not defined) and if they don’t find one, they will display a “404 Not found” error in their console. Although this isn’t a big problem, such errors are not good for SEO. Having a favicon will help you to eliminate this problem.
- Credibility/Trust. If a website does not have a favicon, browsers will usually display a generic gray icon, like the one shown on the image. This can undermine people’s trust if they come across your site. First impression is important and the lack of a favicon shows that you don’t really pay attention to small details. Some people may go to a competitor’s website. In addition, if people have visited your website in the past and they know your logo/favicon, it is more likely that they will visit your site again if they see it in search engine results. If they trusted you once, they will do it again.
- Follow-up visits. Since a favicon appears in bookmarks, browser history and search engine results, it is more likely that people will visit your site again if they see a familiar favicon. As bookmarks and browser history usually include lots of entries and lots of them include either long links or long titles, it will be much easier for people to see and click on a familiar icon.
- Quick access to your website. A standard favicon appears in the browser history and bookmarks, but people may decide to add a shortcut to your website to their desktop or taskbar, or if they use a mobile device – right on their screen. If your site has no favicon, a default gray icon will appear. It is more likely for users to keep the shortcut if they see your favicon rather than a default noname icon.
How to create a favicon
The favicon is usually a smaller version of a company/brand logo, but sometimes it may not be possible to fit a standard logo, so you have to get creative. There are some things you have to consider when you create the favicon:
- Brand identity. A favicon should tell visitors your brand name or what your company/brand is about. If you can't fit the company logo, you should choose a favicon that best describes the services you offer.
- Abbreviations. An image may not be the best choice in some cases, so you can consider using a letter, an acronym or an abbreviation as a favicon. Try different options until you find the one you like the most.
- Colors. Choose contrasting colors so that your favicon stands out and is clearly visible. Depending on the web browser, the favicon will appear on black, brown or white background. In some cases, a different browser theme may set a different background color as well.
- Simplicity. A favicon is small, so you should keep it simple. If you try to fit too much content, the favicon will not be clearly visible and it will not serve its purpose.
- Size. A standard favicon is 16x16 pixels in size, but newer devices and browsers often require a larger one as well. Favicons usually appear in web browsers, but it is possible to add one on a desktop taskbar or even on a phone screen. This is why, you may have to add several different favicon sizes. If your site does not have a favicon and somebody wants to add it on their screen for faster access, they will see a default gray icon, which they are likely to remove. Here are the exact dimensions you have to use depending on the device you want to have a favicon for:
| Platform | Favicon dimensions |
| Desktop | 16 x 16 |
| 32 x 32 | |
| 48 x 48 | |
| Android | 36 x 36 (pixel density .75) |
| 48 x 48 (pixel density 1) | |
| 72 x 72 (pixel density 1.5) | |
| 96 x 96 (pixel density 2) | |
| 144 x 144 (pixel density 3) | |
| 192 x 192 (pixel density 4) | |
| Apple iPhone | 144 x 144 (Retina 6 and prior) |
| 120 x 120 (Retina 7) | |
| 57 x 57 (Non-retina 6 and prior) | |
| 60 x 60 (Non-retina 7) | |
| Apple iPad | 144 x 144 (Retina 6 and prior) |
| 152 x 152 (Retina 7) | |
| 72 x 72 (Non-retina 6 and prior) | |
| 76 x 76 (Non-retina 7) |
- Format. There are lots of image formats these days and you may come across different opinions what to use.
- ICO – this is the classic file format for favicons. An ICO file can contain one or a few images, each one with a different size and a different color depth. This format is recognized by all browsers and if two or more images with different formats are set as favicons, some browsers will prefer the .ico one.
- PNG – this format allows you to create small images with good quality, and supports а transparent background. You can easily create a PNG file with almost any application. The only downside is that Internet Explorer does not support displaying PNG files as favicons, but since the market share of this web browser is very low these days (2% - 5% depending on different sources), this is not something you should really worry about.
- GIF – supported by most browsers, the GIF format allows you to add an animated favicon, but this can be annoying to some users. Even if you like a small moving image, people will probably not appreciate it the same way you do.
- JPG, SVG – these formats are popular for standard images, but are not widely supported as favicons.
If you wonder what file format to use, we recommend either the classic ICO, or the widely supported PNG. The other formats may not be compatible with some browsers. You don’t need special software to create a favicon. Below, you will find a few online tools that you can use to create a favicon for your website.
Tools
All tools below are available online, so you don’t have to download and install anything. The first one is our Logo maker. The others are free tools that are provided by companies we are not affiliated with, so if you are interested, you can check them out.
Our Logo maker. This free tool is available in the ICDSoft Account panel. You don't need to be an ICDSoft client to use the Logo Maker - you can create a free account at https://accounts.icdsoft.com/register. Our Logo maker allows you to browse hundreds of different objects and pre-made projects, which you can as inspiration and customize. . Any image you create can be downloaded for free in PNG format, so you can use it as a favicon. High quality images and other formats are available after purchase.
Some popular alternatives are:
realfavicongenerator.net
www.favicon.cc
iconifier.net
favicon.io
How to add a favicon
WordPress
If you use the most popular content management system out there, you can usually add a favicon from the WordPress dashboard -> Appearance -> Customize. There, you will find a Site identity option where you can add a Site icon.
Some themes have a separate section with theme options, which you should check if you don’t see a way to add a favicon through the Customize section.
If you don’t see any way to add a favicon through the dashboard, you can add the code directly to the site header. The file to do that is located in your site directory /wp-content/themes/theme-name/header.php. If you are not very tech-savvy, you can install the Insert Headers and Footers plugin with a few clicks in the WordPress dashboard, and then copy and paste the code for your favicon using that plugin. You will find the line of code you need if you continue reading.
Website Builder
If you use the Website Builder that comes with free with all ICDSoft shared hosting plans, you can add a favicon if you go to Settings -> General Settings. You will see the option to select an image from the gallery or to upload a new one, and use it as a favicon. The ICDSoft Website Builder will automatically resize the image to the required size so that it is compatible with different devices and platforms.
Another application or a custom website
Some applications provide an easy option to add a favicon. If you use OpenCart or Prestashop, for example, you will find such an option in the site admin area. There, you will be able to edit the site settings and upload a favicon image.
If you use a custom-made website or a platform that doesn’t give you the option to add a favicon through a graphic interface, you can add the required code to the site header, or if there isn’t a single header file – to the section of any page where you would like to have the favicon. Here is the generic code you need, depending on the image type you use:
A standard ICO file:
<link rel="shortcut icon" href="https://example.com/favicon.ico">A PNG image:
<link rel="icon" type="image/png" href="https://example.com/favicon-16x16.png" sizes="16x16"> You can also specify different sizes for the favicon in case that you want to use it on multiple devices that have different requirements. You have to use the “sizes” attribute:
<link rel="icon" sizes="<16>X<16>,<32>X<32>"> When a link to a website is saved on an iOS device, the icon is saved on the Home screen. When you open a site using the Safari browser, it looks for an image called apple-touch-icon.png in the site root directory. If you want to use a different one, then you should use:
<link rel="apple-touch-icon" href="path-to-custom-image">If you want to specify a separate icon for different Apple devices, then you want to add the following:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> Check your favicon
After you add the favicon, you should test it. The easiest way to do that is to open your website. Clear the browser cache before that or use incognito mode (this is valid especially if you decide to change the favicon of your website). Note that favicons are heavily cached, and even clearing your browser's cache may not refresh the image. Sometimes, you may even need to use a new browser to see the change.
Check if the favicon appears in the browser tab. After that, bookmark the site and check if the favicon appears properly in the browser bookmarks and history.
You will find some useful online tools as well. Here are a couple of them:
realfavicongenerator.net/favicon_checker - check if your site has an icon for various devices and platforms
www.colinkeany.com/favicon-checker/ - preview your favicon in Google Chrome, Firefox and Safari
In conclusion
A favicon may be one of the smallest elements of a website, but it is quite an important one. Don't neglect this aspect of your web presence. It helps your brand, your SEO and your customer experience. People will see it every time they open your site, browse their history or bookmarks, or save a shortcut to your site on their desktop or mobile device. It takes a lot of small steps to make a website successful and setting up a proper favicon is one of them.
