What favicons do I need?

Modern websites use different favicon sizes and formats across browsers, phones, and app launchers. This tool creates PNG icons from your image, a multi-size favicon.ico with 16, 32, and 48 pixel frames, separate maskable PWA icons, and a web manifest. The ICO packages those PNG frames in the icon file format; it is not a PNG renamed with an .ico extension.

16×16 / 32×32 PNG and favicon.ico: browser tab and legacy fallback
48×48 PNG: Windows taskbar shortcut
180×180 PNG: Apple touch icon (iOS home screen)
192×192 / 512×512 PNG: standard and maskable Android / PWA icons
site.webmanifest: app name and icon descriptions for PWA-capable browsers

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.
Maskable icons include an extra centered safe area so launchers can crop their edges to a circle or other shape. The Apple touch background color fills transparent pixels because iOS home-screen icons are opaque.

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" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.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

This tool accepts SVG uploads, then rasterizes them through the browser into the PNG outputs. The original SVG is not packaged, and the generated ZIP does not include a favicon.svg. If you want a vector favicon, keep and publish the original SVG separately. Modern browsers support a link such as <link rel="icon" type="image/svg+xml" href="/favicon.svg">; SVG files can also respond to a 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>

When publishing that separately maintained SVG, place its link before the generated ICO and PNG fallbacks. The snippet from this tool only links to files that its ZIP actually contains.

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
favicon.ico	Multi-size browser fallback with 16, 32, and 48 pixel frames
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
192×192 / 512×512 maskable	PWA launchers that crop icons to a shape

What favicons do I need?

Tips for best results

Complete favicon HTML snippet

SVG favicons

Favicon size guide

Related tools