Open In App
Related Articles

HTML Favicon

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

What is a Favicon in HTML ?

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.

How to 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 to Add Favicon in a Website or web page ?

In this approach, add <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">
 

Example: In this example, we are using the above approach.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8" />
  
    <title>HTML Favicon</title>
  
    <!-- Add icon link -->
    <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:

favicon

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

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.



Last Updated : 14 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads