How to Create a Favicon for Your Website (Complete 2026 Guide)

# How to Create a Favicon for Your Website (Complete 2026 Guide)

What Is a Favicon and Why Does It Matter

A favicon is the small icon that appears in browser tabs, bookmarks, browsing history, and on mobile home screens next to your site name. It is one of the most overlooked elements of web development, yet it has a direct and measurable impact on how users perceive and interact with your site.

Without a favicon, browsers display a generic globe icon or a blank document symbol. In a world where users routinely keep twenty or thirty tabs open at a time, that generic icon is functionally invisible. Your site becomes impossible to locate without reading the tab title. A distinctive favicon gives users an immediate visual anchor.

Beyond usability, a missing favicon signals that a site is either unfinished or amateur. It creates a subconscious trust gap. Visitors who notice the absence may wonder whether the rest of the site received the same level of attention. For a commercial product, a developer tool, or any site where credibility matters, that is a problem worth solving.

Favicons also appear in:

• Browser bookmarks and bookmark bars
• Browser history panels
• Pinned tabs (where the title disappears entirely)
• Reading list apps and RSS readers
• Link preview cards in some applications
• Search results in some browsers (notably Chrome on Android)
• PWA (Progressive Web App) icons on mobile home screens
• Taskbar shortcuts on Windows

The favicon is a small investment with a wide reach across the user experience.

---

A Brief History of the Favicon Format

The favicon originated in Internet Explorer 5 in 1999. Microsoft introduced the .ico format as a way to display a 16x16 pixel icon in the browser's address bar. The name came from the URL path where browsers looked for it: /favicon.ico.

For many years, a single 16x16 .ico file was sufficient. Then smartphones arrived, high-DPI displays became standard, and Progressive Web Apps created demand for much larger icons. The favicon specification fragmented into a collection of formats, sizes, and platform-specific requirements.

Today, doing favicons correctly means generating multiple files, writing several HTML link tags, and maintaining a web app manifest. It is more work than it should be, but tools have caught up to the complexity. You can generate the full set of required assets in seconds with a generator like Favicon Generator.

---

Favicon Sizes You Actually Need in 2026

The favicon landscape has gotten complicated over time. Different browsers, operating systems, and devices expect different sizes. Understanding which sizes matter prevents the common mistake of creating a single file and wondering why things look broken on certain platforms.

That is a long list. You do not need all of them for a basic site. The minimum viable set that covers modern browsers plus iOS is:

1. favicon.ico containing 16x16 and 32x32 layers
2. favicon.svg for modern browsers
3. apple-touch-icon.png at 180x180 for iOS
4. icon-192.png and icon-512.png for Android and PWA

The ICO Format Explained

The .ico format is a container that can hold multiple images at different sizes. Think of it like a folder that contains several PNG files. Browsers extract the appropriate size for the context. A single favicon.ico that contains both 16x16 and 32x32 variants handles most desktop browser scenarios without any additional <link> tags.

Modern generators create ICO files with multiple embedded sizes automatically. If you are creating the ICO file manually, use a tool that supports multi-size ICO output rather than a simple PNG-to-ICO converter.

SVG Favicons

SVG favicons are supported in all Chromium-based browsers and Firefox. They are a single file that scales to any size without losing quality. This makes them ideal for high-DPI displays where a 16x16 raster PNG would look blurry. The browser renders the SVG at whatever pixel density the display requires.

An SVG favicon also supports CSS prefers-color-scheme for dark mode, which is a capability no raster format can match.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #1e293b; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #f8fafc; }
    }
  </style>
  <circle cx="50" cy="50" r="50"/>
  <text x="50" y="65" font-size="55" text-anchor="middle" fill="#3b82f6">T</text>
</svg>

The only downside is that Safari on macOS and iOS does not support SVG favicons. You still need a fallback ICO or PNG for those users.

---

Three Ways to Create a Favicon

Method 1: From Text or a Single Character

