Tool 027 / files / free / runs locally
Favicon Generator
Upload a square-ish logo or icon and get a multi-size favicon.ico plus individual PNGs (16, 32, 48, 180 for Apple touch icon) ready to drop into a site's public folder. Every resize and the ICO packing itself happens on the Canvas API in your browser, so the source image is never sent to a server. A copy-paste HTML snippet for the head tag is included.
Drag & drop a logo or icon here, or click to choose a file.
Square images work best. Stays on your device.
How it works
Drop in a logo and this produces the two files a site actually needs: a real multi-size favicon.ico containing 16, 32, and 48 pixel images, and a 180 pixel apple-touch-icon.png for iOS home screens. It also prints the two link tags to paste into your head.
The source image is centre-cropped to a square, then drawn into each target size with high-quality canvas smoothing, so a 1024 pixel logo downsamples cleanly instead of aliasing. The ICO file is assembled by hand in the browser: a 6 byte header, one 16 byte directory entry per size, and the PNG bytes of each image appended after it. Embedding PNG data inside ICO is read correctly by every operating system and browser that renders favicons today.
The image never leaves your device. The whole pipeline is a local object URL, a canvas, and a blob download, which matters when the logo is an unreleased brand asset.
How to use it
- Drag a logo or icon onto the drop zone, or click it to pick a file.
- Check the 16, 32, and 48 pixel previews to see how the mark holds up when small.
- Download favicon.ico and apple-touch-icon.png.
- Put both files in your site root and paste the two link tags into the head of your pages.
Worked examples
Input: A 512 by 512 PNG logo
Output: favicon.ico containing 16, 32, and 48 pixel images, plus a 180 pixel apple-touch-icon.png
One square source produces every size a normal site needs.
Input: A 1200 by 400 wide wordmark
Output: A square icon showing only the middle 400 by 400 pixels of the wordmark
Non-square input is centre-cropped, so crop a square version of a wide logo first.
Edge cases and limits
- Non-square images are centre-cropped, never letterboxed or padded. The sides of a wide logo are cut off.
- The ICO contains PNG-encoded entries rather than legacy BMP data. That is correct for every current browser and OS, but Internet Explorer 10 and older cannot read it.
- Only 16, 32, 48, and 180 pixel outputs are produced. The 192 and 512 pixel PNGs a PWA manifest wants are not generated.
- There is no background colour, padding, or rounded-corner option. What you upload is what gets scaled.
- There is no separate dark-mode icon variant, and no SVG favicon output.
- SVG input works only if your browser can rasterise it, which usually requires the file to declare an intrinsic width and height.
Common mistakes
- Uploading a detailed logo with fine text. At 16 pixels it turns to mush; simplify to a single mark or initial for the small sizes.
- Feeding in a wide wordmark and losing its ends to the centre crop. Make a square version first.
- Placing favicon.ico somewhere other than the site root. Browsers request /favicon.ico by default even when a link tag points elsewhere.
- Skipping the apple-touch-icon, which leaves iOS to generate a blurry screenshot thumbnail when someone adds the site to their home screen.
- Expecting the new icon to appear immediately. Favicons are cached hard; use a private window or a cache-busting query to verify.
Frequently asked questions
What sizes are included in the generated favicon.ico?+
The ICO file bundles 16x16, 32x32, and 48x48 pixel versions of your image in one file, which covers browser tabs, bookmarks, and Windows shortcuts. A separate 180x180 PNG is generated for the Apple touch icon used on iOS home screens, since Apple doesn't use the .ico format.
Does the source image need to be square?+
It doesn't have to be, but it should be for best results. Non-square images are center-cropped to a square before resizing, so important content near the left or right edges of a wide image may get cut off. Crop to square yourself first for full control.
Where do I put favicon.ico and the HTML tags?+
Place favicon.ico in your site's root (or public) folder so it's served at /favicon.ico, and put the apple-touch-icon PNG alongside it. Paste the generated <link> tags into your page's <head> to make browsers and iOS pick up the right file explicitly rather than relying on the default /favicon.ico lookup alone.
Why does a favicon.ico need more than one size inside it?+
Different surfaces request different sizes: browser tabs use 16 pixels, bookmark bars and some task switchers use 32, and Windows shortcuts use 48. A single-size ICO gets scaled by the operating system and looks soft. Packing all three lets each surface pick the one drawn for it.
Do I still need favicon.ico if I have a PNG icon?+
It remains the safest baseline. Browsers request /favicon.ico from the site root whether or not you declare a link tag, and search engines and feed readers look for it too. Serving both the ICO and the apple-touch-icon covers everything mainstream.
Related tools
More Files & Media tools that run entirely in your browser.