Guide · 5 min read

Favicon size, format and HTML: one drawing, every place it shows.

What size a favicon should be, which files to ship, the HTML to paste, a favicon that follows dark mode, and why yours is not showing, on one icon in every place it shows.

16 px · a browser tab
Leeward: sailing lessons
leeward-sailing.example
48 px · Google's results: go larger
Leewardhttps://leeward-sailing.exampleLeeward: sailing lessons
180 px · an iPhone's home screen
Leeward
Switch the browser's theme

A favicon is the small icon a browser shows beside a page's title, in its tabs, its bookmarks and Google's results. Draw it square from your logo's mark alone and ship three files: an icon.svg for every size and dark mode, a favicon.ico at 32 px for older browsers and Google, and a 180 px apple-touch-icon.png on a solid ground for iPhones. Three lines of HTML link them. Add 192 and 512 px icons only for a site people install as an app.

Updated 10 sources ↓

The sizes

What size should a favicon be?

Square, in a few sizes: 32 px for browser tabs, more than 48 px for Google's results, 180 px for an iPhone's home screen, and 192 and 512 px for a site people install as an app. An SVG favicon is every size at once.

A tab draws a favicon at 16 px, so a sharp screen paints it with 32 pixels. A PNG made at 16 px is stretched there; the SVG is drawn again for the screen.

  • 16 pxa browser tab
  • 32 pxfavicon.ico
  • 48 pxGoogle's results: go larger
  • 180 pxan iPhone's home screen
  • 192 pxan installed app
  • 512 pxan app's largestshown at 38 %
A 16 px PNG on a sharp screen: 16 pixels stretched over 32, so its edges blur.
The SVG on the same screen: drawn again at 32 pixels, every edge sharp.

The formats

ICO, PNG or SVG: which format should a favicon be?

All three, each for its job: an SVG for the tab in current browsers, an ICO at your site's root for older ones, and PNGs for Apple's home screen and installed apps. Google Search reads the ICO and the PNG; it skips the SVG.

  • SVG

    Holds
    Every size, and a dark mode
    Read by
    Chrome, Edge and Firefox; Safari from version 26
    Use it for
    The tab

  • ICO

    Holds
    Several sizes in one file
    Read by
    Every browser, and Google Search
    Use it for
    The file at /favicon.ico

  • PNG

    Holds
    One size in each file
    Read by
    Every browser, Google Search and Apple
    Use it for
    The Apple icon and app icons

The HTML

What is the HTML for a favicon?

Three link tags in your page's head: the ICO, the SVG and the Apple icon. Add a fourth, the web manifest, only for a site people install as an app.

For an app, add <link rel="manifest" href="/site.webmanifest"> and the manifest's two icons. Next.js writes these tags itself from the files you put in its app folder.

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

From your logo

Start from your logo's mark alone, get it as an SVG, then save the few PNGs from that one drawing.

Drop your logo. Get its SVG.

  1. Take the mark alone: a name in letters turns to a smudge at 16 px.
  2. Drop it here: VecSnap draws it again as shapes, an SVG that stays sharp at every size.
  3. Square the canvas around the mark, with a little room on each side.
  4. Export the PNGs from that SVG: 32 px for the ICO, 180 px on a solid ground for Apple, 192 and 512 px for an app.
  5. Paste the HTML above into every page's head.

Dark mode

How do I make a favicon that works in dark mode?

Put the dark colors in the SVG itself: one style line repaints the shapes that would vanish on a dark tab, and the browser applies it when its theme is dark.

A PNG or an ICO cannot change with the theme, so give it colors that read on both. Squarespace takes a second favicon for dark mode instead.

Without the line
Leeward: sailing lessons
leeward-sailing.example
Leeward: sailing lessons
leeward-sailing.example
With it
Leeward: sailing lessons
leeward-sailing.example
Leeward: sailing lessons
leeward-sailing.example
icon.svg, under its <svg> line
<style>@media (prefers-color-scheme: dark){[fill="#202e49"]{fill:#5b7bb8}[stroke="#202e49"]{stroke:#5b7bb8}}</style>

Not showing

Why is my favicon not showing?

Usually your browser still shows the copy it saved, or Google has not crawled your home page since you changed it.
  • Your browserIt kept the old one
    • A browser saves a favicon by its address and keeps it
    • Give the new file a new name, or add ?v=2 to its link
    • This site's own icon stayed old in Safari until its address changed
  • No linkIt is not where browsers look
    • With no link tag, a browser asks for /favicon.ico
    • Put that file at your site's root
  • GoogleIt has not been back yet
    • Google shows a new favicon after it crawls your home page
    • That takes from days to weeks
    • URL Inspection in Search Console asks it to come
  • GoogleIt cannot read the file
    • Square, at least 8 px, more than 48 px advised
    • In a format Google reads: an ICO or a PNG, never an SVG
    • One favicon for each hostname: a subdomain has its own
  • GoogleIt cannot reach the file
    • Its crawlers must reach your home page and the icon
    • Nothing in robots.txt may block them
    • Keep the icon at the same address
  • SafariIt is older than version 26
    • Safari reads an SVG favicon from version 26
    • Before it, the ICO or PNG is what shows

Your platform

How do I add a favicon on WordPress, Shopify, Squarespace or Wix?

Each has one setting for it, and each asks for a square image: upload the size it asks for.

  • WordPress

    Where
    Appearance › Customize › Site Identity › Site Icon
    What it asks for
    A square, at least 512 px

  • Shopify

    Where
    Online Store › Edit theme › Theme settings › Favicon
    What it asks for
    32 × 32 px

  • Squarespace

    Where
    The Favicon panel
    What it asks for
    100 to 300 px, a PNG; a second one for dark mode

  • Wix

    Where
    Settings › Website settings › Favicon
    What it asks for
    A multiple of 48 px, or an SVG; a Premium plan and a domain

  • Next.js

    Where
    app/favicon.ico, app/icon.svg, app/apple-icon.png
    What it asks for
    Any size: the tags are written for you

Questions

Favicons, answered.

Sources

The small icon a browser shows beside a page's title: in its tabs, its bookmarks and its history, and beside your site's name in Google's results.

More guides

Keep reading

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.