When you start surfing the internet, you probably get to that moment when you have a lot of tabs open. How do you know how to move between them and know exactly which page is open? Through the favicon! In this situation, only the logo of the individual websites is visible, which is called a favicon.
In Euroinnova we want to explain how to put a favicon in HTML, although we will also explain other ways. For example, you can let browsers automatically detect the favicon, Are you ready? Let's get started!
What is a favicon and why should you know about it?
As mentioned above, the favicon is the logo, you choose, which appears next to the meta title in your browser tab. In other words, it's telling the browser to display the image you specify in the HTML instead of displaying a blank space. This is interesting because people will remember your favicon, which generates authority for your brand.
Create a favicon is very simple, as there are many websites that allow you to generate your own in a matter of seconds. However, here you have to take into account other aspects such as the visual identity of your brand. Think that it is an element that the user will relate directly to your brand.
To delve more deeply into the favicon concept, before I explain how to put it in the HTML, let's talk about its functionalities.
What is a favicon for?
Here, we are going to show you a small list of reasons why you should take care of your favicon:
- Visual identity: is used to identify your brand at a glance, especially in those moments when users have many tabs open.
- Professionalism: Putting a favicon in the HTML indicates that you take extreme care with all the details of the website, which indicates an admirable level of professionalism.
- Ease of access: A favicon is also displayed in the bookmarks bar or in your browser's favourites. You should therefore take this into account so that you can be found quickly.
- Personalisation: your favicon can not only reflect your brand, but also the content of your website.
- Supported formats: In this respect, there is some flexibility because image formats such as PNG and GIF are supported.
- FEasy implementation: How do you put a favicon in HTML? We are going to answer this question for you.
How do you put a favicon in HTML?
At Euroinnova, we show you the step-by-step procedure to follow in order to implement a favicon in HTML. Let's go!
Create your favicon
As we have been saying, there are many options to generate your own favicon. In the end, it is a square image that must respect the following measurements: 16×16 pixels, 32×32 pixels or 48×48 pixels. It is important that you specify the size in the HTML, but the browser will ultimately choose the most appropriate size for the context.
The image format
The appropriate format for maximum compatibility is the .ico, but you can also use other formats such as .png o .gif. The important thing here is to check that both the format and the size are correct.
Upload the favicon to your server
This step is really simple. All you have to do is upload your favicon from the File Manager of your hosting. Prepare the image in .ico or .png format, for example, and upload it.
Put the favicon in the HTML
Once you have your favicon uploaded to your hosting, you have to go to the code of your web page. In the head section, you must add a new line:
<link rel=»icon» sizes=»16×16 32×32 48×48″ type=»image/png» href=»images/myicon.png» />
For the avoidance of doubt, we will explain the meaning of each attribute:
- rel=”icon”: with this tag we are telling it that it is the favicon of the website.
- sizes=”16×16 32×32 48×48″: here, as we know, we have to tell the website directly the size of our favicon.
- type=”image/png”: we tell our website that it is an image in .png format.
- href=”images/myicon.png”: at this point, we tell you the location of the favicon image file.
Save changes
Once save the changes to your HTML file, you will be able to open your web browser to see your favicon. If it does not appear, you may need to refresh your cache. Be very careful with this.
Are there special types of favicons?
Yes, an important thing to know is that there are two special types of non-standard icons in the Safari browser. They are apple-touch-icon for iOS devices and mask-icon for cases where browsing occurs via macOS.
Below, we show you how it would be put into HTML in both cases.
apple-touch-icon
<link rel=»apple-touch-icon» sizes=»180×180″ href=»images/myicon.png» />
mask-icon
Here we must take into account that the icon must be a monochrome SVG and must incorporate the colour attribute.
<link rel=»mask-icon» href=»images/myicon.svg» color=»#226DAA» />
Español 
English (UK) 
Français