What is Favicon Generator?
Favicon Generator creates all the favicon sizes and formats needed for modern browsers and platforms. Upload an image (SVG, PNG, or JPG) and the tool generates: favicon.ico (multi-size), PNG favicons (16x16, 32x32, 48x48, 192x192, 512x512), Apple Touch Icon (180x180 for iOS), and the manifest.json snippet for PWA. Download all as a ZIP or individual files, plus the complete HTML head snippet to include them.
Favicons have evolved significantly: the original favicon.ico supported 16x16 and 32x32 pixels. Modern browsers support: SVG favicons (scalable, single file -- best for simple icons), PNG at various sizes, Apple Touch Icons (iOS home screen, 180x180), Android Chrome icons (192x192, 512x512 in manifest.json), maskable icons (PWA, must have safe area within 80% center). The minimum modern setup: one SVG favicon, a 32x32 PNG fallback, and an Apple Touch Icon 180x180.
Favicon best practices: Use a simple, recognizable icon that is readable at 16x16. Avoid text (unreadable at small sizes). Test at 16x16 -- the most common size shown in browser tabs. SVG favicons can adapt to dark/light mode with CSS: link rel=icon type=image/svg+xml -- this is the modern preferred format. Favicon.ico files should be placed in the web root (not a subfolder) -- browsers automatically request /favicon.ico regardless of the HTML link tag.
How to Use
- Upload an image file (SVG recommended for best quality; PNG or JPG works too).
- Adjust the background color and padding if needed.
- Click 'Generate' to create all favicon sizes and formats.
- Download the ZIP file containing all sizes plus manifest.json.
- Copy the HTML head snippet and add it to your HTML template.
Examples
SVG favicon (modern)
Result: link rel='icon' type='image/svg+xml' href='/favicon.svg' -> works in Chrome, Firefox, Edge
Full favicon setup HTML
Result: link[rel=icon][sizes=any][href=/favicon.ico] + link[rel=apple-touch-icon][href=/apple-touch-icon.png]
PWA manifest icons
Result: manifest.json: icons:[{src:/icon-192.png,sizes:192x192,type:image/png,purpose:any maskable}]
Frequently Asked Questions
What is the difference between favicon.ico and favicon.png?
favicon.ico is the original format -- a container file that can hold multiple sizes (16x16, 32x32, 48x48) in one file. ICO format is supported by all browsers including Internet Explorer. favicon.png is simpler and higher quality but only holds one size. Modern recommendation: use an SVG favicon as the primary (link[rel=icon][type=image/svg+xml]) for modern browsers, plus favicon.ico as a fallback for older browsers. The ICO fallback only needs 32x32 today -- multi-size ICO is not necessary for modern stacks.
What sizes of favicon do I need?
Minimum modern setup: favicon.svg (modern browsers, scalable, single file), favicon.ico at 32x32 (legacy fallback), apple-touch-icon.png at 180x180 (iOS home screen). For PWA (Progressive Web App): icon-192x192.png and icon-512x512.png in manifest.json. For complete coverage: 16x16 (browser tab classic), 32x32 (browser tab high-DPI), 48x48 (Windows taskbar), 180x180 (Apple Touch), 192x192 (Android Chrome), 512x512 (Android Chrome splash). Tools like realfavicongenerator.net generate all sizes automatically.
How do I create a favicon from a logo?
Best practice: start with your logo in SVG format. Simplify the logo for favicon use -- remove text, reduce detail, use only the symbol/icon portion. Test at 16x16: print a tiny version and squint -- it should still be recognizable. Use strong contrast (dark/light). Avoid gradients that turn muddy at small sizes. Use 2-3 colors maximum. Convert to PNG at required sizes (ImageMagick: convert logo.svg -resize 192x192 icon-192.png). Online tools: realfavicongenerator.net, favicon.io. Then convert to .ico with ImageMagick: convert 32.png 48.png favicon.ico.
What is a maskable icon for PWA?
A maskable icon is a PWA icon design where the main content (logo/symbol) fits within the inner 80% of the icon (the safe area). The outer 20% is a background color that gets cropped in different shapes by Android (circle, squircle, square) depending on the launcher. Without maskable: Android shows your icon in a white circle, cutting off edges. With maskable: the launcher crops your icon into its preferred shape and the background fills the crop. To make icons maskable: add purpose: 'any maskable' to manifest.json, and design with the safe zone in mind. Check with maskable.app.
How do I make a favicon adapt to dark mode?
SVG favicons can include CSS media queries for dark/light mode adaptation: in the SVG file, use a style element: @media (prefers-color-scheme: dark) { .icon-path { fill: #ffffff; } } @media (prefers-color-scheme: light) { .icon-path { fill: #000000; } }. This makes the favicon automatically switch between light and dark versions based on the OS preference. This technique only works with SVG favicons (not PNG or ICO). Support: Chrome 80+, Firefox 89+, Safari 15+. For browsers that do not support SVG favicons, the ICO fallback is used instead.
Related Tools