You must have noticed a small icon to the left of the page title on the web browser tab. This small image is called a favicon.
It is a short name for 'favourite icon'.
The below image shows a favicon in the browser tab.
The favicon image is also shown on the address bar and bookmark bar.
If you check the browser history, it also displays page titles with favicon images.
The 16x16 pixels size is the most common favicon size. You can also use a 32x32 pixel size favicon image.
As the 32x32 pixel favicon dimension is large, it has better clarity than the 16x16 pixel favicon image.
For the favicon image, we generally use the ICO file format. But browsers today also support PNG, JPEG, GIF and SVG file types.
There is no fixed rule', but the best practice is to name the image file as 'favicon'. For example: 'favicon.ico'.
A favicon is an image that users notice. These days search engines like Google, Bing etc., have also started to show favicon in search results.
There is a high chance that people will click on your website if you have an appealing favicon.
Also, we should take utmost care in creating our favicon because that may create brand awareness.
You can use your brand logo as a favicon image.
Use the below favicon generator to create a 16x16 or 32x32 ICO favicon image.
Select your image file. Choose the size and hit the 'Generate Favicon' button.
Once the favicon is generated, you will get a download link.
There are two ways we can add a favicon to our page.
The first is to name the file 'favicon.ico' and save it in the website root directory.
Web browsers automatically look for this file in the root, and when they find it, they start displaying it.
The second method is to save the favicon in any folder and use the HTML <link> tag to include it in the HTML file.
It is important to note that the above code will be added in the <head> section after the <title> element. See the complete example.
If you want to test your favicon, copy the code above and save it as 'index.html'. Replace the ''folder' word in the code with your folder name.
Open this file with your favourite browser. Now you should be able to see your favicon image on the browser tab.
|1. HTML Tutorial|
|2. Introduction to HTML|
|3. Basic HTML Page|
|4. HTML Editors|
|5. Web Browser|
|6. HTML History|
|7. Basic HTML Tags|
|8. HTML Elements|
|9. HTML Attributes|
|10. HTML Headings|
|11. HTML Paragraphs|
|12. HTML Text Formatting|
|13. HTML Styles|
|14. HTML Comment|
|15. HTML Quotation|
|16. HTML Colors|
|17. HTML RGB Colors|
|18. HTML HEX Colors|
|19. HTML HSL Color|
|20. HTML CSS|
|21. HTML Links|
|22. HTML Link Colors|
|23. Link within Page|
|24. HTML Images|
|25. HTML Background Image|
|26. HTML Image Map|
|27. HTML Picture Element|
|28. HTML Favicon|
|29. HTML Table|
|30. HTML Table Border|
|31. HTML Table Size|