How to Add a Favicon to Your Website

A favicon is the small icon that appears in browser tabs, bookmarks, and history. It’s a simple but important branding element that helps visitors identify your site quickly.

Creating a Favicon

Recommended Sizes:

favicon.ico: 16×16 and 32×32 pixels (traditional, for older browsers)
favicon-32x32.png: 32×32 pixels
favicon-16x16.png: 16×16 pixels
apple-touch-icon.png: 180×180 pixels (for iOS devices)
android-chrome-192x192.png: 192×192 pixels
android-chrome-512x512.png: 512×512 pixels

Tools for Creating Favicons:

RealFaviconGenerator.net: Upload an image, and it generates all required sizes and the HTML code.
Favicon.io: Generate favicons from text, images, or emojis.
Canva or Figma: Design a custom icon and export at the correct sizes.

Start with a square image (at least 512×512 pixels) for the best results when scaling down.

Adding the Favicon to Your Site

HTML Method:

Place these tags in the <head> section of your HTML:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">

Upload all favicon files to your website’s root directory.

WordPress:

Go to Appearance → Customize → Site Identity.
Click Select site icon.
Upload your image (recommended: 512×512 pixels). WordPress will generate all needed sizes automatically.

Website Builders: Most builders have a favicon setting in site options. Look for “Site Icon” or “Favicon” in the global settings or under branding options.

The Web App Manifest

For Progressive Web App (PWA) support, include a site.webmanifest file:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Troubleshooting

Favicon not showing: Clear your browser cache or try an incognito window.
Wrong icon displayed: Check that the file path in your HTML matches the actual file location.
Blurry favicon: Start with a high-resolution source image and let tools downscale it.

How to Add a Favicon to Your Website