The fastest approach for developer tools, personal projects, and early-stage products. Pick a letter, number, or symbol that represents your brand. Design it in a contrasting color on a solid or rounded-square background. This approach works surprisingly well at small sizes because there is no complexity to lose when scaled down.

Examples from real products:

• A code editor might use </>
• A database tool might use a stylized D
• A personal site might use the first initial of the creator's name

Use Favicon Generator to type a character, pick foreground and background colors, set the border radius (for rounded corners), and download all required sizes in one click. The tool outputs a ZIP file with every size you need.

Method 2: From an Existing Logo or Image

If you already have a logo, converting it to a favicon requires more care. The core challenge is legibility at 16x16 pixels. A logo with thin lines, fine details, or a wordmark will become an unreadable smear at that size.

Best practices for converting a logo to a favicon:

Use only the icon mark, not the full logo. Most brand identities have a standalone icon mark separate from the wordmark. That icon is what becomes the favicon. The full CompanyName + icon logo is never used as a favicon.

Simplify the design. Remove elements that are not essential to recognition. A favicon that captures the essence of your logo in 3-4 solid shapes reads better than a 1:1 shrunk logo.

Increase contrast. Colors that look great at full size often merge together at 16x16. Push the contrast further than you think necessary. Test against both white and dark tab backgrounds.

Add padding. An icon that touches the edges looks cramped and can be hard to distinguish from adjacent tabs. Add a few pixels of padding around the icon mark.

Test at actual size. After creating your favicon, open it in a browser and look at the actual tab. Do not judge from a zoomed-in preview. The tab view is the ground truth.

Method 3: From an SVG File

If your logo exists as an SVG (which it should if a designer created it), you can use it directly or adapt it for use as an SVG favicon. The advantage is that you get perfect rendering at every resolution.

To use an SVG as a favicon, reference it directly:

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

Keep the SVG file as simple as possible. Remove invisible layers, metadata, and editor-specific attributes. The SVG Optimizer can reduce SVG file size significantly by removing unnecessary attributes and minifying path data.

Then add ICO and PNG fallbacks for browsers that do not support SVG favicons.

---

Adding the Favicon to Your HTML

All favicon declarations go inside the <head> element. Here is the complete set for modern compatibility:

<!-- ICO for legacy support -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- SVG for modern browsers (auto dark mode support) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS Safari -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

<!-- Web App Manifest for Android and PWA -->
<link rel="manifest" href="/site.webmanifest">

<!-- Optional: Windows tile color for pinned sites -->
<meta name="msapplication-TileColor" content="#1e293b">

<!-- Optional: Theme color for browser chrome on mobile -->
<meta name="theme-color" content="#1e293b">

The order of these tags matters for some browsers. Put the ICO link first as a fallback, then the SVG override, then the platform-specific declarations.

The Web App Manifest

The site.webmanifest file is a JSON document that describes your application to the browser, particularly for Android Chrome and Progressive Web Apps. At minimum, it needs to declare your icons:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "description": "A short description of your site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e293b",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

The purpose: "maskable" entry is important for Android. Maskable icons are designed to be cropped into various shapes (circle, rounded square, teardrop) by the launcher. A maskable icon should have significant padding so the icon mark stays within a centered "safe zone" covering about 80% of the icon area. If you do not provide a maskable icon, Android may cut off the edges of your icon in unexpected ways.

Framework-Specific Setup

Next.js (App Router)

In Next.js 13+ with the App Router, you can place favicon files directly in the app/ directory:

app/
  favicon.ico
  icon.svg
  apple-icon.png

Next.js automatically generates the appropriate link tags in the <head> for files placed there. For the web manifest, create app/manifest.ts:

import { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Your Site',
    short_name: 'Site',
    icons: [
      { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
    ],
    theme_color: '#1e293b',
    background_color: '#ffffff',
    display: 'standalone',
  }
}

Vite

Place your favicon files in the public/ directory. Vite serves this directory statically. Add the link tags manually to index.html.

