How to Create the Perfect Favicon for Your Website

That tiny icon in your browser tab is pulling more weight than most developers realize. It shows up in bookmarks, Google search results, mobile home screens, and even PDF readers. Get it wrong and your site looks unfinished. Get it right and you quietly reinforce your brand every time someone glances at their tabs.

Here is everything you need to know about creating favicons that work everywhere in 2026.

What Is a Favicon and Why It Matters

A favicon (short for "favorite icon") started life in 1999 when Internet Explorer 5 introduced it as a way to mark bookmarked pages. The browser would look for a file called favicon.ico at the root of your domain and display it next to the bookmark entry. Simple enough.

Twenty-seven years later, favicons have spread far beyond bookmarks. Here is where your favicon appears today:

• Browser tabs — the primary place users see it, often the only visual cue when dozens of tabs are open
• Bookmarks and reading lists — both desktop and mobile browsers display favicons alongside saved pages
• Google Search results — Google shows your favicon next to your site name in search listings, directly influencing click-through rates
• Mobile home screens — when users add your site to their phone's home screen, your favicon (specifically the Apple Touch Icon or Web App Manifest icon) becomes the app icon
• Progressive Web Apps — PWA splash screens and app switchers use your manifest icons
• Browser history — makes previously visited sites easy to spot
• Tab groups and browser sidebars — modern browsers rely on favicons for quick visual scanning

The branding impact is real. A missing or blurry favicon signals neglect the same way a broken link does. Users may not consciously notice a good favicon, but they absolutely notice a bad one — or a missing one. Google's own documentation recommends providing a favicon for better search result presentation.

Favicon File Formats Explained

The days of dropping a single favicon.ico file into your root directory and calling it done are over. Modern browsers support multiple formats, each with distinct advantages.

ICO remains necessary for legacy support. Some older browsers, RSS readers, and PDF viewers still look exclusively for favicon.ico. The ICO format can bundle multiple sizes (16x16, 32x32, 48x48) into a single file, letting the browser pick the best match.

PNG favicons are the workhorse. They render crisply and are universally supported by modern browsers. You need multiple sizes because a 16x16 icon displayed at 96x96 looks terrible.

SVG is the most exciting format. Because SVG is vector-based, a single file scales perfectly from 16 pixels to 512 pixels with no quality loss. More importantly, SVG favicons can include CSS media queries — which means you can embed dark mode support directly in the favicon file. Browsers that support SVG favicons will automatically switch between light and dark versions based on the user's system preferences.

The practical answer: you need all of them. ICO for compatibility, PNG for reliable rendering at specific sizes, SVG for scalability and dark mode, plus platform-specific icons for Apple and Android.

Every Favicon Size You Need in 2026

One of the most confusing parts of favicon implementation is knowing which sizes to generate. Here is the complete reference:

That is nine files from a single source image. Generating them manually in an image editor is tedious and error-prone — which is exactly why favicon generators exist.

Source image recommendation: Start with a square image at least 512x512 pixels. If you have an SVG version of your logo, that is ideal since it can be scaled to any size without quality loss. Avoid images with fine text or thin lines — those details vanish at 16x16.

How to Create a Favicon Step by Step

Design Considerations

Before you generate any files, spend a minute thinking about how your icon will look at tiny sizes:

• Simplify. A favicon is not a full logo. Strip away taglines, small text, and fine details. Many brands use just the logomark (the symbol part) for their favicon.
• Use bold shapes. Thick lines and solid fills survive downscaling. Thin strokes and gradients turn to mush at 16 pixels.
• Test at actual size. Open your design at 16x16 and 32x32 on screen. If you cannot identify it instantly, simplify further.
• Consider the background. If your icon has a transparent background, it needs to be visible on both light and dark browser chrome. A subtle background color or shape can help.

Generating Your Favicon Package

You can generate all required favicon files using the Favicon Generator — upload your source image and the tool creates every format and size automatically, entirely in your browser.

Here is the workflow:

1. Upload a square PNG, SVG, JPEG, or WebP image (512x512 or larger recommended)
2. Configure the regular icon — optionally add a background color and padding if your icon needs breathing room
3. Set up dark mode — upload a separate icon for dark themes, or use the same icon with inverted colors
4. Customize the Apple Touch Icon — iOS fills transparent areas with black, so adding a background color is almost always a good idea
5. Configure the Web App Manifest — set your app name, theme color, and background color
6. Download the ZIP — contains all files plus the HTML snippet to paste into your site

