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 a letter, emoji, or short abbreviation in the Text tab. The tool generates every required size using the Canvas API, running entirely in your browser — your image is never uploaded anywhere. You also get a site.webmanifest file 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. Choose a background color, pick an icon letter, optionally round the corners for a modern look, and you have a professional-looking placeholder favicon in under 30 seconds.
How to Use Favicon Generator
- 1Click "Upload Image" and select your logo or icon file — PNG, JPG, SVG, and WebP are all supported.
- 2Alternatively, switch to the "Text / Emoji" tab and type your brand initial, abbreviation, or any emoji.
- 3Adjust the background color and corner rounding style to match your brand.
- 4Click "Generate Favicon Package" to create all sizes instantly.
- 5Download the ZIP file containing all PNG sizes, favicon.ico, site.webmanifest, and the HTML snippet.
- 6Paste 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
Tips
- ✓Use a square image for best results — the tool will center-crop non-square inputs automatically
- ✓SVG source files produce the sharpest output at all sizes due to their vector nature
- ✓Enable "Round corners" for the iOS squircle look that matches modern app icons on Apple devices
- ✓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.