How to make a favicon
- 1.
Add an image
Ideally a square PNG or SVG logo, at least 512 px on each side.
- 2.
Adjust the look
Choose whole image or crop to square, then set padding, corner radius and a transparent or coloured background. The preview updates live.
- 3.
Download the ZIP
The package contains favicon.ico, the PNG files, apple-touch-icon, the manifest and the HTML code.
- 4.
Upload to your site
Copy the files to the root folder of your website and paste the HTML into the <head> section.
Which favicon files do you need?
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32, 48 px | browser tabs, bookmarks, search results; browsers request /favicon.ico by default |
| favicon-32x32.png, favicon-16x16.png | 32 and 16 px | modern browsers, sharper than ICO on high-density screens |
| apple-touch-icon.png | 180 px | the icon shown when someone adds your site to the iPhone or iPad home screen |
| android-chrome-192x192.png, 512x512 | 192 and 512 px | PWA app icon on Android and the splash screen (via the manifest) |
Google recommends a square favicon whose side is a multiple of 48 px (48, 96, 144 px and so on). The 48 px image inside the ICO file and the 192 px PNG both meet that rule.
HTML code to paste
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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 files live in a subfolder, change “Path to files” and the code updates automatically. In WordPress you can also set the icon under Appearance → Customize → Site Identity → Site Icon (a square of at least 512×512 px).
Design tips
- Keep it simple. At 16×16 px, a symbol or one or two letters stay readable - a full logo with a tagline does not.
- Check contrast. Look at the icon on both a light and a dark tab bar - a black logo on a transparent background disappears in dark mode. A coloured background or a light outline helps.
- Apple Touch Icon always has a background. iOS turns transparency into black, so the generator adds a background to this icon (white or your chosen colour) and does not round its corners - iOS does that itself.
Padding, radius and cropping explained
All settings are percentages of the icon side, so every size looks the same. Padding (0-25%) is added on each side: at 10% on a 512 px icon, the logo fills the central 410 px (512 − 2 × 51), and on a 32 px icon about 26 px. The corner radius (0-50%) sets how round the corners are; 50% gives a circle.
| Setting | When to use it |
|---|---|
| Whole image | wide logos or logos with text - the image fits in the square with background on the sides |
| Crop to square | a photo or a centred symbol - the edges of the longer side are cut off |
| Padding 5-15% | logos that touch the edges, icons with a coloured background |
| Transparent background | a symbol that works on both light and dark tab bars |
The largest icon (512 px) is drawn straight from your source image and the smaller ones are scaled down step by step, at most by half per step, so the 16 and 32 px versions come out sharper than with a single resize. If your source is smaller than 512 px, the big icons are upscaled and may look soft.
Frequently asked questions
What size should a favicon be?
+
Do I still need a favicon.ico file?
+
Why does my favicon not change after uploading?
+
Can I use an SVG file?
+
Is my logo uploaded?
+
Can I download a single size?
+
Updated: