How to Generate Favicons for Your Website in All Sizes
Favicons are the small icons that appear in browser tabs, bookmarks, and mobile home screens. Modern websites need favicons in multiple sizes to support different devices and contexts. This guide shows you how to generate all required favicon sizes from a single image using fixie.tools — completely free, no signup required.
Step 1: Upload Your Source Image
Go to fixie.tools/favicon and upload your logo or icon. For best results, use a square image at least 512x512 pixels with transparent background (PNG format). The image should be simple and recognizable even at small sizes — avoid fine details that won't be visible at 16x16 or 32x32 pixels.
Step 2: Review Generated Sizes
The tool automatically generates favicons in all standard sizes required for modern websites: 16x16 and 32x32 for browser tabs, 48x48 for desktop shortcuts, 180x180 for Apple Touch Icon (iOS devices), 192x192 and 512x512 for Android and Progressive Web Apps. You'll see a preview of each size so you can verify your icon looks good at all scales.
Step 3: Customize Colors and Padding
If needed, adjust the background color, padding, or shape of your favicon. You can add background color if your source image doesn't have transparency, apply rounded corners for a modern look, or add padding to ensure your icon doesn't touch the edges. The tool updates previews in real-time as you make changes.
Step 4: Download the Favicon Package
Click the download button to get a ZIP file containing all favicon sizes plus the required HTML code snippets. The package includes favicon.ico (multi-size ICO file), individual PNG files for each size, apple-touch-icon.png for iOS, and a manifest.json file for Progressive Web Apps. Everything you need is included in one download.
Step 5: Add to Your Website
Extract the ZIP file and upload all images to your website's root directory (where index.html lives). Then add the provided HTML link tags to your page's <head> section. The most important tags are the apple-touch-icon link for iOS devices and the manifest.json reference for PWAs. Once uploaded, your favicon will appear in browser tabs, bookmarks, and when users save your site to their home screen.