DevTools
Language

Favicon Generator

DevTools Favicon Generator uploads your logo and builds favicon.ico, favicon.svg, apple-touch-icon.png, Android Chrome PNGs, and site.webmanifest locally in your browser—with live previews for browser tabs, Google search, iOS, and Android. Free, no sign-up, images never uploaded to servers.

Favicon Generator

Upload PNG/JPG/WebP/SVG, preview in real time, and generate favicon.ico, favicon.svg, Apple Touch Icon, Android PNGs, and site.webmanifest.

Drop favicon image here

or click to select PNG / JPG / WebP / SVG (max 5 MB)

About this tool

Upload a site logo (PNG/JPG/WebP/SVG) to produce a complete favicon package. Adjust corner radius, size, and borders on the main icon; Apple Touch Icon and Web App Manifest sections support dedicated assets or reusing the main image with separate radius and size. Android fields write app name and short name into site.webmanifest. Output follows RealFaviconGenerator-style structure, rendered with Canvas in the browser.

How to use

  1. Drag or select a logo image—source ≥512×512 and near-square works best.
  2. Preview browser and Google search results; tune main icon settings.
  3. Configure Apple Touch Icon and Web App Manifest (main or dedicated assets plus app info).
  4. Click Generate and Download Favicon Package, unzip into your Next.js public/ folder, and add links from favicon-html-snippet.txt to app/layout.tsx or metadata.icons.

FAQ

How do I generate a favicon for my website?

Upload a logo, adjust main and platform settings, then download the favicon package. Unzip into public/, then add the link and manifest tags from favicon-html-snippet.txt to your layout or metadata.icons.

What is inside favicons.zip?

favicon.ico (16/32/48), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and favicon-html-snippet.txt with reference examples.

How is favicon.svg created?

The 512×512 main image is rasterized to PNG in the browser and embedded in an SVG container so it matches favicon.ico and PNG sizes and stays sharp on high-DPI screens.

Which sizes are in favicon.ico?

16×16, 32×32, and 48×48 embedded as lossless 32-bit BMP. Browsers pick the appropriate size for tabs and bookmarks.

Can Apple and Android icons differ?

Yes. Main favicon drives browser tabs and favicon.ico. Apple Touch Icon and Web App Manifest each support main or dedicated images with independent radius and size settings.

Related tools