What favicon sizes do I need?

For a modern website, ship a scalable SVG plus a real favicon.ico containing 16, 32 and 48px fallbacks, a 180px Apple touch icon, and 192px and 512px PNGs when the site is installable. A square 48px-or-larger icon also gives Google Search a suitable source.

Should I use ICO, PNG, or SVG?

Use them together. SVG stays crisp in modern browser tabs, PNG provides exact raster sizes for Apple and PWA surfaces, and favicon.ico remains a useful root fallback and covers contexts that still request it directly.

Is favicon.ico still needed?

It is no longer the only favicon format, but it remains a low-cost compatibility fallback. This Studio builds a genuine ICO container with separate 16, 32 and 48px PNG entries rather than renaming a PNG file.

How do I add a favicon to HTML?

Upload the package to a public path, then add link elements for the ICO, SVG, PNG, Apple touch icon and web manifest inside the document head. The Install panel generates those tags using your chosen path prefix.

How do I add a favicon in Next.js App Router?

Place favicon.ico at the root of app, and use the icon and apple-icon file conventions for the other metadata files. Next.js generates the corresponding link elements. Put PWA PNGs in public and define app/manifest.ts or app/manifest.webmanifest.

Why is my old favicon still showing?

Favicons are cached unusually aggressively by browsers, operating systems and search crawlers. First confirm the deployed file itself changed, then test in a private window. Google Search updates on its own crawl schedule rather than on browser refresh.

Can a favicon have transparency?

Browser favicons can, but check them on light and dark tab bars. Apple and maskable PWA icons are more predictable with an opaque background, and the Studio warns when the maskable variant is transparent.

How does a favicon appear in Google Search?

Google may show one square favicon per hostname when the homepage declares it and both the page and file are crawlable. The image must be at least 8px square; Google recommends a file larger than 48px. Appearance is not guaranteed and refreshes can take time.

What is an Apple Touch icon?

It is the image used when someone adds a website to an Apple home screen. A 180×180 PNG is the common current choice. Apple applies the final rounded treatment, so the source should keep important artwork away from the edges.

What is a maskable PWA icon?

A maskable icon lets an operating system crop a full-bleed image into its preferred shape. Important artwork must stay inside the standardized minimum safe zone: a centred circle whose radius is 40% of the image width.

Can I use different favicons for light and dark themes?

Yes, as an enhancement. A media attribute with prefers-color-scheme can select a dark PNG in supporting browsers, or an SVG can contain theme-aware styling. Always keep a normal fallback because support and caching behavior vary.

Are uploaded images sent to a server?

No. Source images, text, symbols, generated PNGs, ICO data and ZIP packages stay in this browser. The separate live-site checker necessarily asks the Motifuse server to fetch the public URL you enter, but it never receives your source artwork.

Browser-based · Favicon and app icons

Build every icon. Check it at 16px.

One source becomes a real ICO, a scalable SVG, Apple and PWA PNGs and a manifest that validates. Motifuse previews the tiny crop and the maskable safe zone before you ship, and builds the package in this browser.

Every surface, previewedThe true 16px tab crop, the Apple home screen, the PWA icon and the maskable safe zone — not one large mockup.

Checks with a reasonTransparent margins, unsafe maskable crops and broken manifest paths are named, each with a next action.

Runs locallyYour artwork is decoded, resized, encoded and zipped in this browser and is not uploaded to Motifuse.

Icon production

Create, preview, validate and export

Production-ready favicon packages, entirely in your browser.

Runs locally

Untitled icon Autosaved

Add artwork to beginUpload a file, or load the demo artwork from the source panel.

1024×1024 master

Shared artwork and defaultsScale 88% · Padding 10% · 100% zoom

Actual size

Magnified

Ready to export7/7 checks passed10 files in packageManifest valid

Runs locallyArtwork is decoded and zipped on this device
No account requiredFree, with no watermark or gate
Open standardsA real ICO container, not a renamed PNG
Works offlineOnce the page has loaded, exports keep working

Simple process

From artwork to a deployed favicon

The installation code in the workspace uses the same filenames and path prefix as the package, so the handoff cannot drift away from the files you download.

01
Create
Upload artwork, type a monogram, choose a symbol, or render an emoji. The source is normalized on a 1024px square canvas without being stretched.
02
Review
Tune the base artwork, then inspect the tiny browser crop, Apple surface, PWA icon, maskable safe zone, and optional dark version.
03
Export
Choose a modern, minimal, PWA, legacy, or custom package. Every PNG, the multi-image ICO, manifest and README are built in this browser.
04
Install and verify
Copy the framework-specific snippet, deploy the files at the chosen path, then check direct URLs and the live page.

Built for every surface

One mark.Every crop it needs.

A logo that works on a website is not automatically a favicon. Tiny tabs need less detail, Apple icons need breathing room, and maskable icons need bleed around a protected centre.

Four ways inUpload artwork, type a monogram, choose a symbol or render an emoji — all normalised on one 1024px square.

A genuine ICO containerSeparate 16, 32 and 48px entries in one file, rather than a PNG given an .ico extension.

Hand-tuned per surfaceThe tiny crop, the Apple padding and the maskable bleed are separate decisions, because one crop does not fit all.

The maskable safe zoneA centred circle at 40% of the width, drawn over your icon, so clipping is visible before a platform does it.

A manifest that validatesEvery src resolves, every size matches the real PNG, and purpose is set — kept in sync with the files in the ZIP.

