Favicon generator
One picture in, every icon a website needs out, with the HTML to paste.
- Private by defaultDeleted within an hour
- Super FastProcess in seconds
- No Sign-upStart instantly
How it works
Add your images
Drag and drop, paste, or pick files. They upload over an encrypted connection.
Pick a quality or a target size
Use the quality slider, or tell it exactly how many KB or MB you need.
Download
Save each file, or grab them all at once as a ZIP.
A favicon used to be one small file. Today a site that wants to look right in a browser tab, in bookmarks, on an iPhone's home screen and as an installed app on Android needs about eight files and a few lines of HTML that point to them. This tool makes the whole set from one picture. Add your logo, check the previews, and download a ZIP.
The pack contains favicon.ico with 16, 32 and 48 pixel versions inside it, separate PNG icons of 16, 32 and 48 pixels, a 180 pixel Apple touch icon, 192 and 512 pixel icons for Android, a 512 pixel maskable icon, a web manifest, and a file called favicon.html with the lines for your page. Every icon is drawn from your original with a high-quality resampling filter, not scaled from a smaller copy.
A logo that is not square is centred with clear space around it. It is never cropped or stretched. The browser icons keep their transparency, so a logo with a see-through background sits naturally on a light or a dark tab bar. The Apple and maskable icons cannot be transparent, and are painted on the background colour you choose.
What each file is for
favicon.ico is the oldest format and still the one requested by default: a browser that finds no instructions asks for /favicon.ico. The 16 and 32 pixel PNGs serve modern browser tabs on ordinary and high-density screens. The 180 pixel apple-touch-icon is used when someone adds the site to an iPhone or iPad home screen.
The 192 and 512 pixel icons are listed in site.webmanifest, the small JSON file Android and desktop Chrome read when a site is installed as an app. The 512 pixel one is also used for the splash screen. The maskable icon is a second 512 pixel version made for Android's shaped icons, explained below.
Maskable icons and the safe zone
Android launchers cut every app icon to one shape, a circle on one phone and a rounded square on another. An ordinary icon is shrunk onto a white plate to fit, which looks like an afterthought. A maskable icon fills the whole square with colour and keeps the logo inside the middle 80 percent, the safe zone that no mask removes. This pack makes one for you: your logo, inset by a tenth on every side, on your background colour.
Choosing the source picture
Start from the largest, cleanest version of your logo. An SVG is ideal, since it has no pixels to run out of. Otherwise use a PNG of at least 512 pixels with a transparent background. If the picture is smaller, the big icons have to be enlarged, and a note under the previews tells you so. Avoid a JPG with a white box around the logo: the box becomes part of every icon.
Detail that reads well at 512 pixels can turn to mush at 16. Look at the smallest preview. If the full logo is unreadable there, consider using only its symbol or first letter for the favicon.
Installing the pack
Unzip the files into the root folder of your site, so that favicon.ico answers at yoursite.com/favicon.ico. Paste the lines from favicon.html inside the head element of your pages, or of your template. If the files have to live in another folder, change the paths in those lines and in site.webmanifest to match. Browsers cache favicons stubbornly, so open the site in a private window to see the new one.
Frequently asked questions
Which sizes are in the pack?
16, 32 and 48 pixels in favicon.ico and as PNG files, 180 pixels for Apple, 192 and 512 pixels for Android, and a 512 pixel maskable icon.
Can I use an SVG logo?
Yes, and it gives the sharpest result at every size. PNG, JPG, WebP and many other formats work too.
Why does my icon have a white background on the iPhone?
Apple does not support transparency in home screen icons, so the picture is painted on the background colour set in the panel. Change that colour to suit your logo.
Do I need all of these files?
For a plain website, favicon.ico and the two small PNGs are enough. The Apple icon and the manifest matter when visitors save your site to a phone.
What do the name fields change?
They are written into site.webmanifest and appear as the label under the icon when the site is installed on a phone. The pictures are not affected.
Is my logo stored?
No. It is processed on our own servers and deleted once the ZIP has been sent back to you.
Related tools
- Convert PNG to ICOMake a favicon or a Windows icon from any picture, with every size in one file.
- Convert SVG to PNGA vector drawing as a picture every program accepts.
- Resize an imageSet the size in pixels or percent and see the output dimensions before you download.
- Compress a PNGMake PNG files smaller while keeping sharp edges and transparency intact.