How to Create a Favicon for Your Website (All Sizes)
5 min read · April 2026
The favicon is the small icon that appears in browser tabs, bookmarks, and on phone home screens when someone saves your website. It's a small detail that makes a real difference in how professional your site looks. Setting it up correctly requires more than one file — browsers and devices expect several different sizes and formats.
Here's what you need, what each file is used for, and how to generate everything from a single image.
What is a favicon?
A favicon (short for "favourite icon") is the small square image that identifies your site in:
- Browser tabs (the icon next to your page title)
- Bookmarks and favourites lists
- Browser history
- Home screen shortcuts on iOS and Android
- PWA (Progressive Web App) icons
- Windows taskbar pinned sites
All the sizes you need
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 multi-size | All browsers (fallback) |
| favicon-16x16.png | 16×16 px | Modern browsers (tab icon) |
| favicon-32x32.png | 32×32 px | Modern browsers (bookmarks) |
| apple-touch-icon.png | 180×180 px | iOS home screen shortcut |
| android-chrome-192x192.png | 192×192 px | Android home screen, PWA |
| android-chrome-512x512.png | 512×512 px | Android splash screen, PWA |
What source image should you use?
Start with a square image at 512×512 pixels or larger. The source should be:
- Your logo mark (the icon/symbol, not the full wordmark with text)
- Square — non-square images will be cropped or letterboxed
- Simple enough to be recognisable at 16×16 pixels — if your logo has fine detail or thin lines, they'll be invisible at small sizes
- PNG with a transparent background is ideal; white or coloured backgrounds also work
Step-by-step: generating all favicon sizes
- Go to justconvert.in/tools/favicon-generator.
- Upload your square logo or icon image (PNG, JPG, or WebP, minimum 512×512 px recommended).
- Click Process. The tool generates all required sizes plus a
favicon.icoand asite.webmanifestfile. - Download the ZIP file containing all generated assets.
- Place all files in the root directory of your website (the same level as your
index.html).
Adding the favicon to your HTML
Add the following tags inside the <head> section of your HTML:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
The site.webmanifest file
The site.webmanifest (or manifest.json) tells browsers and Android devices how to present your site as a PWA or home screen shortcut. A minimal manifest looks like this:
"name": "Your Site Name",
"short_name": "SiteName",
"icons": [
{"src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
The JustConvert favicon generator produces this file automatically, pre-filled with placeholder values you can update with your site name and brand colours.