myfavicon

Favicon resources

Everything you need to create, add and troubleshoot a website icon — guides, size charts and quick fixes, all free.

Basics

What is a favicon?

The meaning and purpose of a favicon, where it appears, and why it matters for branding and trust.

Formats

ICO vs PNG favicon

Which format to use, browser support, sharpness and transparency — with a comparison table.

Formats

SVG favicon

Why vector icons stay sharp at any size, how to add one, and how to make it dark-mode aware.

Quick win

Emoji favicon

Use an emoji as your icon with a single line of SVG — no image editing needed.

Reference

Favicon size guide

Every size that matters (16 to 512) and the exact HTML tags to add to your site.

Reference

PWA icons

Required sizes, the web app manifest, maskable icons and common install mistakes.

How-to

How to add a favicon

Four quick steps for static sites and the notes for Next.js, Vite and WordPress.

Troubleshooting

Favicon not showing?

The five causes and fixes: cache, wrong path, non-square art, bad format, conflicting tags.

Reference

Favicon FAQ

Short answers to the most common favicon questions in one place.

How-to

Apple touch icon

The correct 180×180 size, the link tag, and fixes for black boxes and blurry icons on iOS.

Reference

site.webmanifest

PWA icons, maskable icons and the manifest fields that make a site installable.

Create your favicon free →