The entire process takes under a minute and you end up with a production-ready favicon package.

Dark Mode Favicons: The Feature Most Sites Miss

Here is something that separates polished sites from the rest: dark mode favicon support. Most websites serve a single favicon that was designed for light backgrounds. When a user switches to dark mode, that favicon can become invisible or look jarring against the dark browser chrome.

SVG favicons solve this with embedded CSS media queries. The technique looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <rect class="icon" width="100" height="100" rx="20" />
</svg>

When the user's operating system is set to dark mode, the browser reads the media query and applies the dark styles. The switch happens automatically — no JavaScript, no extra requests, no flash of wrong colors.

Not every browser supports SVG favicons yet (notably some older mobile browsers), which is why you still provide PNG and ICO fallbacks. But for the majority of users on modern Chrome, Firefox, Edge, and Safari 15+, the dark mode experience is seamless.

The Favicon Generator handles this automatically. Upload a separate dark mode icon during configuration, and the tool embeds both versions into a single SVG file with the correct media queries.

How to Add Favicons to Your Website

Once you have generated your favicon files, you need to place them correctly and add the right HTML tags.

Basic HTML Setup

Place your favicon files in the root of your site (or a subdirectory if you prefer), then add these tags inside your <head>:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<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="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Browsers read these tags in order of preference. Modern browsers will pick the SVG version, older browsers will fall back to PNG, and the oldest will use the ICO file.

Framework-Specific Notes

Next.js (App Router): Place favicon files in your app/ directory. Next.js automatically generates the appropriate <link> tags for files named favicon.ico, icon.png, and apple-icon.png. For SVG favicons and the full set of sizes, add the link tags manually in your root layout.

Nuxt: Place favicons in the public/ directory and configure the head tags in nuxt.config.ts under app.head.link.

Gatsby: Use gatsby-plugin-manifest for PWA icons, and add remaining link tags in your gatsby-ssr.js or html.js file.

SvelteKit: Place files in static/ and add link tags in app.html.

Common Mistakes to Avoid

• Wrong MIME types. Serving an ICO file as image/png or vice versa confuses some browsers. Make sure your server sends the correct Content-Type headers.
• Caching issues. Browsers aggressively cache favicons. After updating, you might need to clear your browser cache or append a version query string (?v=2) to the favicon URL.
• Missing Apple Touch Icon. Without apple-touch-icon.png, iOS takes a screenshot of your page and uses that as the icon. It always looks terrible.
• Transparent backgrounds on iOS. Apple fills transparent areas with black. If your icon has transparency, add an explicit background color for the Apple Touch Icon.
• Forgetting the manifest. Android and PWA installations depend on site.webmanifest for icons, app name, and theme colors. Without it, your site cannot be installed as a PWA.

Frequently Asked Questions

What size should my favicon source image be?

Use a square image at least 512x512 pixels. This is the largest size needed (for PWA splash screens) and all smaller sizes will be generated from it. Starting large ensures no quality loss during downscaling. If you have an SVG source, that is even better since vectors scale without any loss.

Do I still need favicon.ico in 2026?

Yes, but it is less critical than it used to be. The ICO format is still required for some older browsers, certain RSS feed readers, and PDF viewers that display favicons. It is also the file that some tools and crawlers look for by default at the site root. Including it costs nothing and prevents edge cases where your favicon is missing.

How do I test my favicon across different browsers?

The simplest method is to deploy your site and open it in Chrome, Firefox, Safari, and Edge. Check the browser tab, create a bookmark, and on mobile, try adding the page to your home screen. For systematic testing, use the browser's DevTools — the Application panel (Chrome/Edge) shows your manifest icons and any loading errors. You can also use our Favicon Checker to run an automated audit on any URL.

Can favicons affect SEO?

Favicons do not directly influence search rankings, but they affect how your site appears in Google Search results. Google displays your favicon next to your site name in mobile and desktop results. A recognizable favicon can improve click-through rates, which is an indirect ranking signal. Google requires that your favicon be at least 48x48 pixels, be a multiple of 48, and follow their content guidelines.

How do dark mode favicons work?

Dark mode favicons use the SVG format with embedded CSS @media (prefers-color-scheme: dark) queries. When a user's operating system is in dark mode, browsers that support SVG favicons automatically apply the dark styles defined in the SVG file. This means you can have a dark icon on light backgrounds and a light icon on dark backgrounds — all from a single SVG file with no JavaScript required.