PDFConvertersOnline.comHow to make a favicon
- Choose a logo image, or switch to Text or emoji and type one or two characters.
- Adjust padding, background and shape while watching the tiny previews and the browser tab mockup.
- Press Create favicon, download the ZIP and copy the HTML lines into the head of your site.
Which favicon files a site needs today
Years ago a single 16×16 favicon.ico was enough. Now the same small picture shows up in browser tabs, bookmarks, phone home screens and installed web apps, and each of those places looks for its own size. The ZIP you download here contains a set that covers the common cases without piling up dozens of files:
| File | Size | Where it's used |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | The classic fallback. Browsers ask for /favicon.ico on their own when a page has no icon tag, and many tools that only understand ICO still read it. |
| favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs and bookmarks. The 32 px version is picked on high-density screens, where a tab icon has twice as many pixels. |
| apple-touch-icon.png | 180 px | The icon an iPhone or iPad shows when someone adds your site to the Home Screen. |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px | Listed in the web manifest. Android uses them for home-screen shortcuts and installed web apps. |
| site.webmanifest | text | A small JSON file that tells phones the name, colors and icons of your site. |
Where to put the files and how browsers choose
Unzip everything into the root folder of your website, the same folder that holds your home page, so that example.com/favicon.ico opens the icon. Then paste the link tags shown on the result screen (they are also in README.txt) into the <head> of every page. Site builders and content management systems usually have a "site icon" setting instead; in that case upload the 512 px PNG there.
When a page lists several icons, the browser reads the sizes and type of each link and picks the one that fits the spot it is drawing. If no tag is present, it falls back to requesting /favicon.ico from the root. Browsers also cache favicons stubbornly, so after replacing an icon you may need a hard refresh or a new private window before the new one appears.
Designing an icon that survives 16 pixels
A 16 px square has only 256 dots. Fine lines, small text and detailed logos turn into grey mush at that size. Some tips that work:
- Use the symbol or first letter of your brand rather than the full wordmark.
- Keep strong contrast between the shape and its background, and check the dark tab preview too, since many people browse with a dark theme.
- Add a little padding if your logo touches the edges; remove it if the icon looks too small next to other tabs.
- If your picture isn't square, crop it first with Crop Image, or let the generator center it on a square.
Text and emoji favicons
No logo yet? Switch to Text or emoji, type one or two letters (or paste an emoji), pick a weight, colors and a square, rounded or circle shape. The letters are drawn with the system font on your device, and emoji use your device's own emoji set, so an emoji icon made on an iPhone looks like Apple's emoji and one made on Windows looks like Microsoft's. The result is saved as normal pictures, so visitors see exactly what you saw here.
Transparency and the Apple icon
The tab icons and Android icons keep a transparent background unless you switch on a fill color. The Apple touch icon is different: iOS adds its own rounded corners and doesn't show transparent areas properly, so that file is always saved as a full square with a solid background (your chosen color, or white).
Frequently asked questions
Do I still need a favicon.ico file?
It's still worth having. Browsers request /favicon.ico automatically when a page has no icon tag, and some feed readers, bookmark tools and older software only look for that file. The PNG files cover everything else.
What does the .ico file contain?
Three pictures in one file: 16×16, 32×32 and 48×48 pixels, each stored as a compressed PNG inside the ICO container. Every current browser and Windows since Vista reads this kind of ICO.
Why is my new favicon not showing?
Usually it's the browser cache. Check that example.com/favicon.ico opens the new icon, then reload the page with a hard refresh or open it in a private window. Also make sure the link tags point to the right folder.
Can I use an SVG logo?
Yes. Choose the SVG file and it is drawn crisply at every size before being saved as PNG and ICO files. If the SVG has no width and height set, it is drawn as a square.
Is my logo uploaded to a server?
No. The images, the ICO file and the ZIP are all built by your browser on your own device. Nothing is sent anywhere.