Favicon
Favicon!
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.