How do I add a favicon to my website?

Add tags in your HTML : for the classic format, plus for iOS. This tool generates all required sizes and the HTML code to paste.

Utilities

Favicon Generator

Upload an image to generate all favicon sizes, meta tags, and manifest — ready to use.

Frequently Asked Questions

Common questions about the Favicon Generator.

At minimum: 16×16 (browser tab), 32×32 (bookmark bar), 180×180 (Apple touch icon), and a 512×512 PNG for PWA manifest. An SVG favicon with <link rel='icon' type='image/svg+xml'> covers all sizes with a single file in modern browsers.

Yes — modern browsers support SVG favicons via <link rel='icon' type='image/svg+xml' href='/icon.svg'>. SVGs scale perfectly to any size and even support dark mode via prefers-color-scheme media queries inside the SVG. Include a PNG fallback for older browsers.

Add <link> tags in your HTML <head>: <link rel='icon' href='/favicon.ico' sizes='any'> for the classic format, plus <link rel='apple-touch-icon' href='/apple-touch-icon.png'> for iOS. This tool generates all required sizes and the HTML code to paste.

Browsers aggressively cache favicons. Try: hard refresh (Ctrl+Shift+R), clearing browser cache, appending a version query string (?v=2) to the favicon URL, or visiting chrome://favicon/ to force a refresh. On mobile, you may need to remove and re-add the bookmark.

Related Guides

🏷️

Meta Tags & Open Graph

Favicons are part of the meta ecosystem

You might also need

SVG

SVG optimizer

Base64

Base64 encoder & decoder

Lorem

Lorem ipsum generator

Placeholder

Dynamic placeholder images