Favicon generator
Turn any image (ideally square) into a complete set of favicons for your site: a multi-resolution favicon.ico (16, 32 and 48 px), the PNGs for modern browsers (16, 32, 192 and 512 px), the 180 px apple-touch-icon and the HTML snippet ready to paste into the <head>. Download it all in a ZIP. Choose whether to fit the image with padding or fill the square by cropping to the center, and a background color or transparency. Everything happens in your browser: your image is never uploaded to any server.
Drop your image here
or click to choose it
PNG · JPG · WEBP · SVG · best 512×512
Upload an image (preferably square) to generate the icons.
Generated icons
Add it to the <head> of your website
Upload the files to the root of your site and paste this code.
How to create your favicon
- Drag in an image or click to choose it (preferably square and at least 512 px).
- Choose whether to fit it with padding or fill the square by cropping to the center.
- Select a background color or leave it transparent.
- Click “Generate icons” and review the preview of each size.
- Download each icon or the ZIP with everything, and copy the HTML snippet into the <head> of your website.
Frequently asked questions
What is a favicon?
It is the small icon that appears in the browser tab, in bookmarks and in your history. It helps identify your site at a glance and reinforces your brand.
What files does this tool generate?
A multi-resolution favicon.ico (with 16, 32 and 48 px inside), PNG icons of 16, 32, 192 and 512 px, a 180 px apple-touch-icon for iOS, and an HTML snippet with the corresponding <link> tags. Everything can be downloaded together in a ZIP.
What size should my image be?
Ideally a square image of at least 512×512 px so the large sizes look sharp. If it is not square, choose “Fit” (adds padding) or “Fill” (crops to the center).
What is the difference between .ico and .png?
The .ico is the classic format that every browser understands (including old ones) and can hold several sizes in a single file. The .png files are for modern browsers and specific uses, such as the apple-touch-icon. Using both gives maximum compatibility; that is why the HTML snippet includes them.
Where do I put the files and the code?
Upload the files to the root of your site (the same folder as your index) and paste the HTML snippet inside the <head> tag of your pages. If you place them in another path, adjust the href values.
Can I use transparency?
Yes. Leave the background on “Transparent” and the PNGs will keep the alpha channel. Keep in mind that some contexts (such as certain iOS icons) look better with a solid background; in that case, choose a color.
Is my image uploaded to any server?
No. The icons are generated in your browser with the Canvas API; your image never leaves your device and the tool works offline once loaded.
Does it accept SVG as input?
If your browser can display the SVG, it is rasterized to the sizes listed. For vector logos it usually gives a great result, because it scales without losing sharpness.