In this blog post, we will learn how to add a favicon to your website using HTML. A favicon, short for “favorite icon,” is a small icon that is displayed next to the title of a website in the browser’s address bar or tab. It helps in easy identification of a website and is an essential branding element.
Step 1: Create or Choose a Favicon
First, you need to create or choose a suitable favicon for your website. The ideal size for a favicon is 16×16 or 32×32 pixels. You can create your favicon using any image editing software, such as Adobe Photoshop or GIMP, or use online favicon generators.
Once you have created your favicon, save it as an .ico or .png file. In this tutorial, we will use a file named favicon.ico.
Step 2: Upload the Favicon to Your Website
Upload your favicon file to the root directory of your website. This is usually the same folder where your website’s index.html file is located.
Step 3: Add HTML Code to Reference the Favicon
Now we need to add some simple HTML code to the <head> section of your website’s HTML file. This will tell the browser where to find the favicon.
For .ico file format, use the following code:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">For .png file format, use the following code:
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.png" type="image/png">Make sure to replace favicon.ico or favicon.png with the correct file name and path, if it is different or located in a different directory.
Step 4: Test Your Favicon
Save your changes to the HTML file and refresh your website in your browser. You should now see your favicon displayed next to your website’s title in the browser’s address bar or tab. If the favicon is not displayed, clear your browser’s cache and refresh the page again.
Conclusion
Adding a favicon to your website is an easy yet essential task to enhance your website’s branding and make it easily identifiable in the browser’s address bar or tab. Follow the steps mentioned in this post, and you will have a shiny new favicon for your website in no time!