The favicon is the small icon that appears in a browser tab, a bookmarks list and in address bar suggestions when someone visits a website. Getting it right involves more than just making an image small. A favicon that looks sharp requires the right pixel dimensions, a clean centered design and the correct format for the context it is being used in. The standard favicon size is 16x16 pixels for the base browser tab display, with 32x32 used for higher density displays and 48x48 included in full favicon packages. A poorly prepared favicon looks blurry or indistinct in the tab, which is a small detail that reflects on the overall quality of a website.
How to Resize an Image for Favicon
For the base favicon, enter 16 in both the width and height fields and turn the Maintain Aspect Ratio checkbox off for a forced square output. For a higher resolution version, repeat the process with 32 in both fields. For a complete favicon package, process the same image at 16x16, 32x32 and 48x48 separately.
The source image quality matters more at favicon sizes than at almost any other dimension. A complex logo or detailed illustration loses all recognizable form at 16x16. A simple bold icon with clean edges and minimal detail holds up much better. Start from the largest available version of the icon and scale down for the sharpest result at each size. Upload multiple sizes at once and download as a ZIP when done.
Standard Favicon Sizes
16x16 pixels: the base size displayed in browser tabs on standard resolution screens. 32x32 pixels: used by higher density displays and Windows desktop shortcuts. 48x48 pixels: included in full favicon packages for broader compatibility. 180x180 pixels: the Apple Touch Icon size used when a website is saved to an iOS home screen. 192x192 pixels: used by Android devices for home screen web app icons. A complete favicon package typically includes all of these sizes generated from the same source icon.
Output Format for Favicons
PNG is the most widely supported format for modern favicon implementations. Most browsers accept PNG favicon files directly via the link tag in the HTML head. Transparent backgrounds are supported in PNG and allow the favicon to sit cleanly over the browser tab color. The traditional ICO format bundles multiple sizes into a single file and is still used for the root favicon.ico file that browsers look for by default. PNG at the correct size is the most straightforward approach for most modern web projects.