PNG → ICO
Favicon generator
Create every icon a website needs from one image: favicon.ico, the Apple touch icon, the app icons and the HTML to paste. It all happens in your browser.
Drop your logo or icon here PNG, JPG or SVG. A square image works best. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Paste in the <head> of your site
Runs in your browser · files stay on your device
How to make a favicon
- Add your logo or icon. PNG, JPG or SVG. A square image with a simple shape works best.
- Adjust padding, corners and background. Add space around the icon, round the corners and fill the background if your logo is dark on transparent.
- Check the browser tabs. The preview shows the icon at its real 16 px size on a light and a dark tab.
- Download the ZIP and paste the HTML. Upload the files to the root of your site and paste the tags into the
<head>.
What the favicon generator creates
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | Browser tabs, bookmarks, Windows shortcuts and any tool that requests /favicon.ico |
| icon.svg | Scalable | Modern browsers, when your source image is an SVG |
| apple-touch-icon.png | 180 px | Home screen shortcuts on iPhone and iPad |
| icon-192.png and icon-512.png | 192 and 512 px | Android and installed web apps, listed in the manifest |
| manifest.webmanifest | – | Tells browsers where the app icons are |
The 192 and 512 px icons follow the web app manifest example on web.dev. The Apple touch icon always gets a solid background, because iOS shows transparent areas as black.
Favicon generator from image or PNG
Start from the cleanest version of your logo you have. A favicon is shown at 16 by 16 pixels in a tab, so fine text and thin lines disappear. Many brands use only their symbol or first letter. If your source image is not square, the generator centers it on a square canvas with transparent margins.
Use the padding slider when the logo touches the edges, and fill the background when the logo is dark and transparent, so it stays visible on dark browser tabs.
SVG favicon generator
If you drop an SVG, the set includes it as icon.svg and the HTML adds it as an extra icon. Browsers that support SVG favicons use it at any size and the others fall back to favicon.ico. The PNG icons are drawn from the vector, so they come out sharp.
Favicons and Google Search
Google can show your favicon next to your results. Its guidelines ask for a square image of at least 8 by 8 pixels and recommend one larger than 48 by 48 pixels (Google Search Central). The 48 px size inside favicon.ico and the 192 px icon cover that. For more detail, see our guide to favicon sizes.