Favicon Generator
Upload any image and get a complete favicon set — favicon.ico plus six standard PNG sizes — with an optional background color, padding, a real-size preview, and the HTML tags ready to paste.
How to Generate a Favicon Set
- Click the upload area or drag in a square PNG or JPG — at least 512×512px gives the sharpest results.
- The tool automatically generates five PNG sizes (16×16, 32×32, 180×180 Apple Touch, 192×192, and 512×512 Android) plus a multi-size favicon.ico file.
- Download files individually from the grid, or click "Download All Files" to save everything at once.
- Copy the ready-made HTML snippet and paste it into your site's <head> to wire up every icon.
Frequently Asked Questions
What happens if I upload a non-square image?
The tool automatically crops to a centered square before resizing - it takes the smaller of your image's width and height, then crops an equal amount off each side. If cropping would cut off too much, use the Padding option to shrink the artwork inward and add breathing room instead, combined with a Background Color (or the Transparent option) to fill the space around it.
What do the Background Color and Padding options do?
Padding shrinks your artwork inward from 0-30% before it's placed on the square canvas, useful for logos that touch the edges or need breathing room. Background Color fills the square behind it - pick any color, or check Transparent to keep the padded area see-through (only meaningful for the PNG files and favicon.ico, since those support transparency). Both regenerate the full set instantly.
How does the tool build an actual favicon.ico file in the browser?
It constructs the ICO binary format directly in JavaScript: it renders your image at 16, 32, and 48px onto canvases, converts each to raw PNG bytes, and assembles them into a single multi-resolution .ico file with a hand-written header - no external image-conversion library is involved.
Why do I need so many different favicon sizes, and what's the real-size preview for?
Different platforms request different sizes: browser tabs typically use 16x16 or 32x32, the taskbar/desktop-shortcut size is often 48x48, iOS home-screen bookmarks use the 180x180 Apple Touch icon, and Android home screens use the 192x192 and 512x512 versions. Providing all six PNG sizes plus favicon.ico ensures your icon looks sharp everywhere instead of being scaled up and blurry. The real-size preview shows your actual generated 16px, 32px, and 180px files mocked up in a browser tab, a bookmarks bar, and a phone home screen, so you can judge legibility before downloading rather than guessing from a large canvas view.
Why did my downloads happen one at a time with a small delay?
Download All Files triggers each file's download about 350ms apart rather than all at once - this avoids browsers blocking a burst of simultaneous downloads as a possible pop-up abuse pattern.
Is my source image uploaded anywhere?
No. Every crop, padding, background fill, resize, and the favicon.ico assembly itself happen locally in your browser using the Canvas API - nothing is sent to a server.