Favicon Generator
Generate favicons in all required sizes from any image. Download as PNG.
① Upload your logo or icon image ② Preview all 6 standard sizes ③ Download as ZIP
What is a favicon?
A favicon (short for "favorite icon") is a small icon displayed in browser tabs, bookmarks, and history. Modern websites need multiple sizes: 16×16 for browser tabs, 32×32 for desktop shortcuts, 180×180 for Apple Touch Icon (iOS home screen), 192×192 for Android Chrome, and 512×512 for Progressive Web App splash screens. This tool generates all sizes from a single source image using the Canvas API entirely in your browser. Add them to your HTML with <link rel="icon"> tags.
Frequently Asked Questions
Modern favicons require multiple sizes: 16×16 (browser tab), 32×32 (taskbar/desktop), 48×48 (Windows icon), 180×180 (Apple Touch Icon for iOS), 192×192 (Android Chrome), and 512×512 (PWA splash). This tool generates all six standard sizes from your source image.
Use a square image for best results. PNG with transparency is ideal — transparent areas will be preserved. SVG vector images produce the sharpest favicon at all sizes. JPG is supported but any background color becomes visible. Minimum recommended source size is 512×512 pixels.
Add these tags to your HTML <head>: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. For Apple devices: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. For Android/PWA: add a web app manifest with icons array referencing 192×192 and 512×512 sizes.
favicon.ico is the legacy format — a single file that can contain multiple sizes (16, 32, 48px). PNG favicons are modern and widely supported since IE11. Best practice: serve both for maximum compatibility. Place favicon.ico in the root directory (browsers find it automatically) and link PNG sizes via <link> tags.
Favicons are aggressively cached by browsers. To force an update: hard-refresh (Ctrl+Shift+R), clear browser cache, or append a query string to the favicon URL (e.g., favicon.png?v=2). In development, use browser DevTools to disable cache while developing.
Yes. Progressive Web Apps require specific icon sizes for the app manifest: at minimum 192×192 for home screen icon and 512×512 for splash screen. Add them to manifest.json under the "icons" key with "purpose": "any maskable". Using maskable icons (with safe zone padding) ensures icons look good on all Android launcher shapes.
The Apple Touch Icon (apple-touch-icon) is the icon displayed when a user adds your website to their iOS home screen. The recommended size is 180×180px. Apple automatically applies rounded corners and gloss effects. Use a square image without pre-rounded corners. Link it with: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.