What is a favicon and how to make one from your logo (2026)

A favicon is the tiny icon that represents your site in a browser tab, bookmark, or phone home screen. Make it from your logo's symbol, simplify it so it reads at 16–32 pixels, and ship the minimal 2026 file set: an SVG, an ICO fallback, and a 180×180 apple-touch-icon.

By LogoSagaPublished
On this page
  1. What is a favicon?
  2. Why does a favicon matter?
  3. The favicon sizes and formats you need
  4. How to make a favicon from your logo
  5. Linking a favicon in your HTML
  6. Bonus: a favicon that adapts to dark mode
  7. Testing your favicon
The same mark shown at favicon sizes, including a browser-tab-sized version.
A favicon is your logo's mark, simplified to stay clear at tiny sizes.

What is a favicon?

A favicon (short for "favorite icon") is the small square image that represents a website in a browser tab, a bookmark, a history entry, and a phone home screen. It is almost always a simplified version of a brand's logo — specifically the mark, since there is no room for the full name at that size.

Why does a favicon matter?

A favicon is a small but constant piece of branding. With a dozen tabs open, it is often the only way someone spots your site at a glance, and a saved-to-home-screen icon sits beside polished app icons. A crisp, on-brand favicon looks considered; a missing or blurry one looks unfinished.

The favicon sizes and formats you need

You do not need the dozen icons old tutorials list. In 2026 the minimal, reliable set is small:

FileSizePurpose
favicon.svganymodern browsers; can adapt to dark mode
favicon.ico16 + 32legacy fallback (older browsers)
apple-touch-icon.png180×180iOS home screen
PWA icons (optional)192, 512installable web apps

Sizes like 64×64, 96×96, and 128×128 that older guides recommend are obsolete — skip them. The .ico is a fallback, not the main file: browsers that support SVG will prefer it.

  1. Start from the mark, not the full logo — the name will not read at tab size.
  2. Simplify for tiny sizes. Drop fine detail, thin lines, and subtle gradients that disappear at 16–32 pixels. Favor bold shapes and high contrast.
  3. Keep it square with a little padding so it is not cramped against the tab edges.
  4. Export the set — SVG, ICO, and the 180×180 PNG — from your logo's vector master.
The LogoSaga editor export step showing favicon.svg included with the logo files.
Exporting from the vector master gives you a favicon that matches the logo exactly.

Because SVG is the ideal master format, it is worth understanding SVG vs PNG for logos before you export.

Linking a favicon in your HTML

Point to the files from the <head> of your pages. A modern, minimal set looks like this:

<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" />

Browsers that support SVG use it; the rest fall back to the ICO.

Bonus: a favicon that adapts to dark mode

An SVG favicon can carry its own dark-mode styling. Embed a media query inside the SVG so the mark switches colors with the browser theme:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox, and Edge honor this; Safari does not yet, so pick colors that stay legible on both themes as a fallback.

Testing your favicon

Check it in a real browser tab, light and dark, and on a phone home screen. Because browsers cache favicons hard, do a hard refresh after any change — or bust the cache by renaming the file or adding ?v=2. If it looks muddy at tab size, simplify the mark further: the favicon is the honest test of how well a logo reduces.

If you build your logo with LogoSaga, the export already includes a favicon.svg alongside the logo SVG and PNG, so the favicon always matches the mark exactly.

Create a logo with a matching favicon

Frequently asked questions

What size should a favicon be?

Provide a scalable SVG plus PNG raster sizes: 32×32 is the modern tab standard, 16×16 is the classic small size, and 180×180 is the Apple touch icon. PWAs also need 192×192 and 512×512.

What format should a favicon be — SVG, PNG, or ICO?

Use an SVG for modern browsers, an ICO as a legacy fallback, and PNGs for the apple-touch-icon and PWA sizes. SVG is scalable and can even adapt to dark mode; ICO covers older browsers.

Can a favicon change in dark mode?

Yes, with an SVG favicon. Embed a prefers-color-scheme media query inside the SVG to define light and dark colors. Safari does not honor it yet, so choose a neutral color that reads on both.

Why isn't my favicon showing or updating?

Browsers cache favicons aggressively. After a change, hard-refresh, or bust the cache by renaming the file or adding a query string like favicon.svg?v=2, and confirm the link tags in the page head are correct.

Sources