Favicon Generator
One image becomes a complete favicon set — .svg, .ico, PNG sizes, apple-touch-icon, and maskable manifest icons. Pick what you need, preview it, then export a ZIP with ready snippets. Runs in your browser.
Source image
Square PNG or SVG, ≥ 512px is best. SVG unlocks favicon.svg.
Favicon style (.ico + PNG favicons)
App icons (iOS / Android)
Icon background (opaque)
iOS icons can’t be transparent, and Android crops maskable icons to a shape — so these get a solid background and extra safe-zone padding.
Files to generate
Classic
PNG favicons
Apple
Android / PWA
Web app manifest
Theme color
site.webmanifest
{
"name": "My Site",
"short_name": "My Site",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0f172a",
"background_color": "#0f172a",
"display": "standalone",
"start_url": "/"
}Paste into your site
HTML — in <head>
<link rel="icon" href="/favicon.ico" sizes="any" />
<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="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#0f172a" />
<link rel="manifest" href="/site.webmanifest" />Next.js — metadata
// app/layout.tsx
export const viewport = { themeColor: "#0f172a" };
export const metadata = {
manifest: "/site.webmanifest",
icons: {
icon: [
{ url: "/favicon.ico", sizes: "any" },
{ url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
{ url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
{ url: "/favicon-48x48.png", type: "image/png", sizes: "48x48" },
{ url: "/favicon-96x96.png", type: "image/png", sizes: "96x96" },
],
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
},
};Upload an image to preview every icon
Includes the selected icons + snippets, bundled as a ZIP.