Guides & Tutorials
Everything you need to ship a flawless favicon and app icon set. These guides walk you through the formats, sizes, and markup that make your logo look sharp in browser tabs, on home screens, and across every platform.
Last updated: 30 May 2026
A modern website needs far more than a single favicon.ico. Browsers, mobile operating systems, and progressive web apps each expect their own icon formats and sizes - and getting any of them wrong leaves you with a blurry tab, a cropped home screen icon, or a missing PWA splash. Our guides cut through the confusion so you can generate the right files once and move on.
Every guide is written to be practical and copy-paste ready. When you're done reading, head back to the generator to produce your full set in seconds - entirely in your browser, with no uploads and nothing to install.
Featured guides
The complete favicon guide
Start here. This is the end-to-end walkthrough: what a favicon actually is, which files modern browsers look for, how to wire up the <link> tags in your <head>, and how to verify everything renders crisply across light and dark mode. If you only read one guide, make it this one.
Read the complete favicon guide
Icon size cheatsheet
A no-nonsense reference for every icon dimension you might need - favicon.ico variants, Apple touch icons, Android and PWA icons, and maskable icons with their safe zones. Bookmark it for the next time you need to confirm whether you want 180×180 or 192×192.
Topic guides
Focused, answer-first guides for the questions people actually search. Each one leads with the short answer, then goes deep.
- What is a favicon? - the quick definition: what it means, where it appears, the formats, and how browsers pick one.
- Favicon sizes- the dimensions that actually matter (16/32/48, 180, 192/512) plus Google's 48px-multiple rule, in one clean table.
- How to add a favicon - the universal four steps, with links to the exact instructions for your platform.
- Apple touch icon- the 180×180 iOS home-screen icon, the link tag, and the opaque-background and no-rounded-corners gotchas.
- Web app manifest - what
site.webmanifestis, every key explained, and a copy-paste example with maskable icons. - SVG favicon - how to use a scalable vector favicon, make it adapt to dark mode, and keep a safe
.icofallback.
More references
Favicon by platform
Using a specific stack? Our favicon by platform guides give the exact menu paths and code to add a favicon on WordPress, Shopify, Next.js, Webflow, and more.
Convert to favicon
Starting from a particular file type? The convert to favicon hub covers PNG, SVG, and JPG sources, plus a real PNG to ICO, Apple touch icon, and maskable icon.
How to use these guides
If you're new to favicons, read the complete favicon guide top to bottom, then keep the icon size cheatsheet open in a second tab as a quick reference while you implement. If you already know the markup and just need the right dimensions, jump straight to the cheatsheet.
- Designing your source logo?Use a square, high- contrast mark with generous padding so it stays legible when scaled down to 16×16.
- Generating the files? The generator outputs every format, a web manifest, and the exact HTML snippet to paste into your site.
- Verifying the result? Check a real browser tab, add the site to a phone home screen, and confirm the manifest loads without console warnings.
More help
Looking for a quick answer rather than a full tutorial? Our frequently asked questions cover the most common questions about formats, browser support, privacy, and why all processing happens locally in your browser.
Ready to put it into practice? Open the Logo2Favicon generator to turn your logo into a complete favicon and app icon set - free, private, and made in Switzerland.