Do I put favicons in src/assets?

Prefer public/ so URLs stay /favicon.ico without hashing. Hashed assets in src are harder for crawlers and bookmarks.

Works with Vue and SvelteKit?

Yes for Vite-based setups. SvelteKit similarly uses static/ or public/ depending on the adapter.

What size should a favicon be?

Ship a multi-size favicon.ico with 16, 32, and 48 px, plus PNG links for 32×32 and an apple-touch-icon at 180×180. Chromium PWAs also want 192 and 512 — generate those in the PWA icon tool.

Do I still need favicon.ico?

Yes for legacy browsers, older crawlers, and some Windows surfaces. Modern sites should also serve PNG and optional SVG favicons via .

How do I add a favicon in Next.js?

Place favicon.ico in app/ or public/, and add apple-touch-icon plus PNG icons. Or copy the head.html snippet from the export ZIP into your root layout metadata.

Can I make a transparent favicon?

Yes. Turn off fill background in the controls so PNG favicons keep alpha. ICO entries are PNG-compressed and preserve transparency in current browsers.

vite · Free tool

Generate Favicons for Vite — Free Favicon Generator

Name: App Snaps
Availability: InStock

Vite serves files from public/ at the site root. Generate favicons here, copy them into public/, and link them from index.html.

Open generator Full Launch Kit

Sizes & formats

Size	Use	Notes
16×16	Browser tab / bookmarks	Inside favicon.ico
32×32	Retina favicon	Inside favicon.ico
48×48	Windows site icon	Inside favicon.ico
96×96	Android Chrome shortcut	—
180×180	apple-touch-icon	iOS Add to Home Screen
SVG	Modern browsers	When source is SVG

Generate now

Focused generator for this tool only — files stay on your device. For every pack (ICNS, Expo, Flutter, Brand Kit, Store), open the full Launch Kit.

Full kit →

Focused tool

vite · Favicon pack

Open full Launch Kit

Live previews

Tap any tile to enlarge

Drop a logo to preview

Favicon, iOS, Android shapes, maskable, splash, OG — all live from one file.

How it works

1
Generate
Download the favicon pack.
2
Copy to public/
Vite copies public/ to the build output root.
3
Update index.html
Paste the link tags from head.html or the snippet above.

index.html

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0a0a0a" />

FAQ

Do I put favicons in src/assets?: Prefer public/ so URLs stay /favicon.ico without hashing. Hashed assets in src are harder for crawlers and bookmarks.
Works with Vue and SvelteKit?: Yes for Vite-based setups. SvelteKit similarly uses static/ or public/ depending on the adapter.
What size should a favicon be?: Ship a multi-size favicon.ico with 16, 32, and 48 px, plus PNG links for 32×32 and an apple-touch-icon at 180×180. Chromium PWAs also want 192 and 512 — generate those in the PWA icon tool.
Do I still need favicon.ico?: Yes for legacy browsers, older crawlers, and some Windows surfaces. Modern sites should also serve PNG and optional SVG favicons via <link rel="icon">.
How do I add a favicon in Next.js?: Place favicon.ico in app/ or public/, and add apple-touch-icon plus PNG icons. Or copy the head.html snippet from the export ZIP into your root layout metadata.
Can I make a transparent favicon?: Yes. Turn off fill background in the controls so PNG favicons keep alpha. ICO entries are PNG-compressed and preserve transparency in current browsers.