The favicon is the icon or symbol that will accompany your URL in browsers. The main function of this small image is to help you more easily identify a certain URL.
It will depend on the device or browser you use, but as a general rule it appears in the browser tabs, in the navigation bar, in the history or in the bookmarks and favorites sections.
How does a favicon have to be?
- Easily identifiable: use a reduced version of your logo, the colors of your corporate image or any other element associated with your website or brand.
- Simplicity: do not complicate yourself with the design. The reduced size of the image does not allow to put long texts or complex elements
- Eye-catching: choose a color that stands out in browsers and, if possible, differentiates you from your competitors.
Format and characteristics of the favicon
The format and dimensions of the image needed to create a favicon will vary depending on the browser. At a general level, the accepted image formats are: .ico, .png, .jpg, .gif and .svg.
To make your website stand out with a custom favicon, create an icon file -icon files- with a dimension of 16 x 16 pixels.
If you want higher quality and resolution, you can also use formats up to 18 x 18 pixels.
How to include the favicon on your website
After creating the icon file in .ico format, you have to add it to your website. To do this, save the icon in the main directory of your domain with the file name “favicon.ico”.
Additionally, you will need to put a reference to the file in your site code. In the href attribute, you must specify the file path and the name of the logo.
Adding your mini logo to your website is very easy.
Edit the section and add the following lines to the HTML code
If it is in .ico format, add the following line:
<link rel=”icon” type=”image/vnd.microsoft.icon”href=”Path/filename.ico”>
Additionally you can specify one or more sizes for your favicon by adding the <sizes> value. For example:
<link rel=”icon” type=”image/png” href=”path/icon_32.png” sizes=”32×32″>
In this way the browser will choose the one that best fits in each case.