Favicon Generator
Generate all favicon sizes from any image or text. Download a ready-to-use .zip with ICO, PNG, Apple Touch Icon, manifest.json and HTML snippet.
Drop image here or click to browse
PNG · JPG · SVG · WebP
Options
HTML Snippet
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
About Favicon Generator
The Favicon Generator creates a complete favicon package from any image or text. Upload your logo or type an emoji, and the tool generates all required sizes — favicon.ico (16, 32, 48px), PNG files for all platforms, Apple Touch Icon (180px), Android Chrome icons (192 and 512px), site.webmanifest, and the HTML snippet to paste into your site. Everything runs in your browser via Canvas API; no files are uploaded to any server.
Use Cases
- →Generate all favicon sizes for a new website or web app from a single logo file
- →Create a favicon from your brand initials or a simple emoji in seconds
- →Get the HTML snippet and manifest.json ready to paste into your Next.js or HTML project
Tips
- ✓Use a square image for best results — the tool will center-crop non-square images automatically
- ✓SVG files produce the sharpest output at all sizes
- ✓The Text/Emoji tab is great for quick favicons using your brand initials or a single emoji
- ✓Enable "Round corners" for the iOS-style squircle appearance popular in modern browser UIs
Frequently Asked Questions
The package includes favicon.ico (multi-size: 16×16 + 32×32 + 48×48), PNG icons at 16, 32, 180, 192 and 512 pixels, site.webmanifest, and optionally an og-image.png at 1200×630. A README.html with the HTML snippet is also included.
Yes. The package covers all major use cases: favicon.ico for legacy browser tab support, PNG files for modern browsers, apple-touch-icon.png for iOS home screen shortcuts, and android-chrome icons with a web manifest for Android PWA support.
It applies a rounded rectangle clip (20% radius) to all square favicon sizes, giving your icon the iOS-style squircle appearance common in modern browser UIs. The OG image is always rendered without round corners.
The Open Graph image (1200×630px) is shown when your website is shared on social media platforms like Twitter, LinkedIn or Facebook. You can disable its inclusion with the toggle.
The tool automatically center-crops your image to a square, preserving the most central part. For best results, start with a square logo or icon. Non-square images will show a warning with this explanation.
Place all files from the zip in the root of your website (e.g. /public in a Next.js project). Then paste the HTML snippet into the <head> section of your layout. For Next.js App Router, you can also use the metadata.icons API instead of manual link tags.