HTML Favicon

HTML Tutorial

HTML Favicon

In HTML Favicon (short for favorite icon) is the small icon that appears:

  • In the browser tab

  • In bookmarks

  • In history & shortcuts

It helps users identify your website quickly.

 1. What Is a Favicon?

  • Small image (usually logo or symbol)

  • Common sizes: 16×16, 32×32, 48×48

  • Formats: .ico, .png, .svg

Example:
 The small icon you see next to a website name in the browser tab.

 2. Basic HTML Favicon Code

Add this inside the <head> section of your HTML file:

  •  Most commonly used
  •  Supported by all browsers

 

 3. Using PNG Favicon (Recommended)

Example with size:

4. SVG Favicon (Modern Browsers)


 

  •  Scales perfectly
  • Small file size
     Not supported in very old browsers

 

 5. Where to Place Favicon File?

Best practice:

/favicon.ico
/index.html

Then HTML can simply be:

Browsers also auto-detect favicon.ico in the root folder.

 6. Multiple Favicons (Best Practice)

  •  Browser chooses the best size automatically

 7. Favicon for Apple Devices (Optional)

  • Used when users add your site to iPhone/iPad home screen.

 

 8. Full Example (HTML File)


 

 Common Mistakes

  •  Forgetting to put favicon inside <head>
  • Wrong file path
  •  Browser cache not cleared
  •  Unsupported image format

Tip: Hard refresh with Ctrl + F5 if favicon doesn’t update.

 Key Points to Remember

  • Favicon improves branding & UX

  • Place inside <head>

  • .ico and .png are safest

  • Clear cache if not visible

  • Keep file size small

You may also like...