WordPress

WordPress has a built-in Site Icon feature under Appearance > Customize > Site Identity. Upload a 512x512 or larger image and WordPress generates the needed sizes automatically.

Astro

Astro serves files from the public/ directory. Place favicon assets there and add the link tags to your base layout.

---

Favicon for Progressive Web Apps

Progressive Web Apps have additional requirements. When a user adds a PWA to their home screen, the browser uses the manifest icons to create an app icon that behaves like a native application icon.

The Maskable Icon Requirement

Android launchers can display icons in different shapes depending on the device manufacturer's design language. To support this, you need at least one maskable icon in your manifest. The icon's important content must stay within a circle inscribed in the image - called the "safe zone." Anything outside the safe zone may be clipped.

The safe zone is a circle with a diameter of 80% of the image's shortest side. For a 512x512 icon, the safe zone is a circle with an 80% diameter centered in the image, meaning roughly 204 pixels of padding on each side for the outer edges.

A simple rule: make sure your icon mark plus its background fill the entire image, with the icon mark centered and not touching the edges. Most favicon generators handle this automatically.

Splash Screens

On iOS, when a PWA is launched from the home screen, it shows a splash screen. iOS derives this from the apple-touch-icon and the theme-color meta tag. There is no way to specify a custom splash screen layout via HTML - Apple generates it from these assets.

On Android, Chrome generates a splash screen from the name, background_color, theme_color, and the 512x512 icon in the manifest.

---

Favicon Dark Mode Support

When your favicon has a dark or colorful background, it may look fine against the default light browser chrome but become difficult to see in dark mode. There are two approaches to handle this.

Approach 1: Design for Both Themes with SVG

