HTML Favicon
Last Updated :
11 Mar, 2024
HTML Favicon is a small icon that represents a website and appears in the browser’s tab or bookmark bar. It is defined in HTML using the <link> tag with the rel attribute set to “icon.” The Favicon is also known as the Favorite icon.
List of Favicon Sizes
|
Name
|
Size
|
Description
|
|
favicon-32.png
|
32×32
|
Standard for most desktop browsers.
|
|
favicon-57.png
|
57×57
|
Standard iOS home screen.
|
|
favicon-76.png
|
76×76
|
iPad home screen icon.
|
|
favicon-96.png
|
96×96
|
GoogleTV icon.
|
|
favicon-120.png
|
120×120
|
iPhone retina touch icon.
|
|
favicon-128.png
|
128×128
|
Chrome Web Store icon & Small Windows 8 Star Screen Icon*.
|
|
favicon-144.png
|
144×144
|
Internet Explorer 10 Metro tile for pinned site*
|
|
favicon-152.png
|
152×152
|
iPad touch icon.
|
|
favicon-167.png
|
167×167
|
iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
|
|
favicon-180.png
|
180×180
|
iPhone 6 plus
|
|
favicon-192.png
|
192×192
|
Google Developer Web App Manifest Recommendation
|
|
favicon-195.png
|
195×195
|
Opera Speed Dial icon
(Not working in Opera 15 and later)
|
|
favicon-196.png
|
196×196
|
Chrome for Android home screen icon
|
|
favicon-228.png
|
228×228
|
Opera Coast icon
|
Steps to create Favicons
- Create a small square image (e.g., 16×16 pixels or 32×32 pixels) to serve as your favicon. Save it in a suitable format like PNG, GIF, or ICO.
- Save the image with a suitable filename, such as “favicon.png” or “favicon.ico”.
- Upload the favicon image to your website’s server or hosting directory.
- In the <head> section of your HTML document, add the following code
<link rel="icon" type="image/png" href="path-to-favicon">
Example of HTML Favicon
Adding Favicon to the web page
In this approach, we are following below the mentioned points
- Use <link> tag in <head> section.
- Set rel=”icon” to specify the link type as icon.
- Define href attribute to provide the URL of the favicon image.
- Optionally, set the type attribute to specify the image type.
Syntax
<link rel="icon" type="image/png" href="path-to-favicon">
Example: In this example we sets a favicon for a webpage using a link element with the “rel” attribute set to “icon” and the “href” attribute pointing to the favicon image. The favicon appears in the browser tab.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Favicon</title>
<link rel="icon" href=
type="image/x-icon">
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>Welcome to my website</p>
</body>
</html>
|
Output:
Note: Major browsers are not supported by the sizing property of the favicon.
Many web browsers display the favicons on the left side of the address bar, so they are often used as a part of a phishing attack on HTTPS pages. The attacker changes the favicon of the site to the familiar padlock sign (notifying an encrypted connection) to fool the users. To circumvent this, many popular and modern web browsers display the favicon in the tab only and display the security status of the protocol used to access the website beside the URL.
Share your thoughts in the comments
Please Login to comment...