HTML Favicon

Our goal in this article is to take you through the fundamentals of HTML favicons, including how to create them, optimize them for different devices and browsers, and choose the right one.

Do you ever notice the small icon next to a website’s title in the browser tabs or bookmarks bar? This little icon is called a favicon, which stands for “favorite icon.” Your website’s favicon promotes brand recognition, improves user experience, and makes your website stand out.

Favicons are the icons that appear on the web pages in HTML. Browser tabs display a favicon next to the title of the page.

Websites and blogs use favicons to represent themselves online. A favicon OR HTML Favicon is a small file that contains one or more icons. It is also referred to as a tab icon, website icon, URL icon, or bookmark icon.

How To Add a Favicon in HTML

Your HTML favicon can be any image you like. A website like favicon.io can also help you create a favicon for your site.

The favicon should be a simple, high-contrast image since it is a small image.

In the browser tab, the page title is accompanied by a favicon image, as shown in the below image.

Example of favicon

To add a favicon to your website, save your favicon image to the root directory of your web server or create a folder named images in the root directory and store your favicon picture there. “favicon.ico” is a popular name for a favicon image.

To finish, add a <link> element after the <title> element in your index.html file:

HTML Favicon Example

<!DOCTYPE html> <html> <head> <title>This is My Page Title</title> <link rel="icon" type="image/z-icon" href="/images/favicon.ico"> </head> <body> <div><h1>This is just a Heading</h1></div> <div><p>This is a just paragraph.</p></div></body> </html>

Save the “index.html” file and reload it in your web browser. The favicon image should now appear to the left of the page title in your web browser tab.

Here is another example of the favicon where you will find it in the compiler:

Example: 

<!DOCTYPE html> <html><body><br><br><br><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><br><title>favicon</title><br><br><br><img src="https://mrexamples.com/wp-content/uploads/html_images/smiley.gif" alt="smiley face"><br><br> </body></html>


Favicon Styling

Favicon can also be styled with use of CSS properites here how we can do that:

Example: 

<!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <style> img{ width:250px; height:80px; } </style> </head> <title>favicon</title> <body> <img src="https://mrexamples.com/wp-content/uploads/html_images/smiley.gif" alt="smiley face"> </body> </html>


Favicon File Format Support

Here are the file formats that a HTML favicon image can be saved in:

Browser ICO PNG GIF JPEG SVG
Chrome Yes Yes Yes Yes Yes
Edge Yes Yes Yes Yes Yes
Safari Yes Yes Yes Yes Yes
Opera Yes Yes Yes Yes Yes
Firefox Yes Yes Yes Yes Yes

Tag Overview
<link> An external resource and its relationship to a document.

Check out our HTML Tag Reference to find a complete listing of all HTML tags.

Conclusion

A favicon, a small but key element of web design, can have a big impact on user experience and brand recognition. You can improve user engagement by creating a favicon that aligns with your brand’s color scheme, style, and messaging.

Furthermore, you can ensure that your favicon will work well on all platforms by optimizing it for different devices and browsers. The ability to work with favicons is an essential skill for web designers, regardless of their experience level.

Don’t forget to add a favicon to your website if you haven’t already. Your website can be enhanced visually and functionally with a little effort, so it stands out from the crowd.


Leave your reaction below if this article somehow meets your educational requirements. Your feedback matters a lot to us.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *