The favicon.tools blog
Sizes, formats, framework setup, and the nine reasons a favicon quietly stops showing up. Written to actually answer the question, not to rank for it.
27 guides by Abdessamad Bettal · RSS
Changing the Favicon on Webflow, Squarespace, Wix and Ghost
Where the favicon setting hides in each platform, what size each one wants, and how to add the icons the built-in uploader doesn't cover.
6 min read
ReadTutorialHow to Add a Favicon to a Vue or Nuxt App (The Right Way)
Where favicon files go in a Vite-powered Vue project and in Nuxt, how to declare them without fighting the build, and why the default Vite favicon keeps coming back.
6 min read
ReadFundamentalsMaskable Icons Explained: Why Your PWA Icon Gets Cropped on Android
What the maskable purpose in a web app manifest actually does, how big the safe zone is, and how to ship maskable and standard icons without one ruining the other.
6 min read
ReadFundamentalsThe Legacy Favicon Tags You Can Finally Delete (And the Four You Can't)
Most favicon snippets on the web still carry a decade of dead tags: mask-icon, browserconfig.xml, msapplication-*, precomposed icons. Here's what each one did and which are still doing work.
6 min read
ReadFundamentalsHow Browsers Actually Decide Which Favicon to Show
Declare five icons and the browser displays one. The selection rules aren't the order you wrote them in — here's what governs the choice, and why two sites with identical markup can show different icons.
7 min read
ReadDesignDark Mode Favicons: How to Make One Icon Work on Both Themes
How to build a favicon that adapts to light and dark browser themes using an SVG media query — and why the safer answer is usually an icon that never needs to.
7 min read
ReadTutorialAdding a Favicon in Astro and SvelteKit
The static directory, the layout file and the head tags for both frameworks — plus the base-path and adapter gotchas that break favicons on deploy.
5 min read
ReadTutorialHow to Add a Favicon in WordPress Without a Plugin
WordPress calls it a "site icon" — here's how to set one properly, with or without the block editor.
4 min read
ReadFundamentalsThe Web App Manifest, Explained: Icons, Theme Color and PWA Installs
What site.webmanifest actually does, which fields matter for icons, and how to get it right.
5 min read
ReadTutorialHow to Set a Favicon on Shopify (Theme Editor Guide)
Where Shopify hides the favicon setting, what size to upload, and how to confirm it's live.
4 min read
ReadTutorialHow to Add a Favicon to a React App (Vite and Create React App)
Where favicon files actually live in a Vite or CRA project, and how to wire up every size correctly.
4 min read
ReadTutorialHow to Add a Favicon to a Next.js App (App Router)
The exact files and folder structure Next.js's App Router expects for a favicon, step by step.
5 min read
ReadTutorialHow to Add a Favicon to a Static HTML Site
The exact <link> tags a plain HTML site needs in <head>, explained line by line.
5 min read
ReadFundamentalsThe History of the Favicon: From Internet Explorer 5 to PWAs
How a 16-pixel Microsoft afterthought in 1999 became one of the most-requested files on the web.
5 min read
ReadTroubleshootingGoogle Search Console Favicon Not Showing: How to Fix It
Google has its own strict favicon rules, separate from what your browser accepts — here's how to meet them.
4 min read
ReadFundamentalsFavicon vs Apple Touch Icon vs App Icon: What's the Difference?
Three names, three jobs — how favicons, Apple touch icons and app icons differ, and why a site needs all three.
5 min read
ReadFundamentalsThe Complete Favicon Size Guide for 2026 (16px to 512px)
Every favicon size a modern site actually needs, what each one is for, and which file to export it as.
4 min read
ReadSEOFavicon and SEO: Does It Actually Affect Rankings?
What a favicon can and can't do for search rankings — and the real, indirect ways it affects clicks.
4 min read
ReadTroubleshootingWhy Isn't My Favicon Showing Up? 9 Common Causes and Fixes
The nine most common reasons a favicon refuses to appear, in the order you should actually check them.
5 min read
ReadFundamentalsDo You Still Need a favicon.ico File in 2026?
PNG and SVG favicons are everywhere now — here's why the humble .ico file still refuses to die.
4 min read
ReadFundamentalsPNG vs SVG vs ICO: Which Favicon Format Should You Use?
A practical, no-nonsense comparison of the three favicon formats and when to reach for each one.
4 min read
ReadDesignHow to Design a Favicon That Works at 16 Pixels
What survives being shrunk to a 16-by-16-pixel square, and what quietly turns into a smudge.
5 min read
ReadDesignFavicon Color Theory: Making Your Tab Stand Out
How color choice affects whether your favicon gets noticed in a crowded row of browser tabs.
4 min read
ReadTroubleshootingFavicon Not Updating? How to Bust the Browser Cache
Favicons are cached harder than almost anything else on the web — here's how to force a fresh one.
4 min read
ReadTroubleshootingWhy Your Favicon Looks Broken on iPhone (and How to Fix It)
iOS ignores favicon.ico completely — what it actually reads instead, and how to fix a black or blank home-screen icon.
4 min read
ReadTroubleshootingFavicon Showing a 404 in the Console: How to Fix It
That harmless-looking favicon.ico 404 in your console isn't actually harmless — here's how to clear it for good.
4 min read
ReadDesignEmoji as a Favicon: A Legit (and Free) Logo Alternative
No logo yet? An emoji favicon is a genuinely good placeholder — here's how to pick one that works.
4 min read
Read