Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add icon logo in title bar using HTML?
To add an icon logo to the title bar of a website in HTML, we use a favicon (short for "favorites icon"). The favicon appears in the browser tab, bookmarks, history, and other places where your site is referenced, helping users quickly identify your website among multiple open tabs.
What is a Favicon?
A favicon is a small icon image, typically 16x16, 32x32, or larger pixels, associated with a website. It provides a visual representation of your brand or website and enhances user experience by making your site easily recognizable. Modern browsers support various favicon formats including ICO, PNG, SVG, and others.
Syntax
Following is the basic syntax for adding a favicon to your HTML document
<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">
The <link> element is placed within the <head> section of your HTML document. The rel="icon" attribute specifies the relationship as an icon, href points to the favicon file location, and type indicates the MIME type.
Steps to Add a Favicon
Creating and adding a favicon involves three main steps
Create your icon image Design a simple, recognizable logo that works well at small sizes
Convert to appropriate format Use ICO, PNG, or SVG format for optimal browser compatibility
Link the favicon in HTML Add the appropriate
<link>tag in your document's<head>section
Using ICO Format
The ICO format is the traditional and most widely supported favicon format. It can contain multiple image sizes within a single file, making it ideal for different display contexts.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding ICO Format Favicon</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Welcome to TutorialsPoint</h1>
<p>Check the browser tab to see the favicon!</p>
</body>
</html>
Place the favicon.ico file in your website's root directory. The favicon will appear in the browser tab next to the page title.
Using PNG Format
PNG format favicons offer better image quality and transparency support compared to ICO format. They are well-supported by modern browsers and easier to create.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding PNG Favicon</title>
<link rel="icon" href="/favicon.png" type="image/png">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Welcome to TutorialsPoint</h1>
<p>This page uses a PNG favicon for crisp display quality.</p>
</body>
</html>
Multiple Format Support
For maximum compatibility across different browsers and devices, you can include multiple favicon formats. Browsers will automatically choose the most appropriate format they support.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Format Favicons</title>
<!-- Multiple favicon formats for better compatibility -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple touch icon for iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Multi-Format Favicon Support</h1>
<p>This page provides favicon support for various browsers and devices.</p>
</body>
</html>
Common Favicon Formats
Following table shows the different favicon formats and their characteristics
| Format | File Extension | MIME Type | Best Use Case |
|---|---|---|---|
| ICO | .ico | image/x-icon | Maximum compatibility, supports multiple sizes |
| PNG | .png | image/png | High quality, transparency support |
| SVG | .svg | image/svg+xml | Scalable vector graphics, smallest file size |
| Apple Touch | .png | image/png | iOS home screen icons (180x180px) |
Apple Touch Icon
Apple devices use a special apple-touch-icon for when users add your website to their home screen. This icon should be 180x180 pixels for optimal display on modern iOS devices.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">
Best Practices
File placement Place favicon files in your website's root directory for automatic detection
Size recommendations Use 32x32 pixels for standard favicons, 180x180 for Apple touch icons
Simple design Keep the design simple and recognizable at small sizes
Consistent branding Use your brand colors and logo elements for recognition
Test across browsers Verify favicon display in different browsers and devices
Conclusion
Adding a favicon to your website enhances user experience and brand recognition. Use the <link rel="icon"> tag in your HTML <head> section to specify the favicon file. For best compatibility, provide multiple formats (ICO, PNG, SVG) and include Apple touch icons for iOS devices.
3K+ Views