Framework install snippetsGenerated from your chosen path prefix and the exact filenames in the package, so the handoff cannot drift.

Optional dark variantA second icon for dark tab bars, declared behind prefers-color-scheme with a normal fallback kept.

Local processingDecode, sanitise, resize, encode and zip all run in this tab. Only the separate live-site checker touches the network.

One source, every surface

Where a favicon actually appears.

A favicon is not only the tiny mark in a tab. The same identity is requested by bookmarks, search results, saved home-screen shortcuts and installable web apps — and each of these previews carries your own icon.

Browser tabs
16 and 32px demand a bold silhouette.
Bookmarks and history
A recognizable mark helps people find their way back.
Search results
A square, crawlable icon can represent the hostname.
Apple home screens
A larger icon needs an opaque, optically balanced crop.
PWA launchers
Standard and maskable purposes serve different platform treatments.
Light and dark themes
Transparent artwork has to remain visible on both tab bars.

One logo does not fit every surface automatically

Tiny browser icon

Increase optical scale without stretching.
Remove transparent margins and fragile detail.
Judge the true 16px raster, not a large mockup.

Adaptive install icon

Keep important artwork inside the 40%-radius safe zone.
Use an opaque, full-bleed background.
Test more than one possible platform mask.

Production package

What the ZIP contains.

The recommended preset stays intentionally small. Legacy files are available separately instead of being presented as universally required.

Every file in the package, what requests it, and when to include it
File	Dimensions	Used by	When to include
favicon.ico	16, 32, 48	Browser fallback and direct root requests	Recommended
favicon.svg	Scalable	Modern browser tabs	Recommended
favicon-32x32.png	32×32	Browser tabs and bookmarks	Recommended
favicon-48x48.png	48×48	Search and browser UI	Recommended
apple-touch-icon.png	180×180	Apple home-screen shortcuts	Recommended
icon-192.png	192×192	PWA and Android install surfaces	For installable apps
icon-512.png	512×512	PWA install and launch surfaces	For installable apps
icon-maskable-*.png	192, 512	Adaptive platform masks	For maskable PWA
site.webmanifest	JSON	Install metadata and icon declarations	For installable apps

Practical validation

Catch favicon problems before your visitors do.

The Studio reports checks with a reason and a direct next action. It does not collapse unrelated technical checks into an unexplained score.

Transparent margins

A mathematically centered logo can still look tiny if invisible pixels surround it.

Unsafe maskable crop

Adaptive shapes can clip corners even when a square preview appears fine.

Broken paths

A valid manifest is not useful when its icon URLs resolve relative to the wrong directory.

Conflicting declarations

Themes and frameworks sometimes inject a second favicon that wins browser selection.

Incorrect MIME type

A server can return HTML for an icon path and still respond with a misleading 200 status.

Aggressive caching

A correct deployment can appear stale in browser chrome and search results for very different reasons.

Diagnostics

Troubleshooting common favicon failures.

Almost all of these are caching, a mask, or a path — and each one has a specific check rather than a suggestion to try again later.

No upload
No account
No watermark
Nothing leaves this device

Privacy by design

Your source artwork stays in this browser.

Uploads are decoded, sanitized when they are SVG, resized, encoded and zipped on this device. Object URLs are released when artwork or previews change. No source image, filename, SVG source or generated package is sent to analytics.

The live-site checker is the exception. Cross-origin browser rules require Motifuse to fetch the public URL on your behalf. That endpoint accepts only public web addresses, validates DNS and every redirect, caps response sizes, applies timeouts, and returns parsed favicon metadata rather than remote page content. It never receives your source artwork.

Nothing is uploaded

Decoding, resizing, ICO assembly and ZIP packaging all run in this tab. There is no submit step for your artwork.

Files are read on your device

The File API reads a selected image locally. The bytes go from your disk into this tab's memory and no further.

SVG sources are sanitized

Scripts and external references are stripped before a vector source is rendered, because an SVG is a document, not just a picture.

Object URLs are released

Preview blobs are revoked when artwork changes, so a long session does not accumulate copies of your icon in memory.

Nothing identifying is in analytics

An export records that it ran and which preset. Never the filename, the artwork, or the generated package.

Your work is kept in this browser

So a refresh does not lose it, the studio saves the project — and the source artwork when it is small enough — to this device's local storage. It is never sent anywhere. Clear saved in the toolbar deletes it, and New replaces it.

FAQ

Answers for designers and developers

Keep working

Quick Image EditorCrop and simplify source artwork before reducing it.SVG OptimizerClean a vector mark before using it as the scalable favicon.Image CompressorReduce large source files without sending them away.Color Contrast CheckerCheck the foreground and background pair used in a monogram.

Got a logo that needs to survive 16 pixels?

Drop it above and check the tab crop, the Apple surface and the maskable safe zone before you export.

Try another image tool

Build every icon. Check it at 16px.

From artwork to a deployed favicon

Create

Review

Export

Install and verify

One mark.Every crop it needs.

Browser tabs

Bookmarks and history

Search results

Apple home screens

PWA launchers

Light and dark themes

One logo does not fit every surface automatically

Transparent margins

Unsafe maskable crop

Broken paths

Conflicting declarations

Incorrect MIME type

Aggressive caching

The favicon does not update after deployment

Google Search still shows the old icon

The 16×16 icon looks blurry

The installed PWA icon has a white circle

The Apple home-screen icon is cropped badly

The SVG favicon is missing in an older browser

The manifest icon fails validation