avicon

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.

Tutorial

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

Read
Fundamentals

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

Read
Tutorial

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

Read
Tutorial

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

Read
Tutorial

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

Read
Tutorial

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

Read
Fundamentals

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

Read
Troubleshooting

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

Read
Fundamentals

Favicon 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

Read
Fundamentals

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

Read
Troubleshooting

Why 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

Read
Fundamentals

Do 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

Read
Fundamentals

PNG 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

Read
Design

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

Read
Design

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

Read
Troubleshooting

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

Read
Troubleshooting

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

Read
Troubleshooting

Favicon 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

Read
Design

Emoji 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