How to add a favicon in HTML

If you want to add a favicon using HTML, you have two options. The easiest way is to reference the favicon via an HTML element. You can also opt to use a method that doesn’t require any coding. If you still need to create a design, simply use a favicon generator.

A favicon (a combination of ‘favourite’ and ‘icon’) is a small image used in browser tabs. See the capital ‘I’ on the blue background of this tab, that’s the favicon for IONOS. This little design not only helps users recognise websites when looking at the tab, it also functions as an orientation marker when users navigate toolbars, favourites lists, app lists and search engine results. You can find everything you need to know about favicons in our article ’What is a favicon?’.

Before you can add a favicon in HTML, you’ll first need to create it. In the article mentioned above, you can find some important tips on how to do so. You need to ensure that the design works at both low and high resolutions and that it is instantly recognisable as part of your brand. The most common resolutions that work on most browsers are 16 x 16 and 32 x 32 pixels. Also make sure to save your design in the .ico, .gif or .png format. The easiest way to create a design is to use a favicon generator for HTML.

The best way to set your favicon is to upload it to your domain’s root directory and then reference the file you’ve uploaded in an HTML tag. We’ll show you how below:

Step 1: first, create a favicon that is correctly formatted. To do this, you need to make sure that the image is the correct size for a favicon, uses contrasting colors and works at lower resolutions.

Step 2: upload the icon to your domain’s root directory.

Step 3: open your website’s header and enter the following code:

This will only work if you add the favicon to your website in the .ico format. If you’re using .png, you need to use the following code:

If you’ve saved your favicon as a .gif, then use this code:

If you want to add a favicon in HTML without using code, there is a simpler way. To do so, all you need to do is upload your file and name it correctly. Once you’ve created your design in the correct format, save it as favicon.ico and add it to the root directory of your domain. This method only works if you use the correct name, so double-check the file name for accuracy, making sure the name has been written with lowercase letters only.

However, adding your favicon with HMTL using this method has two disadvantages. The first is that not all browsers support this option (but most do). The second is that all subdomains which are stored on the main domain need to be linked to the design. This is why it’s best to use the option where the favicon is directly referenced in the HTML header.

Adding a favicon to your website has many advantages. It lends your website a more professional and polished design and helps users to find your website more quickly. This miniature logo is even more important when optimising your site for mobile devices such as smartphones and tablets. This is because mobile devices use favicons to save websites on the home screen. Usually, mobile devices take the design saved to the site, but since different manufacturers use different file formats, you should save multiple formats when adding a favicon to your website:

• An .ico file is used for older browsers. This uses the file name favicon.ico.
• A .png file is used for new browsers. This file should then be named favicon.png.
• An Apple touch icon is used for Android Chrome and iOS Safari. This uses a 128 x 128 pixel format.

The simplest way to get all these formats is to use the IONOS Favicon Generator.