Install Favicon & PWA Icons on Your Website

Generate your icon pack, extract the files, add the HTML links and check the icon paths in your web manifest.

Upload an image to start

Recommended source input

PNG or SVG source, ideally square and at least 512×512.
Transparent background works best for logos that need flexible placement.
If your file is not square, the tool auto-pads canvas and keeps the subject centered.

Practical workflow

Upload source and confirm subject bounds preview looks correct.
Choose Balanced or Safe padding mode, then review favicon and PWA previews.
Check manifest name, background, and theme color before export.
Download ZIP to get favicon.ico, 16/32/48 PNG, Apple 180, and PWA 192/512 files.

Example output set

Input: 1024×1024 transparent brand mark (SVG).

Settings: Balanced padding + transparent background.

Output: favicon.ico, favicon PNG sizes, apple-touch-icon, and PWA icons ready for deployment.

Publishing tips

Use a simple source mark so 16×16 and 32×32 favicons remain recognizable.
Keep one canonical ZIP export with the manifest and icons used in production.
After deployment, verify favicon and PWA icons in a real browser install prompt.

Use your downloaded icon pack

The ZIP contains 10 PNG icons, favicon.ico and site.webmanifest. These are website and PWA assets; the pack is not a complete native app project.

Files included in the ZIP

favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
icon-192x192.png
icon-512x512.png
icon-maskable-192x192.png
icon-maskable-512x512.png
icon-256x256.png
icon-1024x1024.png
favicon.ico
site.webmanifest

Extract the ZIP and upload the files to your website. This example puts them together at the site root.
Add the following links inside the HTML head of your pages.
Before exporting, set the app name, colors and start URL. Keep site.webmanifest next to its four referenced PWA PNG files; their paths are relative to the manifest.
Open the icon and manifest URLs to check that they load. Preview the result on your target devices; icons alone do not make a site a complete installable PWA.

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

For a subdirectory such as /icons/, update the HTML links to that directory and keep the manifest and PNGs together. Set start_url to your actual app entry URL. The ZIP does not include your source SVG.