SVG favicons support CSS media queries. Create a favicon that adapts to the system color scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .bg { fill: #1e293b; }
    .fg { fill: #3b82f6; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #f8fafc; }
      .fg { fill: #3b82f6; }
    }
  </style>
  <rect class="bg" width="100" height="100" rx="20"/>
  <text class="fg" x="50" y="68" font-size="60"
        font-family="system-ui" text-anchor="middle" font-weight="bold">T</text>
</svg>

Approach 2: Use a Neutral Background Color

Choose a favicon background color that works against both light and dark browser chrome. Bright white or deep black both have contrast issues in one mode. Mid-tone colors, or using a border/outline approach, can work across both.

A common technique is to skip the background entirely and use a simple icon shape that contrasts with whatever is behind it. This only works reliably if your icon has enough visual weight.

Testing Dark Mode Favicons

After creating your favicon, open your site in a browser, then switch your operating system between light and dark mode and watch the tab. In Chrome DevTools, you can emulate prefers-color-scheme without changing your OS settings:

1. Open DevTools (F12)
2. Open the Command Menu (Ctrl+Shift+P)
3. Type "Rendering"
4. Scroll to "Emulate CSS media feature prefers-color-scheme"
5. Select "dark" or "light"

Your SVG favicon should update to match.

---

Debugging Favicon Issues

Favicons are notorious for being slow to update and hard to debug. Here are the most common issues and their solutions.

The Favicon Is Not Showing

Check file location. The favicon.ico file must be at the root of your domain: https://yourdomain.com/favicon.ico. Browsers request this URL directly regardless of your HTML link tags. Place at least the ICO file at the domain root.

Check HTTP response. Open https://yourdomain.com/favicon.ico directly in a browser tab. If it returns a 404, the file is missing or misconfigured. If it returns something else, check your server's MIME type configuration - it should return image/x-icon.

Check the HTML. View source on your page and look for the <link rel="icon"> tags. If they are missing, your template is not including the head section correctly.

The Old Favicon Keeps Showing

Browsers cache favicons aggressively - sometimes for days. After updating your favicon, you will often see the old one persist.

Force a cache bust with a query string:

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48">

To clear the favicon cache in Chrome without a query string:

1. Open a new tab and navigate to your site
2. Open DevTools
3. Right-click the refresh button
4. Select "Empty Cache and Hard Reload"

Or close all tabs showing your domain, then reopen. The favicon cache is often tab-bound.

The Favicon Looks Blurry

If your favicon appears pixelated or blurry, you are likely using a raster PNG at a size that is being upscaled. The fixes are:

• Use an SVG favicon for modern browsers
• Provide a higher-resolution PNG in the ICO file (32x32 at minimum, 64x64 for HiDPI)
• Make sure you are not scaling up a 16x16 image to 32x32

iOS Shows a Screenshot Instead of Your Icon

iOS shows a screenshot of your page as the home screen icon when the apple-touch-icon is missing or incorrectly sized. Make sure you have:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

And that the file /apple-touch-icon.png exists, is exactly 180x180 pixels, and is a valid PNG.

The Manifest Icons Are Not Being Used

Android Chrome only uses manifest icons when the site is added to the home screen or installed as a PWA. Verify your manifest is valid JSON, that the icon files listed in it actually exist and are accessible, and that the content type is correct.

Test your manifest with Chrome DevTools under Application > Manifest.

---

Favicon Checklist

Use this checklist before launching any site:

• [ ] favicon.ico exists at the domain root with 16x16 and 32x32 layers
• [ ] favicon.svg is created for modern browsers
• [ ] apple-touch-icon.png exists at 180x180 for iOS
• [ ] icon-192.png exists for Android Chrome
• [ ] icon-512.png exists for PWA splash screens
• [ ] A maskable 512x512 icon is specified in the manifest with "purpose": "maskable"
• [ ] site.webmanifest exists and is valid JSON
• [ ] All <link> tags are in the <head> section
• [ ] The favicon reads clearly at 16x16 pixels
• [ ] The favicon works on both light and dark browser themes
• [ ] The favicon has been tested on iOS (Safari) and Android Chrome
• [ ] Cache busting is in place for updates (query string or versioned filename)
• [ ] The <meta name="theme-color"> tag is set for mobile browser chrome color

---

Favicon File Naming Conventions

There is no single enforced standard for favicon file names, but there is a widely accepted convention that most frameworks, generators, and tools follow:

The naming convention matters primarily for cross-tool compatibility. If you use one generator to create assets and another framework to serve them, consistent naming prevents broken references.

---

Optimizing Favicon File Size

Favicons are small images, but they are loaded on every page of your site. Unnecessary bytes add up across millions of requests.

PNG optimization. Use a lossless PNG optimizer to reduce file size without quality loss. Typical PNG favicons can often be reduced by 30-70% through proper optimization. The Image Compressor can handle PNG files.

SVG optimization. Raw SVG exports from design tools contain significant metadata overhead. Inkscape exports include Inkscape-specific attributes. Illustrator exports include Adobe metadata. Run your SVG through an optimizer to remove this bloat. The SVG Optimizer strips unused attributes and minifies path data.

ICO optimization. The ICO format does not compress well beyond choosing an already-optimized PNG as the source. Ensure your source PNGs are optimized before embedding them in the ICO container.

Target file sizes:

• favicon.ico (16+32 embedded): under 10KB
• favicon.svg: under 2KB ideally
• apple-touch-icon.png (180x180): under 20KB
• icon-512.png: under 50KB (higher is acceptable for PWA use)

---

Automated Favicon Generation Workflow

For teams or anyone managing multiple sites, here is an efficient workflow that produces all required assets from a single source image.

Input Requirements

Start with a high-resolution source image:

• Minimum 512x512 pixels
• Square aspect ratio (or the area you want preserved is square)
• PNG with transparency (if your design has a transparent background) or solid background
• Maximum contrast between foreground and background elements

Manual Workflow Using ImageMagick

If you are comfortable with the command line, ImageMagick can generate all sizes from a source PNG:

# Generate all PNG sizes
convert source.png -resize 16x16 favicon-16x16.png
convert source.png -resize 32x32 favicon-32x32.png
convert source.png -resize 48x48 favicon-48x48.png
convert source.png -resize 180x180 apple-touch-icon.png
convert source.png -resize 192x192 android-chrome-192x192.png
convert source.png -resize 512x512 android-chrome-512x512.png

# Create multi-size ICO
convert favicon-16x16.png favicon-32x32.png favicon.ico

Using the Favicon Generator

Favicon Generator handles this entire workflow in the browser. You paste in text, emoji, or upload an image, configure colors and border radius, and download a ZIP containing every size with the correct filenames. The tool also outputs the HTML snippet you need to paste into your <head>.

---

Common Favicon Mistakes

Using only a 16x16 ICO file. This was acceptable in 2005. Today, mobile devices and PWAs need much larger icons. Without a 180x180 Apple Touch Icon, iOS shows a screenshot of your page instead of an icon.

Not clearing the cache after updating. Browsers cache favicons aggressively. After updating, append a version query string to the URL: favicon.ico?v=2. Or close all tabs for the domain and reopen.

Forgetting dark mode. If your favicon has a dark icon on a dark background, it vanishes in dark browser themes. Test your favicon in dark mode before launching.

Putting the favicon in a subdirectory without a root ICO. Many crawlers and legacy browsers only look for /favicon.ico at the domain root. Always place at least the ICO file at the root, even if you also specify a path in the <link> tag.

Using a JPEG for the favicon. JPEG does not support transparency, which means you cannot have a favicon that adapts to browser chrome color. Use PNG for raster favicons.

Not testing on real devices. Emulators and DevTools simulate many things, but the actual favicon experience on iOS Safari and Android Chrome is best tested on a real device. The appearance varies by OS version and launcher.

Incorrect MIME type. Some servers do not know the correct MIME type for .ico files. If your server sends favicon.ico with Content-Type: text/html, browsers will ignore it. The correct MIME type is image/x-icon or image/vnd.microsoft.icon.

Forgetting to update the manifest when renaming icons. If you rename or move your icon files, update the paths in site.webmanifest as well. Browsers that have already fetched the manifest may cache the old icon paths.

---

Platform-Specific Favicon Behavior

Chrome on Desktop

Chrome shows the favicon in the tab, bookmarks bar, history, and pinned tab view. It prefers SVG if declared, falling back to ICO. Chrome also respects the manifest for installed PWAs.

Firefox on Desktop

Firefox supports SVG favicons (it was among the first browsers to add this). It falls back to PNG then ICO. Firefox's "Bookmarks Library" shows larger favicon previews, so higher resolution versions are visible.

Safari on macOS and iOS

Safari does not support SVG favicons. It uses ICO and PNG. On iOS, the home screen icon comes from apple-touch-icon. Safari applies its own glossy rounded-corner treatment to the icon - you cannot prevent this at the OS level, though Apple has reduced the effect in recent iOS versions.

Edge

Chromium-based Edge behaves identically to Chrome for favicon handling. It also adds the favicon to the taskbar when a site is pinned.

Samsung Internet

Samsung's browser, popular on Galaxy devices, supports standard PNG and ICO favicons and respects the web manifest for home screen icons. Behavior is similar to Chrome on Android.

---

Generate Your Favicon in Seconds

Skip the manual resizing and format juggling. The Favicon Generator creates all required favicon sizes from text, an emoji, or an uploaded image. It outputs the complete set of files and the HTML code to paste directly into your site's <head>. No account required, no uploads to external servers - everything runs in your browser.

Start with a letter, number, or a simple symbol. Choose a background color that matches your brand. Pick your border radius - sharp corners, slightly rounded, or a full circle. Download the ZIP file. Done.

Once you have your favicon, verify your meta tags are complete using the Meta Tag Generator and preview how your site appears in social sharing previews with the OG Preview tool. A complete head section - title, description, Open Graph tags, and favicon - is the foundation of a professional web presence.