HTML Favicon

Last Updated : 27 May, 2026

A favicon is a small image displayed next to a website’s title in the browser tab. It helps users quickly recognize and return to a website.

  • Appears in browser tabs, bookmarks, and browsing history for easy identification.
  • Improves brand recognition by serving as a visual identity for the website.
  • Enhances the professionalism and credibility of the site.
  • Improves usability by helping users locate their tab among multiple open tabs.
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>GeeksforGeeks</title>
    <link rel="icon" 
    href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" 
    type="image/x-icon">
</head>
<body>
    <h3 style="color:green;">GeeksforGeeks</h3>
    <p>Welcome to my website</p>
</body>
</html>

Output:

Screenshot-2026-05-27-173446

Note: Major browsers are not supported by the sizing property of the favicon.

Creating and Adding a Favicon

To create and add a favicon to your website, follow these simple steps to ensure it's displayed properly across different browsers and devices:

  1. Design a small favicon image (usually 16×16 or 32×32 pixels) and save it in formats like .ico, .png, or .svg.
  2. Upload the favicon image to your website’s root directory or use an external image URL.
  3. Add a <link> tag inside the <head> section of your HTML file to reference the favicon.
  4. Save the changes and test the favicon by opening the website in a browser to ensure it displays correctly.

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