html
/

HTML Favicon: Adding Icons to Your Website

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Favicon: Adding Icons to Your Website

What is a Favicon?

A favicon is a small icon displayed in the browser tab, bookmarks, and address bar that represents your website.

Basic Syntax

HTMLRead-only
1
<link rel="icon" type="image/png" href="favicon.png">

Where to Add Favicon?

The favicon link should be placed inside the <head> section of your HTML document.

HTMLRead-only
1
<head>
  <link rel="icon" href="favicon.ico">
</head>

Supported Formats

FormatDescription
ICOMost widely supported
PNGModern and high-quality
SVGScalable vector format
GIFSupports animation (limited use)

Multiple Icon Sizes

HTMLRead-only
1
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">

Apple Touch Icon

HTMLRead-only
1
<link rel="apple-touch-icon" href="apple-icon.png">

Best Practices

  • Use .ico or PNG for compatibility
  • Provide multiple sizes for different devices
  • Keep favicon simple and recognizable
  • Optimize file size for performance
  • Place favicon in root directory for fallback

Common Mistakes

  • Incorrect file path
  • Using unsupported formats
  • Not adding favicon in head section
  • Large file size affecting performance

Conclusion

A favicon enhances branding and user experience by making your website easily identifiable in browser tabs and bookmarks.

Try it yourself

<head>
  <link rel="icon" href="favicon.ico">
</head>

Test Your Knowledge

Q1
of 3

Where is favicon placed?

A
<body>
B
<footer>
C
<head>
D
<main>
Q2
of 3

Which tag is used for favicon?

A
<icon>
B
<link>
C
<meta>
D
<img>
Q3
of 3

Which format is widely supported?

A
ICO
B
TXT
C
DOC
D
MP3

Frequently Asked Questions

Where should favicon be placed?

Inside the <head> section of the HTML document.

Which format is best?

ICO and PNG are most commonly used.

Can I use SVG for favicon?

Yes, modern browsers support SVG favicons.

Previous

html file paths

Next

html links advanced

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.