What favicons do I need?

Modern websites need several favicon sizes for different platforms. This tool generates the most important ones:

16×16 / 32×32 PNG: browser tab icon on desktop
48×48 PNG: Windows taskbar shortcut
180×180 PNG: Apple touch icon (iOS home screen)
192×192 / 512×512 PNG: Android and PWA icons
site.webmanifest: required for installable Progressive Web Apps

Tips for best results

Start with a square PNG or SVG at 512×512 or larger.
Use a transparent background if your icon has a non-rectangular shape.
Use the padding slider to add breathing room around your icon, especially useful for logos that extend to the edges.

Complete favicon HTML snippet

Add these tags to your <head> after extracting your favicon ZIP:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

SVG favicons

Modern browsers (Chrome 80+, Firefox 41+, Safari 14+) support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons scale perfectly at any size and can respond to the user's color scheme preference using a CSS media query inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) { .icon { fill: white; } }
    .icon { fill: black; }
  </style>
  <!-- your icon paths -->
</svg>

Use SVG as the primary favicon with a PNG fallback for older browsers: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> placed before the PNG fallback.

Favicon size guide

Size	Use
16×16	Browser tab (small)
32×32	Browser tab (retina) and Windows taskbar shortcut
48×48	Windows site shortcut icon
180×180	Apple touch icon (iOS home screen)
192×192	Android home screen and Chrome PWA icon
512×512	PWA splash screen and high-resolution display