One logo · A coordinated icon set
Favicon Generator
A small icon.
A recognizable website.
Prepare PNG favicons, a multi-size ICO and a web manifest from one logo. Control the square composition, then download the files and HTML tags together.
Your selected logo is processed in this browser. The package provides icon assets and configuration; it does not install them on your website or certify PWA readiness.
1. Choose your logo
Drop one PNG, JPG or WebP here. Up to 10 MiB · 20 MP · 16,384 px per side.
No image selected
One logo creates the whole set. Your source file stays unchanged.
3. Inspect & download
PNG previews below use the actual generated files. Small icons are displayed at their native size; larger ones are fitted to the preview box.
4. Add the HTML tags
Upload the ZIP contents to the folder set on the right. Add these tags through your site’s supported head settings. For WordPress, you can instead use the 512 px PNG in Site Icon settings.
Choose a logo to begin. No account is required.
From artwork to assets
One logo. Three practical steps.
Compose the square
Choose a simple logo. Fit whole logo avoids clipping; Fill and crop can remove extra canvas around the subject. Inspect the 16 px output as well as the large preview.
Prepare matching files
Set the website name, colors and public icon folder. Generate creates the PNGs, multi-size ICO, manifest and HTML from the same settings.
Install through your platform
Download the package and upload its contents to the chosen folder. WordPress users can use the 512 px PNG in Site Icon settings. Check the published website after installation.
What is in the ZIP?
Files with specific jobs.
| File | Dimensions / content | Use and limits |
|---|---|---|
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32 and 48 px square | Small browser icon assets; actual selection depends on the browser. |
| favicon.ico | 16, 32 and 48 px PNG-compressed entries | A multi-size icon container. Very old BMP/DIB-only software may not read it. |
| apple-touch-icon.png | 180 × 180 px, opaque | Apple touch icon asset using the chosen background color. |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px square | General manifest icons with purpose any. Platform usage can differ. |
| maskable-icon-512x512.png (optional) | 512 × 512 px, opaque safe-circle layout | Separate purpose maskable entry. Test it under target-device masks. |
| site.webmanifest, html-snippet.txt, README.txt | Configuration and installation notes | No service worker or complete PWA project is generated. |
Control guide
Leave room for the small version.
Padding is per side
8% adds an 8% inset on each edge of a regular icon. Too much space can make a logo hard to see at 16 px. The optional maskable output adds padding within its safe-circle layout.
Crop position is not a stretch
Fill and crop takes a square from the source and preserves its proportions. X changes horizontal placement on a wide image; Y changes vertical placement on a tall image.
Background has two roles
It fills the Apple touch and maskable artwork, and is included as the manifest background color. Regular icons use it only when their fill checkbox is enabled.
Paths must match deployment
/icons/ means https://your-domain.example/icons/. The same path is used in the HTML tags and manifest. Moving only the files without updating those paths causes missing icons.
Before you publish
Inspect the output. Then check the website.
Keep the logo legible
A detailed illustration can disappear at browser-tab size. Prefer a simple mark with distinct edges. This tool resizes artwork; it does not redesign it or recover missing detail.
Use the actual PNG previews
Generated cards display the encoded files, including transparent edges and filled backgrounds. The composition canvas is only a draft; it does not replace inspection of the saved sizes.
Avoid competing declarations
A WordPress theme or SEO plugin may already add icon tags. Choose a supported installation method and inspect the final page source instead of stacking duplicate declarations.
Do not assume a cache refresh
Open the icon URL to confirm the right file is served. Check website/CDN caching and a fresh browser session. Browser favicon caching can outlast an ordinary reload.
Favicon questions
Answers for this exact generator.
What does this favicon generator create?
It prepares six PNGs: 16, 32, 48, 180, 192 and 512 pixels square. It also creates a favicon.ico with PNG-compressed 16, 32 and 48 px entries, a site.webmanifest, HTML tags and README notes. An optional separate 512 px maskable icon brings the package from 10 to 11 files.
Which source files and limits are supported?
Choose one non-empty PNG, JPG/JPEG or WebP file up to 10 MiB. File signatures and browser decoding are checked. The decoded image must be no larger than 20 MP or 16,384 px on either side. SVG, GIF, HEIC, PDF and TIFF are not accepted. Animated WebP becomes a decoded still image. Decode limits reduce workload but are not a total-memory guarantee.
Should I use Fit whole logo or Fill and crop?
Fit whole logo keeps the entire image inside the square, leaving space when its proportions differ. Fill and crop uses a square portion of the image; horizontal and vertical crop position choose which part remains. Padding is measured on each side as a percentage of the output square. These settings affect the regular icons and Apple touch icon.
How do transparency and the Apple touch icon work?
Regular PNGs and the ICO preserve rendered transparency unless Fill regular icon backgrounds is selected. The Apple touch icon is always composited over the chosen background color. The optional maskable icon also uses an opaque background. A transparent source can still contain faint or partially transparent artwork, so inspect the generated files.
What does the optional maskable icon do?
It creates a separate opaque 512 px icon with the full logo rectangle inside a central safe circle whose diameter is 80% of the image. Padding adds more space inside that area. Crop position and Fill and crop do not apply to this icon. Its manifest entry uses purpose maskable. Review the result on your intended devices; the tool does not certify platform acceptance.
What belongs in Icon folder?
Enter a same-origin URL folder that starts and ends with a slash, such as / or /icons/. Each segment can contain letters, numbers, hyphens and underscores. Upload the icons and site.webmanifest to that folder on your website. The generated HTML and manifest use that path; they do not upload files or set your website favicon automatically.
How can I use the files in WordPress?
Use the generated 512 by 512 PNG in WordPress Site Icon settings. Settings > General is one entry point; themes and editors may offer another. Use your site’s supported controls instead of pasting HTML into an ordinary page body. If adding tags through a theme or plugin, check for duplicate favicon declarations and correct public file paths.
Does the manifest make my website an installable PWA?
No. It supplies the website name, short name, icon paths, colors and selected display preference. This tool does not generate a service worker, start_url, scope or id, or validate browser installability. Further site configuration and testing may be needed. A manifest is not an Android application package.
Will enlarging a small logo improve its detail?
No. Smaller sources can be resized to the requested icon dimensions, but resizing does not create missing detail. A square source of at least 512 by 512 pixels avoids upscaling for the largest regular output. Fine text and complex artwork can be hard to recognize at 16 px even when the original is large.
Why has my old favicon not changed?
First open the generated icon URLs directly and check they return the expected files. Check your theme or plugin for competing icon tags and confirm the configured folder is correct. Browser, website and CDN caches can delay updates. Clear relevant caches and try a fresh browser session; a hard refresh alone may not replace a cached icon.
What happens when I change settings or press Stop?
Changing an icon or manifest setting discards the previous package and HTML so stale files cannot be downloaded. Select Generate icons again. Stop is checked after image reading or decoding, between PNG encodes and before publishing the full package. It cannot interrupt a native browser decoder or encoder mid-call. A stopped generation publishes no partial package; stopping ZIP packaging keeps the prepared icons.
Are selected images uploaded or saved as a project?
The favicon workflow reads and processes the selected image in this browser, and packages the files locally. It does not send the selected image contents to a conversion service. This does not describe unrelated website analytics or plugins. Only the theme preference is stored by this tool. Images, settings and generated files are not saved as a reusable project.
Are the ICO and PNG files identical to my original logo?
No. The source is drawn and resized into raster PNG outputs; source bytes and original metadata are not copied. The ICO wraps three of those PNGs and may not work in very old software that requires BMP/DIB icon entries. Generated artwork stays based on your source; the tool does not verify ownership, trademark rights or suitability for every platform.
Ready to create your favicon set?
Choose your logo, review the square composition and prepare the files.