In this tutorial, you will learn HTML Favicon
An HTML favicon or site icon is a small icon that appears in a web browser’s address bar, tab, or bookmarks. It is a way to visually identify your website and make it stand out among other tabs or bookmarks. Here is a tutorial on how to create and add a favicon to your HTML website:
- Create an image that will serve as your favicon. The image should be square and have a size of at least 512×512 pixels. The most common file format for favicons is .ico, but other formats such as .png and .gif also work.
- Once you have your favicon image, save it to the root directory of your website. This is the top-level directory that contains your index.html file.
- Add the following code to the head section of your HTML file:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Make sure you change the href attribute to the correct file name and file format of your favicon.
- You can also use PNG or GIF format by adding the following code in the head section of your HTML file:
<link rel="icon" type="image/png" href="favicon.png">
- Save your HTML file and upload it to your web server.
- Clear the cache of your browser and refresh your website. You should now see your new favicon in the address bar, tab, or bookmarks.
Note: Some modern browsers support the use of a manifest file to specify icons with different sizes and types. You can check this by visiting the link “https://realfavicongenerator.net” to generate the needed files and code to support this feature.