Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Icon Logo in Title Bar Using HTML
To add an icon logo to the title bar of a website in HTML. The icon of the title bar is often referred to as a favicon (short for "favorites icon"). It appears in the browser tab, bookmarks, and history.
What is a Favicon?
A favicon is a small, 16x16 or 32x32 pixel image associated with a website or web page. It is used to display a visual representation of your company, brand or website. It helps users to quickly identify your site or company name among multiple open tabs.
Steps to Add an Icon Logo in the Title Bar
There are three steps to create and add icon logo (Favicon logo) to the website.
- Create your Brand/Website Icon Image (Logo)
- Convert the Icon to the Correct Format (PNG, SVG, or ICO)
- Add the Favicon to Your Website Using HTML
Step 1: Create Your Brand/Website Icon Image
First, you need to create the icon image that you want to use as favicon. This favicon image should be simple and recognizable at a small size. Common formats for favicons include PNG, ICO, and SVG.
Step 2: Convert the Icon to the Correct Format
You can use various formats for Favicon but .ico files are the most traditional and widely supported. Use the multiple formats to ensure compatibility across different browsers.
Step: Add the Favicon to Your Website Using HTML
Once you have your favicon image in the correct format, you can add it to your website by linking it in the <head> section of your HTML document.
Examples of Adding icon Logo on the Title
In the following examples we have used two different format of favicon.
You need to run these codes locally to check the favicon on the title bar.
Example 1
In this example we will be using ICO format. The <link rel="icon" href="favicon.ico" type="image/x-icon"> is used to links the ICO format favicon. Place the favicon.ico file in the root directory of your website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding ICO Format Favicon</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
</body>
</html>
Example 2
In this example we will be using PNG format. The <link rel="icon" href="favicon.png" type="image/png"> is used to link a PNG format favicon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding PNG Favicon</title>
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
</body>
</html>
Multiple Formats Favicon
For the best compatibility, you can include multiple favicon formats. You can see the links for multiple favicons.
<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
You can use larger icon for home screen apple touch. It will help for better support on Apple devices.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
2K+ Views
