Favicon Generator
Turn any image into a complete favicon set — 16×16, 32×32, 48×48 and the 180×180 Apple touch icon — in one click.
The four files you get
One click produces four PNGs, each downloaded as its own file:
| File | Size | Typical use |
|---|---|---|
favicon-16x16.png | 16 × 16 | Browser tabs |
favicon-32x32.png | 32 × 32 | Tabs on high-density screens, bookmarks |
favicon-48x48.png | 48 × 48 | Larger icon slots and shortcuts |
apple-touch-icon.png | 180 × 180 | iPhone and iPad home-screen icon |
Because four downloads start at once, your browser may ask whether to allow multiple downloads from the page. Allow it, or you'll only get the first file.
The tool doesn't make a favicon.ico file or the larger icons a web-app manifest uses.
Start from a square image
Each size is made by drawing the whole image into a square. Nothing is cropped or padded, so a non-square source is distorted: a 1200 × 630 banner gets squeezed sideways into every icon. Crop your logo to a square first.
Detail disappears fast at 16 pixels. A full wordmark becomes an unreadable smudge, while a single letter, a simple symbol or a bold shape survives. If you have a separate icon version of your logo, use that.
PNG and WebP sources keep their transparency, so the icon sits cleanly on light and dark tab bars. A JPG source has no transparency, so its background colour shows as a square.
Adding the icons to your site
Upload the four files to your site, then add a link element for each one in the head of your pages, pointing at the file's URL:
| rel | sizes | File |
|---|---|---|
icon (type image/png) | 16x16 | favicon-16x16.png |
icon (type image/png) | 32x32 | favicon-32x32.png |
icon (type image/png) | 48x48 | favicon-48x48.png |
apple-touch-icon | 180x180 | apple-touch-icon.png |
If you use a site builder or CMS, look for its favicon or site-icon setting instead; it usually wants a single square image and makes its own sizes.
When the old icon won't go away
Browsers cache favicons stubbornly. After uploading new files, open the icon's URL directly to confirm the new one is live, then hard-refresh your page or check in a private window. The icon is generated in your browser, so your logo file isn't uploaded anywhere by this tool.
How to use this tool
- 1Choose an image (JPG, PNG or WebP).
- 2Adjust the options if needed.
- 3Click Process & download.
Frequently asked questions
Do I still need a favicon.ico file?+
If your pages link the PNG icons, modern browsers use those. Without any icon link, browsers look for /favicon.ico at the root of your site, which this tool doesn't create. Use an ICO converter if your platform specifically asks for one.
Why does my 16 × 16 icon look blurry?+
Squeezing a detailed image down to 256 pixels in total throws most of it away. Simplify the design, thicken thin strokes, and test the 16-pixel file at its real size rather than zoomed in.
Can I make a favicon from an SVG logo?+
The file picker accepts PNG, JPG and WebP only. Export your SVG as a large square PNG first, then use that here.
Does the Apple touch icon need a background?+
The tool keeps whatever your source has. If your logo is transparent, the 180-pixel icon will be too, so check how it looks on a phone home screen and add a solid background in your source image if needed.
Embed this tool on your website
Free to use on blogs, school sites and intranets. Paste this code into your page's HTML; please keep the credit line.
<iframe src="https://utilityapp.lat/embed/image/favicon-generator" title="Favicon Generator" width="100%" height="600" style="border:0;max-width:760px" loading="lazy"></iframe> <p style="font-size:13px"><a href="https://utilityapp.lat/image/favicon-generator">Favicon Generator</a> by UtilityApp</p>