How to Add Image in the Title Bar
The majority of websites add an icon or image logo in the title bar. The icon logo is also called a favicon.
Favicon, which is also known as a URL icon, a tab icon, a shortcut icon, website icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.
Favicon is used in the top left corner of the tab. Favicons are attractive and can be useful for user engagement.
W3C standardized favicon in the HTML 4.01 recommendation. The standard implementation uses a <link> element with the rel attribute in the <head> section of the document that specifies the file format, file name and location. The file can have any image file format (ico, png, jpeg, gif) and can be in any Web site directory.
The two ways of adding favicons are presented below.
The first way of adding favicons¶
- The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
- You must convert your image into the .ico format. There are many online tools to do that.
- Opening the tool, you must upload your image file. Then, the image will be converted automatically.
- Download the image and save your .ico file on the computer.
- Rename the file to favicon.ico, because the browser automatically recognizes only this name.
- Upload the file to the host directory, where your website files are located.
- When your favicon.ico file is uploaded, the browser will select it automatically and display the image in the browser.
The second way of adding favicons¶
- The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
- Upload the file to the host directory, where your website files are located.
- The final step is to specify the image you want to use as a favicon in the code of your website.
Add the following link to your <head> section:¶
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Example of adding an image in the title bar:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<h1 style="color: #1c98c9;">
W3docs icon
</h1>
<p>
W3docs icon added in the title bar
</p>
</body>
</html>
Result¶
A favicon must have the following characteristics:¶
- Favicon.ico is the default name.
- Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
- Color should be 8 bites, 24 bites or 32 bites.
Depending on the favicon format, the type attribute must be changed:¶
- For PNG, use image/png.
- For GIF, use image/gif.
- For JPEG, use image/gif.
- For ICO, use image/x-icon.
- For SVG, use image/svg+xml.
<link rel="icon" href="favicon.gif" type="image/gif">
For different platforms, the favicon size should also be changed:
Platform | Name | Rel value | Favicon size |
---|---|---|---|
Google TV | favicon.png | icon | 96×96 |
Opera Coast | favicon-coast.png | icon | 228×228 |
Ipad Retina, iOS 7 or later | apple-touch-icon-152×152-precomposed.png | apple-touch-icon-precomposed | 152×152 |
Ipad Retina, iOS 6 or later | apple-touch-icon-144×144-precomposed.png | apple-touch-icon-precomposed | 144×144 |
Ipad Min, first generation iOS 7 or later | apple-touch-icon-76×76-precomposed.png | apple-touch-icon-precomposed | 76×76 |
Ipad Mini,first generation iOS 6 or previous | apple-touch-icon-72×72-precomposed.png | apple-touch-icon-precomposed | 72×72 |
Iphone Retina, iOS 7 or later | apple-touch-icon-120×120-precomposed.png | apple-touch-icon-precomposed | 120×120 |
Iphone Retina, iOS 6 or previous | apple-touch-icon-114×114-precomposed.png | apple-touch-icon-precomposed | 114×114 |
For Apple devices with the iOS operating system version 1.1.3 or later and for Android devices, you can create a display on their home screens by using the Add to Home Screen button within the share sheet of Safari. For different platforms, add the link in the head section of documents.
Add it to you code in the following way:¶
<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">