How to Set a Favicon for Your Website: Complete HTML Tag Tutorial

March 2026 ~7 min read How-To

A favicon is the small icon displayed in browser tabs, bookmarks bars, and search results. Though only 16×16 pixels in size, it is an important element for building your website's brand recognition. This guide walks you through the complete process from creation to setup, with the best browser-compatible approach for modern development.

Why Favicons Matter

Many people overlook the importance of a favicon, but it has a real impact on user experience:

Brand recognition — when users have multiple tabs open, a favicon is the quickest way to identify your site
Bookmark visibility — a favicon makes your site instantly recognizable in a bookmarks bar
Search result display — Google shows site favicons in search results, helping to build brand impressions
Professional appearance — a site without a favicon looks unfinished and leaves visitors with a poor impression
PWA install icon — when users add your site to their home screen, the favicon becomes the app icon

Step 1: Prepare Your Icon Assets

Before setting up your favicon, you need a few icon sizes ready. Recommended checklist:

favicon.ico — ICO file containing 16×16 and 32×32 (placed in the website root directory)
icon-192.png — 192×192 PNG icon (for Android PWA)
icon-512.png — 512×512 PNG icon (for PWA splash screen)
apple-icon.png — 180×180 PNG icon (for Apple Touch Icon)
icon.svg — scalable vector icon (optional; preferred by modern browsers)

Quick start: If you only need a basic favicon, create a 32×32 ICO file with our tool and place it in your website root directory. That alone will make most browsers show your favicon.

Step 2: Create Your ICO File

Prepare a high-resolution source image

Use a PNG image of at least 256×256 pixels as your source. Make sure the image has a transparent background if your logo needs one, so the ICO icon will display correctly on any background color.

Convert using the ICO Generator

Go to our ICO Icon Generator, upload your image, select 32×32, and download the ICO file. If you need an ICO containing both 16×16 and 32×32, download each size separately and combine them with an ICO merge tool.

Upload the file to your website root directory

Upload the downloaded favicon.ico to your website's root directory (i.e., https://yourdomain.com/favicon.ico). Most browsers will automatically try to load from this path even without an HTML declaration.

Step 3: Set Favicon Tags in HTML

The following is the recommended complete favicon HTML setup for modern web development, covering all browsers and devices:

Minimal Setup

      <!-- Place inside the <head> tag -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
    

Standard Recommended Setup

      <!-- ICO Favicon (backwards compatible, all browsers) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- PNG Favicon (modern browsers) -->
<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/icon-16.png" sizes="16x16">

<!-- Apple Touch Icon (iOS / iPadOS home screen icon) -->
<link rel="apple-touch-icon" href="/apple-icon.png">
    

Complete Modern Setup (with SVG and PWA)

      <!-- ICO Favicon (backwards compatible) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- SVG Favicon (modern browsers, supports dark mode) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Apple Touch Icon (180×180 PNG) -->
<link rel="apple-touch-icon" href="/apple-icon.png">

<!-- Web App Manifest (PWA settings) -->
<link rel="manifest" href="/manifest.webmanifest">

<!-- Browser theme color (Android Chrome toolbar) -->
<meta name="theme-color" content="#667eea">
    

Step 4: Set Up the Web App Manifest (PWA)

If you want users to be able to add your site to their home screen, you need to create a manifest.webmanifest file:

      {
  "name": "Your Website Name",
  "short_name": "Short Name",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#667eea",
  "background_color": "#ffffff",
  "display": "standalone"
}
    

Browser Favicon Support

Browser	ICO	PNG	SVG	Apple Touch Icon
Google Chrome	Full support	Full support	Full support	(ignored on non-Apple devices)
Mozilla Firefox	Full support	Full support	Full support	(ignored on non-Apple devices)
Apple Safari	Full support	Full support	Partial support	Full support
Microsoft Edge	Full support	Full support	Full support	(ignored on non-Apple devices)
iOS Safari	Full support	Full support	Partial support	Used for home screen icon

Common Issues & Troubleshooting

Why does my browser still show the old favicon after an update?

This is a browser cache issue. Solutions:

Hard refresh with Ctrl+Shift+R (Windows) or Command+Shift+R (macOS)
Open an incognito window to see the latest state
Add a version query parameter to the favicon URL in HTML: href="/favicon.ico?v=2"

Why doesn't my favicon appear in the bookmarks bar?

Check the following:

Confirm favicon.ico actually exists in the website root (try loading the full URL directly in the browser)
Ensure the <link> tag is correctly placed inside <head>
Verify the server is correctly returning the icon (HTTP 200 status, not 404)

My favicon looks blurry or distorted — what can I do?

This is usually caused by insufficient source image resolution or a non-square aspect ratio. Recommendations:

Use a square source image (if it is not square, our tool will auto-crop it)
Use a source image of at least 256×256 pixels
Avoid using overly complex details at small icon sizes

Note: Some web frameworks (such as Next.js, Nuxt.js) have their own favicon configuration methods. Refer to the official documentation for each framework rather than adding tags manually in HTML.

Testing Your Favicon Setup

After completing the setup, verify your favicon displays correctly using these methods:

Open https://yourdomain.com/favicon.ico directly in the browser to confirm the icon loads
Check whether the browser tab shows the icon
Bookmark the page and confirm the bookmarks bar shows the correct icon
Use Google Search Console to check if the favicon can be crawled correctly
Use a tool like RealFaviconGenerator for comprehensive testing

Now that you have everything you need to set up your favicon correctly, go ahead and create your ICO icon!

Create Your ICO Favicon Now