Favicon Generator
Create multi-size website icons from a single image: from 16 to 512 pixels: with thumbnail previews, per-size downloads and ready HTML code. 100% local.
How to use
- Prepare a square master image (512×512 or larger recommended; transparent PNG works best), then drag it onto the dashed area or click to select it.
- Seven PNG icons: 16, 32, 48, 64, 128, 256 and 512 pixels: are generated automatically with thumbnail previews.
- Click any thumbnail to download that size alone, or hit "Download all" to save every size one by one.
- Copy the HTML snippet from the result area and paste it into your website's
<head>so browsers pick the right size automatically. - Non-square images are scaled to fit inside a square canvas, leaving transparent padding. Crop to a square first if you need edge-to-edge icons.
FAQ
Why do I need multiple icon sizes?
sizes attribute lets the browser choose the best one for each context, so icons always look crisp.Is it a problem that no .ico file is generated?
Is my image uploaded anywhere?
Why does "Download all" trigger multiple downloads?
How to use
- Prepare a square master
Start from a square PNG of 512×512 or larger, ideally with a transparent background. Non-square images are scaled onto a square canvas with transparent padding.
- Drop and auto-generate
Drag the image into the dashed zone or click to pick it. Seven PNG sizes appear as thumbnail previews automatically: 16, 32, 48, 64, 128, 256 and 512 pixels.
- Inspect the small sizes
Review each thumbnail, focusing on 16 and 32 pixels where browser tabs render. Detailed master images often blur into a blob at these tiny sizes.
- Download the icons
Click any thumbnail to download just that size, or press download all to save all seven one by one. Your browser may ask to allow multiple downloads; choose allow.
- Paste the HTML snippet
Copy the generated HTML code into your website head. Browsers read the sizes attribute and pick the best-matching icon for tabs, bookmarks and home screens.
About this tool
A favicon is the icon shown in browser tabs, bookmark bars and mobile home screens. Each context requests a different size: tabs use 16 or 32 pixels, while taskbars and touch devices want 128 up to 512 pixels. This tool generates seven PNG tiers from one master image and hands you an HTML snippet with sizes attributes. The browser then picks the sharpest option for every situation on its own.
All scaling runs locally on an in-browser Canvas and the master image is never uploaded. The output is plain PNG, which every modern browser fully supports; a legacy .ico file is only needed for very old browsers. Favor a square master with simple shapes, strong contrast and transparency. Photo-like artwork usually becomes unrecognizable once shrunk to 16 pixels, so simplify the graphic first.
How it works
The browser reads the sizes attribute and picks the tier closest to what the context needs. Tabs usually take 16 or 32 pixels, high-density displays step up one tier, and installed PWA icons draw from the 192 and 512 entries. Generating all seven sizes at once removes manual-scaling drift. A one-step 512-to-16 downscale can differ noticeably in recognizability from a properly staged resize. The small sizes are exactly where favicons are won or lost.
A favicon that refuses to update is almost always a caching story. Browsers cache site icons aggressively, so a normal refresh often changes nothing. Verify in a private window, or append a version query to the link to force a refetch without touching the structure. Theme coverage matters too: tab bars ship in light and dark variants, and a pure white or pure black mark disappears on one of them. A fine outline or a translucent backing disc keeps the figure readable in both, and a preview under each theme before launch confirms it.
When to use it
- Shipping a brand-new site
Generate the full size set and paste the head snippet before deployment. Tabs, bookmarks and phone home screens are covered on day one. Early visitors never meet the browser's default globe icon, which costs credibility.
- Configuring PWA install icons
A web app manifest's icons field expects the 192 and 512 tiers, both of which come straight from the generated set. Home-screen installs stay crisp and one common Lighthouse warning disappears from the audit at the same time.
- Telling intranet tabs apart
When the dashboard, monitoring and documentation tools all sit open at once, a distinct letter mark per site helps. Tab switching becomes instantaneous, and nobody hovers over each tab in turn just to read its title.
Tips & tricks
- Build the master from a single letter or simple symbol so it stays recognizable even at 16 pixels.
- If the source is smaller than 512 pixels, the large sizes are upscaled and may look soft. Use the highest-resolution original you have.
- Non-square masters get transparent padding. Crop to a square first if you want the icon edge-to-edge.
Things to watch
- The new icon will not show up
Icon caching is aggressive: replacing the file and refreshing normally often changes nothing. Check the new artwork in a private window, or add a version parameter to the link URL so every client is forced to refetch.
- Pure white vanishes on light themes
Tab bars ship in light and dark themes, and a pure white or black mark vanishes on one. A thin outline or a translucent backing disc keeps the figure standing in both, with no redesign required.
- Legacy systems still want .ico
Some older portals and proxy gateways request /favicon.ico and refuse to parse PNG, which this tool's output cannot satisfy. Convert the 32-pixel result into true ICO format separately for those deployments.