What you get in favicons.zip
Upload one image and the generator renders every file a current website needs, all in your browser:
| File | Size | Used by |
|---|---|---|
favicon.ico |
16, 32 and 48 px in one file | Browser tabs, bookmarks, Windows, any tool that asks for /favicon.ico |
favicon-16x16.png |
16×16 | Tabs on standard screens |
favicon-32x32.png |
32×32 | Tabs on high-density screens, taskbar shortcuts |
favicon-48x48.png |
48×48 | Google search results, desktop shortcuts |
apple-touch-icon.png |
180×180 | iPhone and iPad "Add to Home Screen" |
android-chrome-192x192.png |
192×192 | Android home screen |
android-chrome-512x512.png |
512×512 | Installed web apps (PWA) and their splash screen |
site.webmanifest |
— | Tells Android/Chrome where the two large icons are |
README-favicon.html |
— | The HTML tags to paste |
Which source image works best
- Square, simple, bold. At 16 px you have 256 pixels in total. A full logo with a tagline turns into a smudge; a single letter or symbol stays readable. Many brands use a simplified mark just for the favicon.
- At least 512×512. The largest icon is 512 px, so a smaller source will be upscaled and look soft. An SVG logo is ideal — it is rendered at high resolution before downsizing.
- Transparent PNG or SVG. Transparency is kept in the
.icoand the tab-sized PNGs, so the icon sits nicely on light and dark browser themes. - Not square? The image is fitted inside the square without cropping, with transparent space on the sides. If you'd rather fill the square, crop it first, or make a round version with Circle Crop.
The Apple touch icon background
iOS doesn't allow transparency on home-screen icons — transparent areas turn black. So the 180×180 apple-touch-icon.png always gets a solid background. It's white by default; use the colour field next to the upload box to set your brand colour (the color picker can read it from your logo). The other sizes stay transparent.
Where to put the files
- Unzip and upload all the files to the root of your site, so that
https://yoursite.com/favicon.icoopens the icon. - Paste the tags from
README-favicon.htmlinto the<head>of every page (or your theme's header template):
<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">
<link rel="manifest" href="/site.webmanifest">
- If your site lives in a subfolder, change the paths accordingly.
On WordPress, Appearance → Customize → Site Identity → Site Icon handles this for you with a single 512×512 image — use android-chrome-512x512.png. Site builders such as Shopify, Wix and Squarespace have a similar "favicon" field.
The included site.webmanifest only lists the icons. If you want visitors to install your site as an app, add name, short_name, theme_color, background_color and "display": "standalone" to it.
"I changed the favicon but still see the old one"
Favicons are cached harder than almost anything else on a site.
- Open
https://yoursite.com/favicon.icodirectly and hard-reload (Ctrl + F5, or Cmd + Shift + R on Mac). - Add a version to the links, e.g.
href="/favicon.ico?v=2", so browsers treat it as a new file. - Clear your CDN or caching plugin if you use one.
- Bookmarks and home-screen shortcuts keep the old icon until they're re-created.
- Google search results update the icon only after recrawling your homepage, which can take days to weeks. Google needs a square icon that's a multiple of 48 px — the 48×48 PNG and the
.icocover that.
Related tools
- Remove a photo background before turning it into an icon: Remove Background.
- Have the logo as WebP? Convert it to PNG first if your editor can't open it.
- Need a plain 512×512 image for a store or profile? Resize to 512×512.