Favicon Generator for ICO, PNG, and Apple Touch Icons
ICO & PNG packageA favicon is the small identifier shown beside a page title in browser tabs, bookmarks, and history — at 16 or 32 pixels it must stay recognizable under constraints a full-size logo never faces. The Favicon Generator accepts one PNG, JPG, or WebP image and creates a downloadable ZIP containing four PNG sizes, a multi-image favicon.ico, and a 180 × 180 Apple touch icon. Generation happens in the browser using canvas resizing, and JSZip packages the files as favicons-package.zip.
Quick answer. Upload a square PNG, JPG, or WebP logo, inspect its 16 × 16, 32 × 32, and 48 × 48 previews, then generate the package. Extract the ZIP, place the relevant files in your site's public directory, add the appropriate <link> elements, deploy, and test in multiple browsers and devices. Use a high-resolution square image with a simple centered symbol, strong contrast, and enough padding to remain clear at 16 pixels.
What files does the generator create?
| File | Dimensions / content | Typical use |
|---|---|---|
favicon-16x16.png | 16 × 16 PNG | Compact browser-tab icon |
favicon-32x32.png | 32 × 32 PNG | Standard high-density tab use |
favicon-48x48.png | 48 × 48 PNG | Larger browser/shortcut contexts |
favicon-128x128.png | 128 × 128 PNG | Larger icon use or project asset |
favicon.ico | Embedded 16, 32, and 48 pixel PNG images | Conventional root favicon and discovery |
apple-touch-icon.png | 180 × 180 PNG | Apple home-screen/bookmark icon |
All outputs are created from the same source image. The tool does not generate a web app manifest, Android launcher icon set, Safari pinned-tab SVG, Windows tile configuration, or HTML file.
How to use the Favicon Generator
- 1. Prepare a square logo in PNG, JPG, or WebP format.
- 2. Upload one image to the tool.
- 3. Inspect the previews at 16, 32, and 48 pixels.
- 4. Run the generation action and download
favicons-package.zip. - 5. Extract the archive and copy the chosen files into your website's public/static directory.
- 6. Add favicon references to the document
<head>. - 7. Deploy and clear favicon caches while testing.
The preview is valuable because fine lines and small text that look good in a large logo can disappear at browser-tab size.
Recommended HTML favicon markup
A practical starting point, placed inside <head>, is:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Adjust paths if the files live in a subdirectory or the application uses a base URL. The 128x128 asset is included in the package but is not referenced by this minimal markup. Some browsers discover /favicon.ico automatically, but explicit markup documents your intention. Do not add a site.webmanifest reference unless you have actually created and deployed that manifest.
Why favicon.ico still matters
Modern browsers support PNG favicons, yet favicon.ico remains a useful compatibility and discovery file because an ICO container can include several image sizes so the browser chooses an appropriate representation. This generator builds an ICO containing the 16, 32, and 48 pixel PNG images; the separate 128 pixel PNG and 180 pixel Apple touch icon are not embedded in that ICO. Modern software generally supports PNG-compressed image data inside ICO containers, but very old clients may have narrower compatibility requirements.
Keeping favicon.ico at the site root, such as https://example.com/favicon.ico, is a dependable convention. If your framework fingerprints asset names, consider whether the root file should remain stable while other assets use hashed URLs.
Choosing the best source image
Favicon quality starts with the source. Use a 1:1 aspect ratio, at least 180 × 180 pixels (preferably larger), a simple silhouette, strong contrast in light and dark browser themes, generous transparent or solid padding, and no text unless the character remains legible at 16 pixels. An elaborate horizontal logo is usually a poor favicon — create a dedicated square brand mark, monogram, or symbol rather than shrinking the entire wordmark.
A square image is important because the generator draws the source directly into square canvases at every target size. It does not crop to a square or preserve a non-square aspect ratio, so a rectangular source is stretched and can distort the logo. Crop or pad the image to a square before uploading; if the logo must remain rectangular, place it inside a square canvas with intentional empty space.
PNG, JPG, or WebP source?
- PNG is usually the best source because it supports transparency and preserves sharp logo edges without lossy compression. Start with a high-resolution PNG when available.
- JPG works, but it has no transparency and can introduce compression artifacts around high-contrast edges. Its existing background becomes part of every generated icon.
- WebP can preserve transparency and detail depending on how it was encoded, and the browser must be able to decode it.
Output files are always PNG and ICO regardless of the uploaded format. The generator does not accept SVG as source input — if your master logo is SVG, export a square high-resolution PNG first, or rasterize the SVG with controlled padding and background.
Transparency and designing for 16 pixels
The canvas is not filled with a background before drawing the image, so transparent pixels in a PNG or suitable WebP can remain transparent in the generated PNG files (JPG sources are already opaque). Transparency lets a brand mark float naturally, but test it against both light and dark browser chrome: a dark logo with transparent edges can disappear in dark mode, and a white logo can disappear against light surfaces. A deliberate colored tile or outline often gives more predictable contrast.
At 16 pixels every detail competes for a tiny grid, so effective favicon design usually means subtraction: remove taglines and small lettering, thicken important strokes, simplify gradients and shadows, avoid narrow gaps that close after resizing, keep the subject centered, and test at actual size. The generator resamples one master image to every output — it does not support custom artwork per size, so edit the generated assets or create each size manually if you need optical sizing.
Apple touch icon and PWA icons
The package includes apple-touch-icon.png at 180 × 180 pixels. Reference it with:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Keep important artwork away from the extreme edges, because mobile platforms can apply rounded presentation masks. The Apple touch icon is not the same as a complete Progressive Web App icon set: installable PWAs generally need a web app manifest with appropriately sized icons, including platform-recommended larger and possibly maskable assets, which this tool does not generate.
Why a new favicon may not appear
Favicons are aggressively cached, so a browser can keep an old icon after the HTML and image files have changed. Open the icon URL directly to confirm the new file is deployed, verify the response status and content type, check the <link> URL in the rendered page source, hard-refresh or test in a new private window, clear site data or the favicon cache if necessary, and temporarily add a version query such as /favicon.ico?v=2. Versioned URLs help during updates, but keep references consistent across templates and metadata.
Common favicon problems
The logo looks stretched
The source was not square. Crop or pad it to 1:1 before generating again.
The 16-pixel icon is blurry
Use a larger, sharper source with simpler shapes. Fine detail cannot survive unlimited downscaling.
The icon disappears in dark mode
Add a contrasting tile, outline, or alternate mark that remains visible on light and dark backgrounds.
Transparency was lost
Start with a transparent PNG or WebP. JPG does not support alpha transparency.
The ZIP contains no manifest
That is expected. The package includes favicon assets, not a site.webmanifest or full PWA setup.
An older client rejects the ICO
The ICO stores PNG-compressed 16, 32, and 48 pixel entries. Extremely old software may require a different encoding from specialized icon tooling.
Privacy and browser-based processing
The uploaded image is decoded and resized in browser memory. JSZip is loaded from third-party content delivery infrastructure and creates the archive locally; the image is not sent to a dedicated favicon conversion service.
Logo files can still contain unreleased branding or confidential campaign material, so follow your organization's handling rules and use a trusted device. Canvas re-encoding typically creates new pixel-based PNGs rather than preserving source EXIF metadata, but metadata removal should not be treated as the purpose or security guarantee of this tool.
Frequently asked questions
What favicon sizes does the tool generate?
It creates PNG files at 16, 32, 48, and 128 pixels, an ICO containing 16/32/48 pixel images, and a 180 pixel Apple touch icon.
Which source formats are supported?
One PNG, JPG, or WebP image can be uploaded.
Does it preserve a rectangular image's aspect ratio?
No. The source is drawn into square canvases, so prepare a square image to avoid distortion.
Does the ZIP include favicon.ico?
Yes. favicon.ico contains 16, 32, and 48 pixel entries.
Does it create an Apple touch icon?
Yes. The package includes apple-touch-icon.png at 180 × 180 pixels.
Does it generate a web app manifest?
No. Create and configure the manifest separately if your site is an installable PWA.
Can I use an SVG logo?
SVG is not accepted by this tool. Export a square PNG, JPG, or WebP first.
Why is my old favicon still showing?
Browser favicon caching is persistent. Verify deployment, clear site data, test privately, or version the icon URL.
Is the ZIP ready to deploy without changes?
The image assets are ready, but you still need to place them at correct URLs and add site markup or framework metadata.
What is the download filename?
The package downloads as favicons-package.zip.
Related tools
Image Scaler
Produce a custom master-image size before generating icons.
WebP Converter
Move a source between raster formats when needed.
Color Palette Extractor
Choose a high-contrast brand color for a favicon tile.
Related guides
HEIC to JPG / PNG Guide
Convert Apple HEIC photos to standard JPEG or PNG images in browser memory.
Crop Image Guide
Crop and trim image coordinates interactively with aspect ratio controls.
Bulk Image Resizer Guide
Resize multiple images in bulk by percentage, width, or height and download as a ZIP.
Build your favicon package
Upload a square logo to generate PNG favicons, a multi-size favicon.ico, and an Apple touch icon in one favicons-package.zip.