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
A favicon is the small icon that appears in browser tabs, bookmarks, and on device home screens when someone saves your website. Modern browsers and operating systems require favicons in multiple sizes and formats — a 16×16 pixel icon for the browser tab, a 32×32 for taskbars, a 180×180 Apple Touch Icon for iOS home screens, and 192×512 pixel icons for Android PWAs and app shortcuts. Getting all of these right by hand is tedious and error-prone, which is exactly the problem this tool solves.
The Favicon Generator creates a complete favicon package from a single image or text input. Upload your logo file in any common format (PNG, JPG, SVG, WebP), or type up to two characters in the Text tab. The tool redraws every required size with the Canvas API, running entirely in your browser — your image is never uploaded anywhere. The ZIP holds PNGs at 16, 32, 180, 192 and 512 pixels, a multi-size favicon.ico bundling 16×16, 32×32 and 48×48, an optional 1200×630 og-image.png for social previews, a site.webmanifest for PWA configuration, and the exact HTML snippet to paste into your site's `<head>`.
The Text/Emoji tab is particularly useful for quickly bootstrapping a project before a final logo is ready. The field takes two characters, so use an initial, a two-letter monogram or a single emoji. Set the background color, the text color and the typeface — sans-serif, serif or monospace — optionally round the corners, and you have a professional-looking placeholder favicon in under 30 seconds. Every preview size redraws automatically as you type, so there is no generate step to wait for.
How to Use Favicon Generator
- 1On the "Upload Image" tab, drop your logo onto the dashed area or click it to browse — PNG, JPG, SVG, and WebP are all supported.
- 2Alternatively, switch to the "Text / Emoji" tab and type your brand initial, a two-letter monogram, or a single emoji — the field holds two characters.
- 3In the Text tab, set the background color, the text color, and the font (sans-serif, serif or monospace) to match your brand.
- 4Tick "Round corners" for the iOS squircle clip, and leave "Include OG Image (1200×630)" on to add a social preview to the package.
- 5Watch the preview strip — 16, 32, 180, 192 and 512 pixel versions redraw automatically as you edit. There is no generate button.
- 6Click "Download .zip" to get every PNG size, the multi-size favicon.ico, site.webmanifest, README.html with the snippet, and og-image.png when enabled.
- 7Paste the HTML snippet into the `<head>` of your site and upload the files to your root directory.
Use Cases
- →Generate a complete favicon package for a new website or web app from a single logo file
- →Create a placeholder favicon from brand initials to use while waiting for a final logo
- →Get the site.webmanifest and HTML snippet ready to paste into a Next.js or plain HTML project
- →Regenerate favicons after a rebranding to update all sizes at once
- →Create emoji favicons for personal projects, dev tools, or internal dashboards
- →Produce high-resolution Android Chrome icons (512×512) for PWA installation prompts
- →Ship a matching 1200×630 Open Graph image in the same package so shared links preview correctly on social platforms
Tips
- ✓Use a square image for best results — the tool will center-crop non-square inputs automatically
- ✓SVG sources are re-rasterized at every size, so they stay crisp — just make sure the file declares explicit width and height attributes
- ✓The favicon.ico is a real multi-size icon: 16×16, 32×32 and 48×48 in one file, which is what legacy Windows and older browsers expect
- ✓Enable "Round corners" for the iOS squircle look that matches modern app icons on Apple devices — the OG image is always rendered square
- ✓Always place favicon files in the root directory of your domain for maximum browser compatibility
- ✓The `site.webmanifest` file is required for your site to qualify as a Progressive Web App
- ✓Test your favicon on both light and dark browser themes to ensure it is visible in both
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.
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.
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.