The favicon.tools blog

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

How 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

Maskable 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

The 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

How 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

Dark 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

How to Add a Favicon in Astro and SvelteKit

Put favicon files in public/ (Astro) or static/ (SvelteKit), add the link tags in your layout or app.html, and fix the base-path and adapter issues that break favicons after deploy.

6 min read

How 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

The 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

How 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

How 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

How 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

How 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

The 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

Google 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

Favicon vs Apple Touch Icon vs App Icon: What's the Difference?

A favicon is the 16–32px tab icon, the Apple touch icon is the 180×180 opaque PNG iOS uses for home-screen shortcuts, and the app icon comes from your web manifest. What each needs and the tags to add.

5 min read

The 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

Read SEO

Favicon 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

Why Isn't My Favicon Showing Up? 9 Common Causes and Fixes

Favicon not showing? Check these 9 causes in order: browser cache, a missing or malformed link tag, a 404 on the file, wrong MIME type, JavaScript-only injection, CDN caching, a stale service worker, a bad relative path, or a corrupted file.

5 min read

Do You Still Need a favicon.ico File in 2026?

Yes, but not for the reason most guides give. Browsers use /favicon.ico only as a fallback, while feed readers, link previews and crawlers still look there first. What to put in it and how small it can be.

4 min read

Favicon Format: PNG vs ICO vs SVG — Which Should You Use?

Which file format should a favicon be? Use PNG for the sized icons, a multi-size favicon.ico (16, 32, 48px) at the site root, and an optional SVG — here is what each format does and the exact tags to ship.

4 min read

How 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

Favicon 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

Favicon 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

Why 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

Favicon Showing a 404 in the Console: How to Fix It

GET /favicon.ico 404 means the browser found no icon declared on that page, so it tried the default path. Tested in Chrome: what triggers the request, when it doesn't happen, and how to fix it on any stack.

5 min read