Skip to content
Engyna

Design & accessibility

How to Make a Favicon (Sizes, Formats and HTML)

Which favicon files a modern website actually needs, how to create them from text, an emoji or a logo, and the exact HTML to add.

Updated · 2 min read

The favicon is the little icon in browser tabs, bookmarks and on phone home screens. It's tiny, but a missing or blurry favicon makes a site look unfinished.

Which files you actually need

Over the years, dozens of favicon sizes were recommended. Today a compact set is enough:

File Size Used by
favicon.ico 16, 32, 48 px inside Old browsers, some tools that request /favicon.ico directly
favicon.svg scalable Modern browsers, sharp at any size
favicon-16x16.png, favicon-32x32.png 16, 32 Browsers that prefer PNG
apple-touch-icon.png 180 × 180 iPhone and iPad home screen
android-chrome-192x192.png, android-chrome-512x512.png 192, 512 Android home screen and installed web apps (manifest)

Design for 16 pixels

At tab size, your icon is 16 × 16 or 32 × 32 pixels. What works:

  • One or two letters, or a simple symbol, rather than the full logo with text.
  • Bold shapes and strong contrast. Thin lines vanish.
  • A background shape (circle or rounded square) so the icon stays visible on both light and dark tabs.
  • Little padding. Browsers already put space around the icon.

Create the files

  1. Open the favicon generator.
  2. Choose a source: letters, an emoji, or your image.
  3. Pick a shape (square, rounded, circle), background (solid or gradient), colors and padding. The preview shows the icon at real tab size.
  4. Download the ZIP. It contains all the files above, including a site.webmanifest, and the tool gives you the matching HTML snippet.

If you prefer to start from an existing image, make it square first with the image resizer; a non-square logo gets letterboxed.

Add the HTML

Upload the files to your site's root folder and add this inside <head>:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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 manifest file lists the 192 and 512 px icons for Android and installed apps.

Dark mode with an SVG favicon

An SVG favicon can contain CSS, including a prefers-color-scheme media query, so a dark icon can switch to a light version when the browser uses a dark theme. PNG and ICO files can't do that, which is one more reason to include the SVG.

Why your new favicon doesn't show up

Browsers cache favicons very aggressively, sometimes for days. To check your changes:

  • open the site in a private or incognito window,
  • load the icon file directly (/favicon.svg) to confirm it's online,
  • or add a version parameter like /favicon.svg?v=2 to the link.

Converting an existing icon

If you already have a PNG icon and only need an ICO, the image converter can do that too, but the generator produces the complete set in one go.

Checklist

  • ICO and SVG in the site root, linked in the head.
  • Apple touch icon without transparency (iOS fills transparent areas with black).
  • Manifest icons with enough padding to survive round masks on Android.
  • Theme color set to match your site header.
  • Checked in a private window, in light and dark browser themes.