Favicon HTML link tags

Client

After exporting PNGs, paste the right link tags into your document head. Set a base path, pick a size to export, and copy single lines or a full favicon block.

We read width and height locally, then resize with center crop. Max 8 MB.

HTML link tags

Set the folder where PNGs will live (site root is /). Copy tags into your document <head>.

Current export (32×32)

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Full favicon block

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">

Export size

?

Choose the pixel size your HTML link, manifest, or platform expects. Preview shows how center crop will look at that size.

Common use cases

  • Drop favicon, apple-touch-icon, and PWA link tags into a static site or template.
  • Share exact head markup with a teammate after exporting icons.
  • Avoid typos in sizes attributes when wiring a new deploy.

Common mistakes to avoid

  • Pointing href at files you never uploaded

    Match each href to the filename you actually deploy. The snippet uses conventional names you can rename.

  • Only adding one link tag

    Tabs, iOS, and PWAs read different sizes. Copy the full block or add rows per surface.

FAQ

Which favicon link tags do I need?

At minimum, many sites ship 32×32 for tabs, 180×180 apple-touch-icon, and 192/512 manifest icons for installable PWAs.

Do I still need favicon.ico?

Modern sites often use PNG link tags only. Legacy stacks may still expect favicon.ico at the site root.

Common search terms

Phrases people search for that match this tool. See the full long-tail keyword index.

  • favicon size
  • favicon sizes
  • favicon dimensions
  • favicon image size
  • size of a favicon
  • size of favicon
  • favicon ico size
  • wordpress favicon size
  • tamaño de favicon
  • tamaño del favicon
  • favicon size cheat sheet
  • check favicon dimensions online
  • favicon size 32x32
  • favicon 16x16
  • apple touch icon 180x180 size
  • pwa favicon size 512
  • favicon html link tag
  • favicon size for website
  • website icon size
  • recommended favicon size
  • ideal favicon size
  • favicon size chart
  • favicon width and height
  • browser tab favicon size
  • standard favicon dimensions
  • what size should favicon be
  • how to add favicon
  • how to create favicon
  • wordpress site icon size
  • favicon size wordpress
  • android favicon size
  • iphone favicon size
  • mobile favicon size
  • make favicon from png
  • favicon size list
  • favicon size table
  • favicon pixel size
  • best favicon size
  • correct favicon size
  • favicon sizes and dimensions
  • favicon.ico size
  • size of favicon ico
  • website favicon size
  • standard favicon size
  • favicon size in pixels
  • how big is a favicon
  • favicon resolution
  • apple touch icon size
  • what is the favicon size
  • best size for favicon
  • favicon standard size
  • web favicon size
  • site favicon size

More tools

Related utilities you can open in another tab—mostly client-side.