To create a favicon, drop a square PNG, JPG, WebP or SVG image above, choose a transparent or solid background and some padding, then click Generate favicons. You get favicon.ico (16, 32 and 48 px), 16 and 32 px PNGs, a 180×180 Apple touch icon, 192 and 512 px Android icons, a site.webmanifest and the HTML to paste, in one ZIP.
How to use the Favicon Generator tool
- 1
Choose a source image
Drop one PNG, JPG, WebP or SVG file. A square image works best; a non-square image is centred on the canvas rather than stretched.
- 2
Set background and padding
Keep the background transparent or pick a solid colour, and use the padding slider (0–20 %) to give your icon some breathing room.
- 3
Click Generate favicons
The tool renders every size in your browser and builds the ICO file, the PNG icons and the web manifest.
- 4
Download and add to your site
Download the ZIP, put the files in your site's root folder and copy the HTML link lines shown on the page into the head section of your pages.
What files does the favicon generator create?
Browsers, phones and operating systems each look for a slightly different icon, which is why a single image is not enough. This favicon generator produces the set most sites need: favicon.ico, which contains 16, 32 and 48 pixel versions in one file; favicon-16x16.png and favicon-32x32.png for browsers that prefer PNG; apple-touch-icon.png at 180×180 for iPhone and iPad home screens; and android-chrome-192x192.png plus android-chrome-512x512.png for Android and installed web apps.
It also writes a site.webmanifest for Android and installed web apps, and a favicon-html.txt file with the HTML snippet for your pages. Everything is bundled into one ZIP, so you do not have to rename or resize anything by hand.
The same link tags are displayed on the page after generation. Copy them into the head section of your HTML template, or into your CMS or framework's head settings, and upload the files to your site's root.
Favicon sizes, transparency and the Apple touch icon
Favicons are shown very small, so simple shapes survive best. A 16 px icon has room for a letter or a bold symbol, not a full logo with a tagline. If your logo is detailed, consider using just its mark or initial as the source image, and check the 16 and 32 px results before publishing.
A transparent background lets the icon sit cleanly on light and dark browser tabs. The Apple touch icon is the exception: iOS shows transparent icons on black, so that file always gets a solid background. The padding slider adds space around the artwork, which helps icons that touch the edges look less cramped on home screens.
If your source is an SVG, it is rasterised at 4× before being scaled down, so even the 512 px icon stays sharp. For PNG or JPG sources, start from an image of at least 512×512 pixels so the largest icon does not have to be scaled up.
PNG to ICO without installing anything
The .ico format is old but still useful: many browsers and tools request favicon.ico from the root of a site by default, even when no HTML tag points to it. Building a multi-size ICO normally means installing a graphics plugin or a command-line tool. Here, the PNG to ICO conversion is part of the same click that produces the other icons.
As a favicon.ico generator it works entirely in your browser. Your logo is never uploaded to Krawly's servers and nothing is stored, which matters when the brand or product has not launched yet. It is free, with no signup and no watermark on your icons.
Tips for the best results
- Use a square source image of at least 512×512 px, or an SVG, so the largest icons stay crisp.
- Simplify for small sizes: a single letter or symbol is far more readable at 16 px than a full logo.
- Add 5–10 % padding if your artwork touches the edges, so it is not cut off by rounded home-screen masks.
- Pick a solid background colour that matches your brand, since the Apple touch icon always gets one.
- Browsers cache favicons aggressively; after replacing them, test in a private window to see the new icon.
Frequently asked questions
What favicon sizes do I need?
A practical set is a favicon.ico containing 16, 32 and 48 px, PNG favicons at 16 and 32 px, a 180×180 Apple touch icon, and 192 and 512 px icons for Android referenced from a web manifest. This generator creates exactly that set from one image.
How do I add the favicon to my website?
Unzip the files into your site's root folder, then copy the HTML lines shown after generation (also saved as favicon-html.txt) into the head section of your pages. They are the link tags that tell browsers and devices where to find your icons and manifest.
Can I use an SVG logo as the source?
Yes. SVG sources are rasterised at 4× before being scaled to each size, so the icons come out sharp. PNG, JPG and WebP also work; for those, use an image that is at least as large as the 512 px icon you want.
What if my image is not square?
It is centred on a square canvas and not stretched, so the proportions stay correct. The leftover space is transparent or filled with your chosen background colour. For the best result, crop the image to a square first.
Why does the Apple touch icon have a background?
iOS displays transparent home-screen icons on a black background, which can make dark logos disappear. To avoid that, apple-touch-icon.png always gets a solid background, even when the other icons are transparent. Choose a background colour that suits your logo.
Is my logo uploaded to generate the favicons?
No. All the resizing, the ICO packing and the ZIP creation run in your browser. The image is never sent to Krawly's servers and nothing is stored. The tool is free, with no account and no watermark.
Private by design. Every Krawly converter runs inside your browser using JavaScript and WebAssembly. Your files are not uploaded, stored or seen by anyone — when you close the tab, they are gone.