How to add a browser tab icon (favicon): in HTML, web page

How to add a browser tab icon (favicon): in HTML, web page

Some web pages display a small image (PNG, etc.) in the page tab title, address bar, or browser bookmarks. This image is called a favorites icon or Favicon for short. Here's a step-by-step guide on how to create and insert this icon into your web page using HTML.

How to create a favicon?

There are several ways to create a favicon. The format of these icons should be .ico, at least if we want them to work in all browsers (the most recent ones support .png or .jpg formats). This can be done using image editing programs such as GIMP (completely free and open source software), which allows you to adjust the image to the desired format and size. If you are looking for an even simpler tool, there are also web services that make favicons easy for you: FavIcon from Pics, GenFavIcon, FavIcon Generator, Favikon.  

How to make a favicon compatible with most browsers?

The image must be converted to .png, .jpeg, .gif, .svg, .bmp, or .ico format and then resized. The most common icon size is usually 16x16 pixels, although depending on the platform you want to view it on you will have to use one size or another.

How to make an icon for Internet Explorer?

In the case of Internet Explorer, please note that formats other than .ico or .bmp cannot be used, and the icon size must be strictly 16x16 pixels. However, creating a favicon for this browser is of limited use since it will only be used for the Favorites tab.

How to add an icon in other browsers?

  • Create your icon: Create an icon that represents your website using graphic design tools such as Adobe Illustrator or similar. The recommended size is 16x16, 32x32 or 48x48 pixels.
  • Save the icon in .ico or .png format. Be sure to save your icon in one of these formats to ensure compatibility with most browsers, including Google Chrome and Firefox.
  • Upload the icon to your server. Upload the icon file to the root of your website or a specific folder. Make sure the file is accessible by URL.
  • Add the appropriate HTML code. To make the icon icon appear in browsers, you need to paste the HTML code into the <head> section of your web page. The code varies depending on the file format you choose.

How to place an icon on a website using HTML?

If you want the icon to display correctly on a web page, you need to edit the HTML code of the said page by specifying the path with the link tag between the file header tags. Below you can see an example with a favicon in .png format located in the images folder:

<link rel="icon" type="image/png" href="/images/mifavicon.png" />

Depending on the format, the type attribute will change:

PNG format: image/png;

GIF format: image/gif;

JPEG format (.jpg or .jpeg extension): image/jpeg.

If you have an icon that doesn't have a standard image format, such as .ico, the rel attribute will also change:

<link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico" />

 

Around the same subject