Favicon Generator
Upload one image, get every favicon size your site needs
Drag & drop an image, or click to upload
PNG, JPG, or SVG — ideally square, 512×512 or larger
About this tool
The Favicon Generator takes a single uploaded image and renders it into every standard favicon size a modern site needs: 16×16 and 32×32 for browser tabs, 48×48 for the Windows taskbar, 180×180 for Apple touch icons (iOS home screen), and 192×192 / 512×512 for Android and web app manifests. Each size is generated on an HTML canvas — the image is scaled to fit and centered, with an optional solid background fill for source images with transparency that need a solid favicon. Download each size individually or all at once, and copy the exact HTML <link> tags to paste into your site's <head>. Processing happens entirely in your browser via the Canvas API — your image is never uploaded to a server.
When to use it
- →Generating a complete favicon set from a single logo file for a new site launch
- →Re-generating favicons after a logo redesign without manually resizing in an image editor
- →Producing the specific sizes required for PWA manifests (192×192, 512×512) alongside classic favicons
- →Adding a solid background to a transparent logo so it reads clearly as a small favicon
Tips
- ◆Start with a square source image at least 512×512px — the generator scales down cleanly but can't add detail when scaling up from a small source.
- ◆If your logo has transparency and looks washed out as a tiny favicon, enable the solid background option and pick a color that matches your brand.
- ◆Browsers and OSes cache favicons aggressively — after replacing your favicon files, a hard refresh or cache-busting query string may be needed to see the update.
- ◆The 512×512 size doubles as your PWA manifest icon — keep it if you have (or plan to add) a web app manifest.
Frequently asked questions
Why do I need so many different favicon sizes?
Different platforms request different sizes for different contexts: browsers use 16×16 and 32×32 for tabs and bookmarks, Windows uses 48×48 for taskbar pins, iOS uses 180×180 when you 'Add to Home Screen', and Android/PWA manifests use 192×192 and 512×512 for home screen icons and splash screens. Providing all of them ensures your icon looks sharp everywhere instead of being stretched from a single small file.
Do I still need a favicon.ico file?
Modern browsers all support PNG favicons referenced via <link rel="icon">, which is what this tool generates — a .ico file is no longer strictly required for current browser versions. Some very old browsers or crawlers still fall back to requesting /favicon.ico by default, so keeping one at your site root as a fallback doesn't hurt, but PNG favicons with proper <link> tags are sufficient for virtually all modern traffic.
What's the difference between the apple-touch-icon and the regular favicon?
The apple-touch-icon (180×180) is what iOS uses specifically when a user adds your site to their home screen — it appears as a full app-like icon, so it should not have transparency (iOS fills transparent areas with black). The smaller favicon sizes are used for browser tabs and bookmarks and can keep transparency.
Why does my icon look pixelated at 16×16 even though the source image was high resolution?
At very small sizes, fine detail in a logo simply can't render clearly — this is a physical limit of a 16×16 pixel grid, not a bug in the generator. Simplify complex logos (remove fine text or thin lines) for the smallest sizes, or accept that the 16px favicon will always be a simplified impression of the full logo.