The Right Way to Use Favicons
A favicon is an icon that appears next to a page’s name on a browser tab. This icon is also displayed in a bookmark list and can be used as a desktop icon for web applications.
CORE
·
Join the DZone community and get the full member experience.
Join For FreeHow to Add a Favicon
To make an icon display, you need to add a file with a graphic image of the icon to a tab. To add an icon to your website, you need to follow the mandatory browser requirements and use a minimum set of favicons, which we will now consider in detail.
Why a set and not a single icon? The fact is that browsers and screens are constantly evolving. More modern formats are usually supported by more modern browsers. For example, you might think that you can add a single SVG icon and the browser will render it correctly. However, not all browsers still support the SVG format for favicons. The following table illustrates the browsers that support the SVG format.
Mandatory Favicon
All, both old and new, web servers and browsers support the .ico format.
To add an icon, add the following code to the <head>:
<head>
<link rel="icon" href="favicon.ico">
</head>Pay attention to two details: size and location.
Size. Most online sources claim that you need a 16×16 favicon.ico. This is true and not true at the same time. The fact is that the .ico container is dynamic and can be resized on the fly. Therefore, browsers that understand the 16x16 size will be able to reduce 32x32 to the required size. So, when do you need to create a 16x16 favicon.ico? Do this when a 32×32 favicon gets blurry when compressed. This can be checked manually by compressing your favicon from 32x32 to 16x16. If the picture has blurred, you need a designer who will draw the favicon manually in a graphics editor.
Location. The favicon.ico must be placed in the project root, as shown in the example above. The fact is that any web server is automatically looking for favicon.ico in the project root and tries to add it to the website.
Additional Required Favicons
Location. Only favicon.ico should be placed in the project root. The rest of the icons can be located anywhere in the project, for example:
project/
favicon.ico
img/
180.png
192.png
512.png
icon.svgOr you can group all favicons to separate them from other images in the project:
project/
favicon.ico
img/
favicons/
180.png
192.png
512.png
icon.svgSVG
If a modern web browser knows how to work with vector favicons, this format is preferable: lighter weight, best quality, supports changing themes, and there is no need to specify the size.
The process of adding is the same as for favicon.ico. You just need to add type so that the browser can understand what it is dealing with:
<head>
<link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
</head>For Apple Devices
Apple chose a different development scenario and offered their favicon sizes for iPhone and iPad. Apple favicons are supported by all modern browsers.
The most popular favicon size for old devices is 180×180. Let’s provide an example:
<head>
<link rel="apple-touch-icon" href="images/favicons/apple.png">
</head>By adding this icon, we will also support the old devices that cannot work with a large size and reduce it to the required size.
Apple devices can work with large icons. But for those devices that understand large sizes, we can use a manifest. The manifest will hide all the sizes included in the <head>, thus making the markup more readable.
Manifest
A manifest is a JSON file that tells the browser all the details of a web application. The format was developed by Google and promoted by the PWA.
To add favicons using the manifest, you need to add the manifest, in which you should specify all the icons and their sizes that you want to add to the website.
File. Let’s create a file in the project root and name it manifest.webmanifest. The .webmanifest extension must be specified so that the browser can understand what file it is dealing with. You can choose any file name you like (in our case, it is manifest).
Since the manifest is a JSON file, it must start with an opening bracket {and end with a closing bracket}.
manifest.webmanifest
{
}Inside the brackets, you need to create an icon section. The icon section expects several icons, so let’s add the [] array:
manifest.webmanifest
{
"icons": []
}It only remains to add favicons according to the template:
manifest.webmanifest
{
"icons": [
{ "src": "", "type": "", "sizes": "" }
]
}If there are several icons, they should be separated by commas:
manifest.webmanifest
{
"icons": [
{ "src": "", "type": "", "sizes": "" },
{ "src": "", "type": "", "sizes": "" },
{ "src": "", "type": "", "sizes": "" }
]
}Size. In the manifest, we will specify the sizes 192x192 and 512x512. We will use192 since this is the next size after 180, and 512 – since this is a very large size for a favicon, it will be enough. What about intermediate values? Everything is fine: in the same way as before, the browser will compress the image to the desired size. For example, from 512 to 256.
manifest.webmanifest
{
"icons": [
{ "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
]
}Settings:
- src – path to the icon;
- type – icon type;
- sizes – icon size.
Additional icon sizes can be added if your project browser support requires this. For example, you need a 256x256 icon. Let’s add it:
manifest.webmanifest
{
"icons": [
{ "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" },
{ "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
]
}Where to Get Favicons and How to Create Them
Layout designers are responsible for favicons. Web designers in most cases do not know about favicons, so they do not provide them with layouts.
If a web designer does not provide favicons, a layout designer has two options:
Not to add favicons to the project.
Ask the designer to draw a favicon (better in a vector format). Tell him that an icon in a square is needed. The icon can be round or even oval, but the image must be inserted in a square with a 1:1 ratio.
The vector format will allow you to stretch the favicon to the desired size (192, 256, and even 512) without losing quality. Thus, the layout designer will be able to generate the desired size and add it to the page.
When using third-party services for generating favicons, always check the result. Most often, icons are blurry. Even if we take a good 512×512 icon, artifacts may still appear when it is reduced to 32×32.
To generate a favicon, use the favicon-generator service: export the favicon image in PNG format, add this image to the favicon generator, click Create favicon, and then follow the link Download the generated favicon. You will download an archive with all possible favicon options. Take the favicon.ico and other required versions and add them to the project page.
Conclusion
The final way to add a favicon is:
<link rel="icon" href="favicon.ico">
<link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="images/favicons/apple.png">
<link rel="manifest" href="manifest.webmanifest">manifest.webmanifest
{
"icons": [
{ "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
]
}This method will help us support the oldest browsers and the newest ones.
It’s okay that the list of one favicon is that long – 4 points. First, the browser uploads favicons asynchronously, and second, it will first check the entire list of favicons and upload the most suitable one.
Opinions expressed by DZone contributors are their own.
Comments