Favicon Generator
Generate favicons in all sizes (16×16 to 512×512) from any image. Square, rounded or circle shape. Transparent background support. HTML snippet included. 100% browser-based.
Every Website Needs a Favicon - Getting All the Sizes Right Is the Hard Part
A favicon is not one file - it is a set of files at specific dimensions, each serving a different context. The 16×16px version appears in browser tabs and bookmark bars. The 32×32px version is used by taskbars and HiDPI tabs. The 180×180px Apple Touch Icon appears on iOS home screens when someone saves your site. The 192×192px icon is used by Android and PWA manifests. The 512×512px version powers PWA splash screens. Getting all of them from a single source image, correctly sized and shaped, is the purpose of this tool.
Source Image Requirements
The ideal source image is a square PNG with a transparent backgroundat 512×1024px or larger. Square ensures the icon is not distorted when the tool crops to the target dimensions. Transparent background lets you apply any background colour or keep it transparent for different platform contexts. If your logo or icon has a coloured background already, the tool renders it as-is - you can still add padding to prevent the icon art from touching the edges. Non-square images are centre-cropped to a square before resizing, so keep your icon art centred in the source file. A high-resolution source (512px+) ensures all output sizes are sharp - scaling down from 512px to 16px uses the browser's high-quality smoothing.
Square, Rounded and Circle Shapes
Square is the correct choice for most platforms - browser favicons, Windows icons and Android icons all display as square or with the OS's own corner rounding applied. Rounded applies an 18% corner radius matching the iOS app icon shape - use this when generating the Apple Touch Icon (180×180) or any icon specifically for iOS context where the platform does not add its own rounding. Circle produces a circular PNG - useful for platforms that display icons in a circular frame and you want pixel-perfect control over the circle boundary rather than relying on the platform's CSS clip.
The Output Sizes and Where Each Is Used
The Recommended preset selects 16, 32, 48, 180 and 192px - the five most universally required sizes. All selects every available size for maximum coverage.16×16 - browser tab favicon, bookmark icon. 32×32 - HiDPI browser tab, Windows taskbar shortcut. 48×48 - Windows site icon, standard app icon. 64×64 - Windows desktop shortcut. 96×96 - Google TV. 128×128 - Chrome Web Store listing. 180×180 - Apple Touch Icon for iOS home screen. 192×192 - Android PWA icon and manifest icon. 256×256 - Windows high-res icon. 512×512 - PWA splash screen and high-res manifest icon.
The HTML Snippet - Pasting Into Your <head>
After generating, the tool produces a ready-to-paste HTML snippet containing<link rel="icon"> and <link rel="apple-touch-icon">tags for every selected size. Copy this into your HTML <head>and upload the downloaded PNG files to the root of your web server. Most browsers check for a /favicon.ico file at the root by default - if you only have PNGs, the explicit <link> tags in the snippet ensure browsers find the right icon. For the 180px Apple Touch Icon, the file should be named apple-touch-icon.png (the download uses this name automatically) and placed at the root.
Icon Padding - Preventing Edge Clipping
The Icon Padding slider adds whitespace between the icon art and the edge of the canvas. A value of 0% means the art fills the entire canvas - fine for logos that already have internal whitespace. A value of 10 - 15% adds breathing room around logos that touch the edges, preventing them from looking clipped at small sizes particularly at 16×16 where every pixel counts. At 16px with 10% padding, the icon art occupies a 13×13px area - tight, but preventing edge touching. Increase padding for simple geometric logos; keep it low for logos that already have their own internal spacing. After generating your favicons, use the Image Compressor to reduce PNG file sizes before uploading to your server.
✓Verified by ToollyX Team · Last updated June 2026
Frequently Asked Questions
Disclaimer: All favicon generation is performed locally in your browser. No images are uploaded to any server. Always test favicons across target browsers before deployment.