Question 1

What size should a favicon be?

Accepted Answer

Modern browsers use multiple favicon sizes. The minimum is 16×16px (classic favicon.ico), but you should also provide 32×32px for standard HD displays, 180×180px for Apple Touch Icon (iOS home screen), and 192×192px and 512×512px for Android PWA icons. This generator creates all sizes as separate PNG files you can reference via HTML link tags.

Question 2

What format should a favicon be?

Accepted Answer

Modern browsers support PNG, SVG, ICO, and WebP favicons. SVG is the best choice for modern browsers — it scales perfectly to any size and is tiny in file size. For maximum compatibility including older browsers, use PNG at 32×32px as a fallback. The HTML link tag <link rel='icon' href='favicon.svg' type='image/svg+xml'> followed by a PNG fallback covers all cases.

Question 3

How do I add a favicon to my website?

Accepted Answer

Put your favicon file(s) in your website root directory and add link tags inside your HTML : for SVG, for PNG, and for iOS. Browsers prefer SVG if supported and fall back to the others.

Question 4

What is an Apple Touch Icon?

Accepted Answer

An Apple Touch Icon is the icon that appears when a user saves your website to their iPhone or iPad home screen. It should be 180×180px PNG. Without it, iOS uses a screenshot of your page. Add it with: <link rel='apple-touch-icon' href='/apple-touch-icon.png'>.

Favicon Generator

Related Tools