Blog
Field notes from building Logo2Favicon: how favicons and app icons actually render across browsers, operating systems, and progressive web apps - and how to get them right the first time.
Last updated: 31 May 2026
Favicons look like a solved problem until you ship one. A single logo has to scale down to a 16×16 browser tab, survive being masked into a circle on Android, sit inside a rounded square on iOS, and still read clearly as a pinned shortcut or a PWA on the home screen. The articles below distil what we've learned into short, practical guides you can act on today.
Everything here pairs with the generator itself: Logo2Favicon turns one logo into a complete, production-ready icon set entirely in your browser, with no uploads and no sign-up. Read a piece, then try it on your own logo in a few seconds.
Latest articles
Favicon best practices: the definitive 2026 checklist
12 June 2026 · 9 min read
The complete 2026 favicon set is a multi-resolution favicon.ico (16/32/48), PNG 16 and 32, a 180 opaque Apple touch icon with no rounded corners, 192 and 512 PWA icons plus a maskable 512, and a linked web manifest with a theme-color. Keep the mark legible at 16px, declare the right head tags, make every source square, and verify in DevTools and Lighthouse.
How to make a favicon adapt to light and dark mode
9 June 2026 · 7 min read
To make a favicon adapt to light and dark mode you have two real options: ship one SVG favicon with an internal style block that recolors paths via @media (prefers-color-scheme: dark), or declare two link tags differentiated by a media attribute. The SVG approach works in more places, the media-query link approach has limited support, and a high-contrast mark often beats both.
PWA icons and the web manifest: the complete checklist
15 April 2026 · 8 min read
A PWA installs cleanly when its web manifest declares a name, short_name, start_url, display, theme_color, background_color, and an icons array containing a 192 and a 512 standard icon plus a separate 512 marked purpose maskable. Miss any of these and the install prompt or home-screen icon falls back to a generic glyph.
Apple touch icons and maskable icons, explained
22 March 2026 · 6 min read
An Apple touch icon is a 180x180 opaque PNG iOS uses for home-screen shortcuts, with no rounded corners because iOS adds its own mask. A maskable icon is a 512x512 PWA icon with a safe zone so Android's adaptive launchers can crop it into any shape without clipping your logo. They solve different cropping problems.
favicon.ico vs PNG vs SVG: which format should you use in 2026?
4 March 2026 · 7 min read
In 2026 the right answer is not one format but a small combination: keep a multi-resolution favicon.ico at your root as the universal fallback, declare PNG icons for crisp high-DPI rendering, and optionally add an SVG icon for browsers that support it. Each format does a job the others can't.
Why your favicon doesn't show in Google search results
10 February 2026 · 6 min read
If your favicon is missing from Google search results, the cause is almost always one of five things: Google can't crawl the icon, it's the wrong size (Google wants a multiple of 48px), the file is at a non-standard location, the homepage isn't indexed, or Google simply hasn't recrawled yet.
Go deeper
Want the step-by-step references? Browse our guides, including the complete favicon guide and the icon size cheatsheet. Setting up a favicon on a specific stack? See favicon by platform for WordPress, Shopify, Next.js and more. Starting from a particular file? Try convert to favicon for PNG, SVG, JPG, and ICO workflows.
Looking for something specific?
Skim the frequently asked questions, or check the changelogto see what's new in the generator. Want a heads-up when we publish the next article? Join the newsletter.