How to Create a Favicon for Your Website

You don’t need dozens of icon files anymore. In 2026, a small set covers every current browser, phone home screen and installed web app. The fastest way to make them is to start from one square image, ideally an SVG, and run it through the Favicon Generator, which builds the whole set and the HTML snippet in one ZIP.

The files a modern site needs

File	Size	Used by
favicon.ico	16, 32 and 48 px inside one file	Older browsers, some feed readers, tools that request /favicon.ico directly
favicon.svg	Scalable	Current browser tabs, with optional dark-mode colors
apple-touch-icon.png	180×180	iPhone and iPad home screen bookmarks
android-chrome-192x192.png and android-chrome-512x512.png	192 and 512 px	Android home screen, installed web apps, splash screens
site.webmanifest	Text file	Lists the 192 and 512 icons and the app name

Why each one matters:

• favicon.ico is the fallback. Many tools still request /favicon.ico at the site root without reading your HTML. The 32 px image is the one most tabs use, and 48 px covers high-density displays and Windows shortcuts. The 16 px image doesn’t hurt and helps very old setups.
• favicon.svg stays sharp at every size and every screen density, and it’s usually only a few hundred bytes. It can also switch colors in dark mode, which no PNG can do.
• apple-touch-icon.png must be a solid square. iOS shows transparent areas as black and rounds the corners itself, so don’t pre-round it. The generator adds a background color to this file for exactly that reason.
• The manifest icons are what Android and installable web apps use. 512 px is also used for splash screens.

Generate the set in four steps

1. Prepare a square source image at least 512×512 px. An SVG is best because it scales cleanly to every size.
2. Open the Favicon Generator and add the image.
3. Choose a background color for the Apple touch icon, then select Process.
4. Download the ZIP and copy its files to the root folder of your site.

The ZIP includes favicon.ico (16/32/48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, the two android-chrome icons, site.webmanifest, the HTML snippet and, when your source is an SVG, favicon.svg. Everything is generated in your browser.

If you only need a Windows-style icon file with your own choice of sizes, such as 24 or 256 px for a desktop app, use the ICO Generator instead. It stores each size as PNG inside the ICO and lets you set padding and background.

The HTML to add

Put these lines inside the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The sizes="32x32" on the ICO line is deliberate. It stops some browsers from choosing the ICO over the SVG. Browsers that support SVG favicons use the SVG, and the rest fall back to the ICO.

A minimal site.webmanifest looks like this:

{
  "name": "Example Site",
  "short_name": "Example",
  "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"
}

Change the name and colors to match your site. If you upload files with different names, update the src paths to match.

Make the SVG favicon work in dark mode

A dark logo on a transparent background disappears on a dark browser tab. An SVG favicon can fix this with a CSS media query inside the file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1f2937; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f3f4f6; }
    }
  </style>
  <rect class="mark" x="4" y="4" width="24" height="24" rx="5"/>
</svg>

Replace the rect with your own shapes and give them the mark class. The browser applies the dark-mode color when the operating system or browser is set to dark. Note that this follows the system setting, not the color of the page itself.

A note on maskable icons

Android can crop home screen icons into circles, squircles or rounded squares. An icon marked as maskable tells Android it’s safe to crop. The rule is that everything important must fit inside a central circle whose diameter is 80% of the icon width. For a 512 px icon, that’s a 410 px circle in the middle.

The standard icons from the generator are not marked maskable, so Android shows them as they are, sometimes on a white plate. If you want an edge-to-edge icon, make a separate 512×512 version with your logo shrunk into the safe zone and a solid background filling the square. Then add it to the manifest as an extra entry:

{ "src": "/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }

Don’t mark your regular icon as maskable. Its edges would be cropped off.

Design tips for 16 px legibility

A favicon spends most of its life at 16 to 32 px, where a full logo turns into a smudge. These habits help:

• Use a symbol, not a wordmark. One letter or a simple shape reads at tab size. A full company name doesn’t.
• Fill the square. Leave only a pixel or two of margin. Large padding makes the icon look tiny next to other tabs.
• Use thick strokes. Lines thinner than about 2 px at 32 px size fade or blur when scaled down.
• Go high contrast. Two colors with strong contrast beat a gradient. Fine gradients turn to mud at 16 px.
• Check light and dark tabs. Either use the dark-mode SVG technique above or put the mark on a solid colored tile so it works on both.
• Preview at real size. Zoom your browser out or open the 16 and 32 px PNGs from the ZIP at 100%. If you can’t recognize it at that size, simplify the design.

Checking that it worked

After uploading, open your site in a private window, because browsers cache favicons aggressively. Visit /favicon.ico and /site.webmanifest directly to confirm they load. On a phone, add the page to the home screen to see the touch icon. If an old icon still shows, clear the site data or wait for the cache to expire.