What is a Favicon?
A favicon is the small icon displayed in browser tabs, bookmarks, and home screen shortcuts. Modern browsers and devices require favicons in multiple sizes to display correctly across different contexts — the 16×16 and 32×32 sizes are used in browser tabs, 180×180 is used by Apple devices for home screen icons, and 192×192 and 512×512 are required for Progressive Web Apps (PWAs).
Which Favicon Sizes are Required?
- 16×16 — Standard browser tab favicon.
- 32×32 — Used by some browsers for taskbar icons and higher-DPI displays.
- 48×48 — Windows site icons and some taskbar contexts.
- 64×64 — High-DPI browser tabs and Windows shortcut icons.
- 96×96 — Google TV and high-density desktop displays.
- 128×128 — Chrome Web Store and extension icons.
- 180×180 — Apple Touch Icon (iPhone and iPad home screen).
- 192×192 — Android Chrome home screen and PWA manifest.
- 256×256 — Windows 10 app list icons.
- 512×512 — PWA splash screens and high-resolution app stores.
Best Source Image
For best results, use a square image as your source. SVG files work perfectly since they are resolution-independent. If using a raster image, start with at least 512×512 pixels to avoid upscaling artifacts at larger sizes. The tool uses "contain" scaling, so non-square images will have padding added to center them within each canvas.
Frequently Asked Questions
What is the difference between a favicon.ico and PNG favicons?
The legacy favicon.ico format can bundle multiple sizes in a single file and is automatically loaded by browsers at /favicon.ico without any HTML. Modern browsers fully support PNG favicons declared with <link> tags, which are easier to generate and have better quality. This tool generates individual PNG files for each size.
Should I use a transparent or solid background?
Transparent backgrounds work well if your icon design has its own visible shape and doesn't rely on a solid fill to look correct. Icons that appear light (white or near-white) should use a colored solid background, otherwise they may be invisible against a white browser tab. Use the background color option to set a matching brand color.
How do I use the generated files?
Download the sizes you need and upload them to the root of your web server (e.g., /public/). Then add the HTML snippet shown above to the <head> section of every page on your site.