Favicon Generator
Upload a logo or type a letter or emoji, choose a background and shape, and download every favicon file a modern site needs, plus the HTML to add them.
Overview
A favicon is the small icon browsers show in tabs, bookmarks, and history. Different places ask for different files: browsers look for favicon.ico and small PNGs, iPhones and iPads use a 180 × 180 Apple touch icon when a page is added to the home screen, and Android and installable web apps read 192 and 512 pixel icons from a web app manifest.
This generator builds the whole set in one go. The favicon.ico contains 16, 32, and 48 pixel versions, so Windows and older browsers can pick the sharpest size. Large images are scaled down in steps so small icons stay crisp rather than jagged. If you upload an SVG logo, the original SVG is included too, since modern browsers render it sharply at any size.
Everything runs in your browser. Your logo is never uploaded, and the ZIP is assembled on your device.
Examples & Sample Data
From a logo
logo.svg, transparent background, square shape
favicons.zip: favicon.ico (16/32/48), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest
From a letter
Letter "A", white on #4f46e5, rounded
The same set of files with a white A centered on a rounded indigo square
How It Works
- Choose an image, or switch to a letter or emoji and type one to three characters.
- Pick a background color or transparency, a shape, and how much padding to leave around the artwork.
- Check the previews, then download the ZIP.
- Copy the files to your site's root folder and paste the HTML tags into your page's head.
Common Use Cases
Launching a new site
Get a complete, standards-compliant favicon set from your logo without an image editor.
Placeholder icons for side projects
Make a clean letter or emoji icon in seconds for a prototype, internal tool, or documentation site.
Installable web apps
Generate the 192 and 512 pixel icons and manifest a progressive web app needs to be added to a home screen.
Tips & Best Practices
- Start from a square image at least 512 × 512 pixels, or an SVG. Thin lines and small text disappear at 16 pixels, so a simplified mark usually works better than a full logo.
- The Apple touch icon is always given a solid background, because iOS shows transparent areas as black. iOS rounds its corners itself.
- Browsers cache favicons aggressively. If an old icon still shows after you update the files, open the icon URL directly or try a private window.
Frequently Asked Questions
For most sites: favicon.ico in the root folder, the 32 × 32 PNG, the 180 × 180 Apple touch icon, and a web manifest with 192 and 512 pixel icons. This generator creates all of them, along with the matching HTML tags.
No. The icons are drawn and packaged in your browser with JavaScript, so your image never leaves your device.
It's still worth including. Some browsers, feed readers, and tools request /favicon.ico directly without reading your HTML, so keeping one in the site root avoids 404 errors and missing icons.
Yes. Switch to letter or emoji mode and type the emoji. It is drawn with your device's emoji font, so the style matches what you see in the preview.
site.webmanifest tells Android and installable web apps which icons, name, and colors to use when the site is added to a home screen. Edit the name in the file if you need to change it later.
Related Tools
Explore more high-performance utilities.