September 29, 2020
3 min read
A favicon is a small icon, usually 16×16 pixels, that appears on the browser’s address bar, bookmark list, history archives, and search engine results pages (SERP). It is mainly used for branding purposes and helping users to identify your website.
Because of this, many companies and organizations use their logo or its simplified version as favicons.
Modern browsers support many file formats for favicons, though ICO and PNG files are more commonly used than the others.
Favicons are useful in different ways:
The procedure of changing or adding a favicon to a website may vary depending on the site’s platform or nature. The following tutorials show the steps to doing so in Zyro and manually via HTML.
If you upload more than one favicon, you need to specify which one you want to use on the HTML code. This way, the browser can display the right icon.
Input the following code between the <head></head> tags of your HTML document:
|<link rel=”shortcut icon” href=”favicon-path/favicon.ico” type=”image/x-icon” />|
The favicon-path refers to the location of the favicon file, while the favicon.ico indicates the file name.
For example, if you uploaded the file to your root directory under the name favicon.ico, this is how the code will look:
|<link rel=”shortcut icon” href=”/home/username/public_html/favicon.ico” type=”image/x-icon” />|
A favicon can be created using any photo editing software and then saved as a PNG file. If you need it in ICO format, you can convert the file using a favicon generator or a conversion tool.
Favicons are usually 16×16 pixels in size and ICO format. The reason is that you can contain favicons of different sizes in one ICO file.
That way, if some browsers require a higher resolution icon, the favicon will not be blown out or pixelated.
The file usually contains 32×32, 48×48, 64×64, and 128×128 icon sizes.