Zyro encyclopedia
Learn about online business
What is a favicon?
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.
Why are favicons useful?
Favicons are useful in different ways:
- Branding ‒ makes a website more memorable and stands out from the rest
- Visual marker ‒ helps users who work with multiple tabs to find the one they are looking for much faster
- Legitimacy ‒ boosts a website’s credibility
- Retention ‒ makes a website more visible on various platforms
How to change your website’s favicon
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.
In Zyro
- In the editor page, click Settings on the top bar, then head to General Settings.
- There, you will find a drop-down menu labeled Favicon. Upload the desired icon by clicking on Browse Files. The supported formats include ICO, PNG, GIF, JPEG, and SVG.
- Keep in mind that only paid plan accounts are able to change their website’s favicon.
Manually via HTML
- Head to the root directory of your website via File Manager or an FTP client.
- Upload the favicon file to that directory. It will automatically appear on your site.
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” /> |
How to create a favicon?
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.
What size should a favicon be?
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.
