HTML favicon
The HTML favicon is a small icon that represents a website or web page. Favicon stands for “favorites icon” and is displayed in various places, such as the browser tab, bookmarks, and browser history. Here’s how you can add a favicon to your HTML document:
- Create an icon file: Create a square image file with the desired favicon icon. The file should be in either .ico, .png, .gif, or .svg format. The recommended size for a favicon is 16×16 pixels or 32×32 pixels.
- Save the icon file: Save the icon file in the root directory of your website or web project. Make sure the file is accessible through a direct URL.
- Link the favicon in HTML: Add the following line of code within the
<head>section of your HTML document, replacingfavicon.icowith the actual filename and extension of your icon file:
<link rel="icon" href="favicon.ico" type="image/x-icon">- Save and upload: Save your HTML file with the changes and upload it to your web server.
By linking the favicon file using the <link> tag, you are specifying the location of the favicon and its type. Browsers will automatically fetch the favicon file and display it in the appropriate places.
Note: If you have multiple favicon files in different formats and sizes, you can use additional <link> tags with different rel attributes to specify them. For example, you can use <link rel="icon" href="favicon.png" type="image/png"> for a PNG format favicon. Browsers will choose the most suitable favicon based on the user’s device and configuration.