Next.js favicon size

Client

Next.js projects usually reference favicons from 32×32 and 180×180 link tags in app/layout. Export squares here, place files in your public folder, then copy link tags.

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

  • Prepare Next.js favicon assets before deploy.
  • Confirm Next.js favicon requirements before updating HTML link tags or a CMS upload field.
  • Export a square PNG locally after upload—no server processing of your logo.

Common mistakes to avoid

  • Using a non-square logo without padding

    Center crop helps but cannot fix edge-to-edge text. Add margin before export.

  • Pointing link href at files not copied into public/.

FAQ

What favicon size for Next.js?

Same pixel standards as any site—32×32 tabs, 180×180 Apple touch, 512×512 for PWA or CMS.

Can I export the PNG in my browser?

Yes. Upload your image, pick the target pixel size, and download—processing stays on your device.

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.