Favicon Generator
Favicon generator: one image in, a package out. Six PNGs, a multi-size favicon.ico, a manifest with your colours, the head tags, and the 16 seen in a real tab.
Preview
Source image
Drop an image here
A square 512×512 or larger gives the sharpest icons · nothing is uploaded
How to use
- Drag your logo onto the Source image drop zone, or use Choose file. The icons render the moment it lands.
- Type the App name and a Short name of 12 characters or fewer, and set the two manifest colours if white is wrong for your brand.
- Read the preview, the 16 in the two tabs especially, then press Download favicons.zip.
- Unzip the files into your site root and use Copy HTML snippet to paste the link tags into your <head>.
What's in the package
Drop a logo in and every size comes out at once. Sixteen, 32 and 48 pixel PNGs for tabs, history entries and bookmarks. A 180 for the Apple touch icon. Then 192 and 512 for Android home screens and installable web apps. The favicon generator packs the three small ones into a single favicon.ico, writes site.webmanifest, and saves the five link tags as favicon.html, so nine files land in favicons.zip.
The fields below the preview feed the manifest. App name is the title Android shows on the install prompt, and Short name is the label under the icon on the home screen, capped at 12 characters, roughly where a launcher starts trimming. Theme color tints the Android toolbar and Background color fills the splash while an installed app boots. Tick Add a maskable 512 and a tenth file joins the package, the artwork padded into the 80% circle Android's adaptive shapes crop to, on the background colour. Every field rebuilds the package before the next download.
Start from a square image of 512×512 or larger when you have one. Anything non-square is scaled to fit and centred rather than cropped, so a wide wordmark keeps its proportions and picks up transparent space above and below instead of losing its ends. The preview draws the six sizes, then the 16 in a light browser tab and a dark one and the large icons on two home screens, so a dark mark that vanishes on a dark theme shows up before you ship it. Drop an SVG and it travels too, as favicon.svg with its own link tag.
A bakery's wordmark becomes a tab icon, on the second try
Harbour Lane Bakery has one logo file, a 1200×400 wordmark on a transparent background. Drop it in and the page says the arithmetic before anything else: the longer side is scaled to fit, so inside the 512 the lettering lands 512 × 170.7, and inside the 16 it is a strip 5.3 pixels high. The two browser tabs in the preview show that strip at true size, and a quiet link offers the Image Cropper.
Swap in a 1024×1024 crop of the wheat-sheaf monogram and the same six cards fill again, the three large ones captioned shown at 64 px because the page never draws a preview bigger than that. App name reads Harbour Lane Bakery and Short name takes Harbour Lane, exactly twelve characters, which is the ceiling the field enforces. Download favicons.zip · 9 files hands back the package: six PNGs, a favicon.ico whose 54-byte directory points at the three small PNGs packed behind it, a manifest naming both Android icons, and favicon.html holding the five link tags. Copy HTML snippet puts those same five lines on the clipboard for the site's head.
Good to know
- Downscaling is a plain canvas redraw with no hinting and no extra sharpening. Fine linework and any lettering in a logo turn to mush at 16 pixels, while bold single shapes survive.
- An SVG favicon is passed through as you made it. The page doesn't write one from a PNG, and a dark-mode variant inside the SVG is yours to author.
- The favicon.ico packs PNG-compressed images rather than the older uncompressed bitmaps. Every current browser reads that form and Windows has since Vista, but a legacy tool expecting classic bitmap entries will show a blank where the icon belongs.
Frequently asked questions
What exactly is inside favicons.zip?
Nine files. Six PNGs named favicon-16x16, favicon-32x32, favicon-48x48, apple-touch-icon, android-chrome-192x192 and android-chrome-512x512. Then favicon.ico with the 16, 32 and 48 pixel versions packed inside it, site.webmanifest, and favicon.html holding the markup for your head.
How big should the image I start from be?
512×512 or larger, square, and with a bit of breathing room around the artwork. Smaller sources still work, but every size above the original is an upscale and it shows on the 512 that Android uses for splash screens.
What happens if my logo isn't square?
It gets scaled until the longer side fits and then centred, which leaves transparent bands on the two short edges. Nothing is stretched and nothing is cut off. Crop it to a square first with the image cropper when you want the artwork to reach the edges.
Do I still need favicon.ico when I have PNGs?
Yes, keep it. Browsers and plenty of feed readers, link previewers and crawlers still request /favicon.ico blindly, without reading your markup. The multi-size version here answers that request with the 16, 32 or 48 pixel image, whichever the client asks for.
What does the apple-touch-icon do?
iOS and iPadOS use that 180 pixel PNG when someone adds your site to the home screen. Skip it and Safari grabs a screenshot of the page instead, which reads as a grey smudge at icon size.
Do I need site.webmanifest on an ordinary website?
Not strictly. It matters when someone installs your site as an app, since Android reads the name and the 192 and 512 icons from it. Shipping the file on a plain site costs one request and does no harm, and it saves writing one later.
Where on the server do these files go?
The site root, alongside index.html. Every path in the generated snippet and in the manifest starts with a slash, like /favicon.ico and /android-chrome-192x192.png, so files in a subfolder would need those paths rewritten.
I uploaded the new favicon and the old one still shows. Why?
Favicons are cached far more stubbornly than pages, and a hard refresh often misses them. Open /favicon.ico and /favicon-32x32.png directly in a tab, reload each with the cache bypassed, then reload your site. In Chrome, clearing the cached images for that origin sorts out the last stragglers.
Can I change the white theme colour in the manifest?
Set Theme color and Background color before you download. They are written into site.webmanifest as theme_color and background_color: the first tints the Android toolbar, the second fills the screen behind the icon while an installed app boots, and the maskable icon is padded on it too.
Missing something in Favicon Generator? Suggest a feature →
Tell someone who needs this.