Generate favicon and app icons for your site

Published on 2026-02-27 · 2 min read

#Favicon #PWA #Design

Every serious project needs a clear favicon in browser tabs, an Apple touch icon for iOS, and app icons for Android and PWA. This tool helps you generate them from one image: upload a square logo, choose sizes, download PNGs and copy the HTML snippet into your site.

Why favicons and app icons matter

Favicon — the small icon in the browser tab and bookmarks. Without it, the tab looks generic and your brand is less recognizable.
Apple touch icon — used when users add your site to the home screen on iPhone and iPad. The right size (e.g. 180×180) ensures a sharp icon.
PWA / Android icons — required for “Add to Home Screen” and install prompts. Typical sizes: 192×192 and 512×512.

One square source image can feed all of these. The generator runs entirely in your browser: your logo never leaves your device.

Recommended source image

Use a square image (PNG or SVG) with at least 512×512 pixels. Higher resolution is fine; the tool scales down. Avoid tiny or stretched images so icons stay sharp on high‑DPI screens.

Quick start with the tool

Upload — Click “Choose file” and select your logo (PNG or SVG, square, 512×512 or larger).
Set background — Pick a background color if your logo has transparency; it’s also used as theme-color in the snippet.
Select sizes — Check the icon sizes you need (favicon 16/32, Apple 180, PWA 192/512, etc.).
Download — Click any preview to download that size as PNG, or use “Download all as ZIP” to get everything at once.
Copy snippet — Copy the HTML block and paste it into your site’s <head>. Upload the PNGs to your server (e.g. /assets/icons/) and adjust paths in the snippet if needed.

Where to put the files

A common setup:

Put favicon and icon PNGs in a folder like /assets/icons/ or in the root.
Update the snippet so href values point to those paths (e.g. /assets/icons/favicon-32x32.png).
Add site.webmanifest for PWA with the same paths to 192×192 and 512×512 icons.

Summary

Favicon & App Icons Generator lets you go from one logo to all required icon sizes and a ready‑to‑paste <head> snippet. Use a square, high‑resolution source image, then download the PNGs and plug the snippet into your project.