Favicons - How and Why You Should Use Them
Learn why it's important to have Favicons on your website and discover how to easily install them.
A Favicon is a small icon that appears in the address bar and various other places to refer to a website. It is also known as a website icon, shortcut icon, app icon, or bookmark icon. It was initially designed to serve as a visual cue for bookmarks. Nowadays, it has become an essential part of a website's visual identity and branding, as it helps visitors easily recognize and remember the website.
The image below contains the favicons for some of the top most visited websites. How many can you recognize?
If you just want to check your favicons for correctness, enter your domain name here and run a free test.
Web developers can create a favicon by designing a small icon in a compatible image format such as PNG, ICO, or SVG and adding a link tag in the website's HTML header. By adding a favicon to a website, web developers can enhance the user experience and make the site more recognizable and memorable. This article will further explain exactly which icons you need, why you need them, and how to create and install them.
The Quick Answer (TL;DR)
If you just want the quick answer to what favicon image files you need, here it is. Add these four lines to the <head> section of every page of your website:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
Then put this into your site.webmanifest file:
{"icons":[
{"src":"/icon-192.png", "sizes":"192x192", "type":"image/png"},
{"src":"/icon-512.png", "sizes":"512x512", "type":"image/png"}
]}
Finally, upload the modified HTML, the site.webmanifest file and the 5 specified images to your website. After your icons are installed, be sure to validate your favicon using the ValidBot auditing tool.
Why is a Favicon is Important?
There are several reasons why your website should have a favicon:
- Brand Recognition: A favicon can be an extension of your brand and a part of your website's visual identity. By adding a favicon to your site, you can reinforce your brand and make it more recognizable to your visitors. You get an opportunity to display your logo for free in a variety of places, so why not? The more times your customers see your logo the more they will learn to recognize your brand.
- Trust: A favicon adds a small but impactful touch to your website's design, making it look more professional and polished. Without a favicon, the web browser will often display a blank document icon, making your website look less legitimate.
- User Experience: When users have multiple tabs open, a favicon can help them quickly find and identify your website, making it easier for them to navigate. If a user adds your website to the home screen of their mobile phone, an app icon will give them something nice and recognizable to click. Without this, the default icon will be an ugly placeholder.
- Bookmarking: By adding a favicon to your website, you make it easier for users to bookmark your site and recognize it in their bookmark list.
- Search Engine Optimization (SEO): Google and other search engines now display website favicons in the search results next to the title of the webpage. This can help your website stand out from other websites that don't have a favicon. There may also be a small signal to search engines to prioritize sites with favicons.
Where do Favicons Appear?
Initially, favicon were invented to enhance bookmarks, but over the years the favicon has started appearing in many more places.
- Address Bar
- Address Bar Autocomplete Drop-down List
- Favorites / Links Bar
- Bookmarks
- Tabs
- Search Engine Results
- Drag to Desktop
- iOS Home Screen Icon
- Android Home Screen Icon
- News Readers / Aggregators
- Microsoft Windows Tiles
The favicon.ico file
The favicon.ico file is a type of file that that can store multiple images of different sizes in a single container. Each icon is stored as a bitmap, which is a binary representation of the image's pixels. The data contains information about the image, such as its width, height, color depth, and offset within the file.
Storing multiple icons in a single file allows the browser to choose the best one to use depending on the user's device and browser settings. Common sizes for favicon.ico images include 16x16, 24x24, 32x32, 48x48, and 64x64 pixels, although other sizes can also be included.
After creating your favicon.ico file, you install it by uploading it to the root directory of your website (https://www.example.com/favicon.ico
). Browsers and other products and services may look for the file here automatically and won't necessarily load your webpage and check the headers to see if you put it into a non-standard location. This will also be the fallback for older legacy browsers such as Internet Explorer 10 and earlier (0.2% of users), Safari on iOS (2018 or earlier representing 0.3% of users), and Opera Mini for Android (1% of users).
After uploading this file to your website, you should also modify the HTML of your website to tell browsers where to find this file. You do this by adding the following line in the <head> section of each page of your website:
<link rel="icon" href="/favicon.ico" sizes="any">
The sizes="any" part is important to get some versions of Chrome to ignore it and load the more modern file formats instead. Even though the location of the favicon.ico is conventionally at the root level of the website, some older browser (ex: safari 14, chrome 94) don't know to look here, this is why you need the link tag in your HTML files.
SVG Shortcut Icon
This is the modern file format for providing a scalable icon for your website. The benefit of using a vector image format like SVG is that a single file can be used to create any size of icon that is needed. It can be scaled up and down with ease, without introducing ugly pixelated artifacts like you would see if you scaled a bitmap pixel based image.
The last time we checked, 76% of all browser sessions support SVG favicons and the number is growing. The main holdout is Safari on Mac and iOS and Apple will likely support SVG favicons soon.
Another great thing about having an SVG favicon is that a single file can support both light and dark version of the icon. This allows the icon to adapt to the user's display preferences. If the user prefers a dark theme, or has their device automatically transition from light to dark themes at night, then the SVG favicon will automatically adapt and give your site the best appearance.
The filename and location of the SVG favicon is flexible, so after creating and uploading the svg image, you need to tell the browser where to find it by placing a link tag in the <head> section of each webpage.
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Apple Touch Icon (apple-touch-icon.png)
Apple devices (iPads and iPhones) allow users to bookmark a website and add it to the home screen. When Apple added this ability they started looking for a file named "apple-touch-icon.png" at the root level of the website (https://www.example.com/apple-touch-icon.png
). A PNG image is a modern format for storing bitmap pixel based images. The recommended size for this image is 180x180 pixels. After creating the image and uploading it to your website, you will need to place the following link tag in the <head> section of each webpage.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
Although Apple invented this particular icon convention, they are not the only ones who use it. Firefox uses it in various locations, and some web services will look for it too.
Web App Manifest
A web app manifest file is a text file using the JSON format. It is used to make a "Progressive Web App" and provides information to the browser to enable it to install the website as an application. This includes the name of the app, various theme colors and display preferences as well as an array of icons that are used for various purposes. The manifest file should be uploaded to your website and a link added to the <head> section of each webpage to tell browsers where to find it. Here is an example:
<link rel="manifest" href="/site.webmanifest">
Here are the bare essentials of what you should put inside your manifest file. For a more in-depth description of every configurable option you can read the MDN documentation.
{
"name": "Example Website",
"short_name": "Example",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
The two different icons are used for different purposes. The 192x192 pixel PNG icon will be used as the icon that is displayed on the homescreen on Android devices. When that icon is tapped, the 512x512 pixel PNG icon will be used as the splash screen while the app is loading.
While the Web App Manifest file was invented by Google for use on Android devices, it has become well known enough that other products and services may look at the manifest file to find high resolution images of your website to use as a visual aid.
Other Sizes
Everything described above is what you need for web browsers, search engines, and other services to automatically find the proper icon for your website. You do not need any other icons defined in your HTML. However, while you're making everything, you might as well make some larger versions that you may find to be useful later. For example, a 1200x1200 pixel PNG image can be very handy to send to someone writing an article about your website and it is also a nice size to post on social media.
If you think you might create an iOS app that can be downloaded from the App Store, you will need a 1024x1024 pixel icon bundled with your application when you submit it to Apple for approval.
If you want to use your icon as your company's avatar or profile picture on social media, you can make the following customized sizes.
- Twitter and LinkedIn: 400x400
- Instagram: 320x320
- Facebook: 170x170
Check Your Icons
To verify that your favicons, shortcut icons and manifest files are set correctly, type your domain name into the box below and run a free ValidBot Test. Look in the "Common Files" section for your results. If you see any errors, you should fix them to ensure that your website is served using best practices and that you are doing everything that you can to present your brand in a good light.