How to make a favicon for your website
Turn a logo into a full favicon set — favicon.ico, PNG sizes, Apple touch icon and web manifest — and learn where to put the files and what HTML to add.
· 3 min read
To make a favicon, start from a square image of your logo, drop it into Favicon Generator, and download the ZIP: it contains favicon.ico, PNG icons in several sizes, an Apple touch icon, Android icons, a web manifest and the HTML to paste into your pages.
The quick way
- Prepare a square image of your logo, ideally 512×512 pixels or larger.
- Open Favicon Generator and drop the image (PNG or SVG work best).
- Enter your site name — it goes into the web manifest.
- Optionally add a 10% padding or fill the background with a colour.
- Click Generate favicons, check the previews, and download the ZIP.
- Upload the files to the root of your website and paste the HTML into the
<head>of your pages.
Your image is processed in your browser and is not uploaded.
Start from the right image
A favicon is displayed as small as 16×16 pixels in a browser tab. At that size, detail disappears.
- Keep it simple. A single letter, a symbol or the icon part of your logo works better than the full logo with text.
- Make it square. A non-square image is fitted inside the square, which leaves empty bands and makes the icon look small. Trim it first with Crop Image.
- Make it large enough. 512×512 or more gives clean results at every size. If your only image is small, Resize Image can change its dimensions, but enlarging won't add sharpness — a bigger original is always better.
- Have an SVG logo? You can drop it in directly. If you also want a PNG copy at a specific size for other uses, export one with SVG to PNG.
Which sizes exist, and why
Different devices look for different files:
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | Browser tabs, bookmarks, older browsers |
| favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Modern browsers |
| apple-touch-icon.png | 180 px | iPhone and iPad when the site is added to the home screen |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px | Android home screen and installable web apps, via the manifest |
| site.webmanifest | — | Tells Android and browsers your site name, icons and colours |
You don't strictly need all of them — a single favicon.ico already covers browser tabs — but the full set makes your icon look right everywhere, including when someone saves your site to their phone.
Where to put the files
Place them at the root of your site, next to your home page, so they're reachable at addresses like yoursite.com/favicon.ico. Some browsers look for /favicon.ico automatically even without any HTML.
Then add the link tags inside the <head> of every page. The generator gives you the exact snippet; it follows the standard pattern:
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
On a website builder or CMS, look for a "site icon" or "favicon" setting instead: many of them only ask for one image and handle the rest.
Common problems
The old icon still shows. Browsers cache favicons aggressively. Open the favicon's address directly, hard-refresh the page, or check in a private window. It can take a while to update everywhere.
The icon looks blurry or too small in the tab. The source has too much detail or empty space. Crop tighter, simplify the design, or untick the padding option.
The icon disappears on dark tabs. A dark logo on a transparent background can vanish on a dark theme. Fill the background with a colour, or use a lighter version.
The Apple icon shows a dark background. iOS doesn't display transparency on home screen icons, so transparent areas may appear black. Fill the background with your brand colour.
Limits worth knowing
- The generator makes images and a manifest; it doesn't upload them to your site — that part is up to you or your hosting tool.
- It uses the same design for every size. If you want a simplified version for 16 px and a detailed one for 512 px, create them separately.
- Search engines may take time to show a new favicon in results, and that timing isn't something your files can control.