Skip to main content
WPFSharp Academy
Syllabus

HTML Favicon Setup

Badar KhalilUpdated September 27, 2026 1 min read
Share X Facebook LinkedIn WhatsApp

HTML Favicon Setup

A favicon (favorite icon) is the small icon displayed in the browser tab, bookmarks bar, and search results next to your page title. Setting one up correctly is a quick but important step in building a professional, polished website.

Basic Favicon Setup

Add a <link> tag inside your <head>, referencing your icon file:

Code
<head>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

Using a PNG Favicon (Modern Standard)

While .ico was the traditional format, modern browsers fully support PNG and SVG favicons, which are easier to create and edit:

Code
<link rel="icon" type="image/png" href="favicon.png">

Multi-Size Favicons for Different Devices

For full cross-device support (desktop tabs, mobile home screens, PWA icons), it's best practice to provide multiple sizes:

Code
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

The apple-touch-icon is used when a user adds your site to their iOS home screen — a small detail that matters a lot for Progressive Web App (PWA) experiences, a major trend in modern web development.

SVG favicons are gaining popularity because they scale perfectly to any size and can even support dark/light mode variants using CSS media queries inside the SVG:

Code
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Common Mistakes

  • Forgetting the favicon entirely — browsers will show a broken/default icon, which looks unprofessional.
  • Using an oversized image file, which slightly slows down page load.
  • Not testing how the favicon looks at small sizes (16x16) — overly detailed icons can look like a blur.

Key Takeaways

  • A favicon is added via a <link rel="icon"> tag in the <head>.
  • PNG and SVG are the modern preferred formats over legacy .ico.
  • Provide an apple-touch-icon for iOS home screen support.
  • SVG favicons scale cleanly and can adapt to dark/light mode.
Try it Yourself HTML
Output

Press Run to execute.

Exercise: Add a Complete Favicon SetupHTML

Add a standard PNG favicon link and an apple-touch-icon link to the head section below.

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?