Favicon
Jalaj SinghalFavicon!
I know it is a new term for all the most of the people as it is not must used by all the people.
It is a small icon that is at the top of the website, which can be changed by us.
Like:
Here, the icon of the hash node will be a favicon.
How do I create a favicon in HTML?
Step 1: 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.
Step 2: Save the image with a suitable filename, such as “favicon.png” or "favicon.ico”.
Step 3: Upload the favicon image to your website’s server or hosting directory.
Step 4: In the <head> section of your HTML document, add the following code:
<link rel="icon" type="image/png" href="path-to-favicon">
How do I add a favicon to a website or web page?
In this approach, add a <link> tag with rel="icon” to the <head> section with the href attribute pointing to the favicon image.
Syntax:
<link rel="icon" type="image/png" href="path-to-favicon">
Let's learn it with an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Favicon</title>
<!-- Add icon link -->
<link rel="icon" href=
"https://th.bing.com/th/id/OIP.WJRg_aYa6D81C5_Ey4kWpgHaEc?rs=1&pid=ImgDetMain"
type="image/x-icon">
</head>
<body>
<h1 style="color:black;">
Jalaj Singhal
</h1>
<p>
Welcome to my website
</p>
</body>
</html>
OUTPUT:
- Here I have added a photo to the top where the site name comes as a representation, which we can add directly from the link or the storage itself.
A list of the sizes of favicons as per the device used is as follows:
| 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 | Google TV 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 |
| favicon-196.png | 196×196 | Chrome for Android home screen icon |
| favicon-228.png | 228×228 | Opera Coast icon |
With this I want to tell you that we have successfully completed most of the HTML and remaining HTML we will discuss in the upcoming blogs where we would feel need of them.
Subscribe to my newsletter
Read articles from Jalaj Singhal directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Jalaj Singhal
Jalaj Singhal
👋 Greetings, Jalaj Singhal here! 🚀 I'm an enthusiastic blogger who enjoys delving into the world of technology and imparting my knowledge to the community. 📃 Having experience in HTML and CSS, I enjoy creating interesting and educational content that demystifies difficult ideas and gives readers the tools they need to advance their knowledge. 🌐 I try to contribute to the active tech community and encourage relevant discussions on Hash Node, where you can find my writings on the subject of web development. 💡 Together, let's connect and go out on this fascinating path of invention and learning!