CSS Gradient Generator - Linear & Radial Gradients
Free online CSS gradient generator. Create beautiful linear, radial, and conic gradients with live preview, color stops, angle control, and instant CSS code exp...
19 min de lecture
What is a Favicon?
A favicon (short for “favorite icon”) is a small icon that represents your website across browsers, mobile devices, and bookmarks. Favicons appear in:
- Browser tabs: The tiny icon next to your page title in Chrome, Firefox, Safari, Edge, and other browsers
- Bookmarks/Favorites: Visual identifier when users save your site for later
- Address bars: Some browsers display favicons in the URL bar for added visual context
- Mobile home screens: iOS and Android show your favicon when users add your website as a home screen shortcut
- Browser history: Helps users find your site in their browsing history
- Tab search: Makes your site identifiable when users search through open tabs
Why favicons matter:
- Brand recognition: Users identify your site instantly in crowded tab bars with 20+ open tabs
- Professionalism: Missing favicons make websites appear incomplete, unpolished, or untrustworthy
- User experience: Visual markers improve navigation—users locate your tab faster among dozens of open tabs
- Bookmarking: Distinctive favicons encourage users to save your site and help them find it later
- Mobile web apps: iOS and Android use favicons as app icons when users install Progressive Web Apps (PWA)
Technical requirements:
Modern websites need multiple favicon sizes to support different devices and display contexts. Browsers request specific sizes: 16x16px for standard tabs, 32x32px for Retina displays, 48x48px for Windows taskbar, 180x180px for Apple Touch Icons, and 192x192px + 512x512px for Android Chrome and PWA. This tool generates all required sizes from a single uploaded image, ensuring pixel-perfect display across all platforms.
How to Use This Favicon Generator
Follow these simple steps to create professional favicons for your website:
Step 1: Upload your image
Click the upload area or drag-and-drop your logo, icon, or image. Supported formats: PNG, JPG, SVG. Recommended source image size: 512x512 pixels or larger (higher resolution = sharper favicons). Use square images (1:1 aspect ratio) for best results—rectangular images will be cropped.
Step 2: Customize appearance
- Background color: Choose a solid color background or transparent. Transparent works best for simple icon logos. Solid colors help text-based logos stand out.
- Padding: Add space around your image (0-30%). Prevents edge-clipping at small sizes. Useful when your logo extends to image edges.
- Border radius: Round the corners (0-50%). 50% creates a perfect circle. Match your brand’s design language (sharp corners vs. rounded).
Preview updates in real-time as you adjust settings. Check the 16x16px preview—if your design isn’t recognizable at that size, simplify your source image.
Step 3: Preview all sizes
Review generated favicons in the preview grid. Each size is displayed exactly as it will appear on devices:
- 16x16px: Browser tabs (most common viewing size)
- 32x32px: Retina displays and Windows taskbar
- 48x48px: Windows site icons
- 180x180px: Apple Touch Icon (iOS home screen)
- 192x192px & 512x512px: Android Chrome and PWA
The “Browser Tab Preview” shows how your 16x16px favicon appears in an actual browser tab with page title.
Step 4: Download favicons
- Download All (ZIP): Downloads all six favicon sizes as individual PNG files (downloads sequentially with short delays between files)
- Individual downloads: Click any size button to download that specific favicon only
- Bulk download tip: Use “Download All” for complete favicon packages ready to upload to your server
Step 5: Copy HTML code
Click “Copy” to copy the ready-to-use HTML code snippet. Paste this code into your website’s <head> section (between <head> and </head> tags). The code includes <link> tags for all favicon sizes with correct rel attributes and size specifications.
Step 6: Upload to your website
Place downloaded PNG files in your website’s root directory (same folder as index.html). Standard file locations: /favicon-32x32.png, /favicon-16x16.png, /apple-touch-icon.png, etc. Alternatively, create a /favicons/ folder and update HTML href paths accordingly.
Step 7: Test and verify
Hard refresh your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear cached favicons. Check your site in multiple browsers: Chrome, Firefox, Safari, Edge. Test on mobile devices: iOS Safari (add to home screen), Android Chrome. Verify favicon appears in tabs, bookmarks, and address bar.
Favicon Size Requirements by Platform
Different browsers and devices require specific favicon sizes. This tool generates all essential sizes automatically:
Browser favicons (desktop)
- 16x16 pixels: Standard favicon for browser tabs, address bars, and bookmarks. Displayed in Chrome, Firefox, Safari, Edge, Opera tabs. Must be simple enough to recognize at this tiny size (256 total pixels). Focus on brand colors and basic shapes—intricate details disappear.
- 32x32 pixels: Retina display favicon for high-DPI screens (MacBooks, 4K monitors). Also used in Windows taskbar for pinned websites. Provides sharper, crisper icons on modern displays. Allows slightly more detail than 16x16px version.
- 48x48 pixels: Windows site icons and taskbar previews. Displayed in Windows taskbar when sites are pinned. Also appears in Windows site tile previews and some Windows UI contexts. More detail visible at this size.
iOS favicons (Apple devices)
- 180x180 pixels: Apple Touch Icon for iPhone and iPad. Displayed when users add your website to their iOS home screen via Safari’s “Add to Home Screen” feature. iOS automatically applies rounded corners (no need to round your image). Also used in Spotlight search results and Safari tab previews. Replaced older 152x152px and 120x120px sizes (iOS 8+). Design tip: Leave 10-15% padding around important elements—iOS corner rounding crops edges.
Android favicons (Chrome & PWA)
- 192x192 pixels: Standard Android Chrome icon. Used when Android users add your site to home screen. Also displayed in Chrome’s “Add to Home Screen” prompt. Specified in Web App Manifest (
site.webmanifest) for Progressive Web Apps. Android shows full square icon (no automatic corner rounding like iOS). - 512x512 pixels: High-resolution Android icon for PWA and app launchers. Displayed in Android app launchers, splash screens, and PWA install prompts. Future-proofs for higher-DPI devices and larger display contexts. Required for Progressive Web App compliance (Google Lighthouse checks for 512x512 icon). Also used in Google Play Store if you convert PWA to native app.
Legacy formats (optional)
- ICO format: Multi-size ICO file (16x16, 32x32, 48x48 in one file) for legacy Internet Explorer support. Modern browsers support PNG favicons, so ICO is rarely needed in 2026. This tool focuses on PNG output (better compression, smaller file sizes, universal modern browser support).
Coverage summary:
These six sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) cover 99%+ of real-world use cases across desktop browsers, mobile browsers, iOS, Android, and Progressive Web Apps. Additional sizes exist for niche cases (270x270px for Windows Live Tiles, 196x196px for Opera Speed Dial), but the six generated by this tool satisfy virtually all scenarios.
Favicon Design Best Practices
Creating effective favicons requires balancing brand identity with technical constraints:
1. Start with simplicity
Favicons are displayed at tiny sizes (16x16px = 256 pixels total). Complex logos with intricate details become unrecognizable blurs. Simplify your design: Use 1-3 colors maximum (avoid gradients—they muddy at small sizes). Focus on basic geometric shapes (circles, squares, triangles, simple letterforms). Remove all unnecessary details (taglines, decorative elements, complex illustrations). Extract the most distinctive element of your brand (Nike swoosh, not full logo with text).
2. Maximize contrast
High contrast ensures visibility across different browser themes and backgrounds. Choose contrasting color combinations: Dark blue on white, black on yellow, white on dark red. Avoid similar shades (light gray on white disappears, dark gray on black becomes invisible). Test your favicon on both light backgrounds (default Chrome) and dark backgrounds (dark mode browsers). Add solid background if your logo uses light colors that vanish on light tabs.
3. Keep it square
Favicons are displayed as squares (1:1 aspect ratio) across all platforms. Rectangular logos will be cropped or distorted. If your logo isn’t square, add transparent or colored padding to create square format before uploading. Centered logos with equal padding on all sides ensure consistent display.
4. Use bold, thick lines
Thin lines (1-2px at source size) disappear when scaled to 16x16px. Use thick, bold lines—minimum 3-4px thickness at source image size (512x512px). Bold shapes remain recognizable at small sizes. Avoid delicate, intricate linework (save for print materials).
5. Test at 16x16 pixels
Your 16x16px favicon is the most-viewed size (browser tabs). Use this tool’s preview to verify recognizability at 16x16px. If details are indistinguishable, simplify further. View favicon from arm’s length—if you can’t identify it, users won’t either. Consider creating a dedicated favicon-specific logo variant (many brands maintain separate full logo and simplified icon versions).
6. Maintain brand consistency
Favicons should be instantly recognizable as your brand. Use brand colors consistently (exact hex codes from brand guidelines). Match visual style to your website design (modern, playful, professional, minimalist). Ensure favicon aligns with logo, website design, and other brand touchpoints (app icons, social media profile images).
7. Avoid text (usually)
Full text is unreadable at 16x16px (letters collapse into unrecognizable pixels). If you must use text, limit to 1-2 characters (brand initials: IBM, HBO, CNN). Use bold, sans-serif fonts (Helvetica Bold, Arial Black, Roboto Bold). Increase letter spacing and size for maximum legibility. Add solid background behind text for contrast. Better approach: Use icon version of logo instead of text wordmark.
8. Consider transparency wisely
Transparent backgrounds work for simple icon logos (Apple logo, Nike swoosh, Twitter bird). However, transparency can backfire: Very light logos (white, pale yellow) disappear on light browser backgrounds. Complex transparent shapes may show artifacts or aliasing at small sizes. For maximum compatibility, solid background often works better—test both options in this tool.
9. Add padding
Edge-to-edge logos may get clipped at small sizes or when browsers add effects. Use this tool’s padding slider to add 5-15% space around your logo. Prevents important elements from touching edges (especially important for iOS, which applies corner rounding). Creates breathing room, improving visual clarity at small sizes.
10. Future-proof with SVG source
If you have an SVG version of your logo, upload it to this tool. SVG is vector-based, maintaining perfect quality when scaled to any size. Generates sharper favicons than upscaling small raster images. However, note that browsers don’t support SVG favicons directly—this tool converts SVG to required PNG sizes.
Progressive Web App (PWA) Favicons
Progressive Web Apps use favicons as app icons when users install your website to their device home screen. PWA favicons have specific requirements:
PWA icon requirements
- Sizes: 192x192px (standard) and 512x512px (high-resolution) required for PWA compliance
- Format: PNG files (JPEG not recommended—transparency support needed)
- Manifest: Icons must be declared in Web App Manifest (
site.webmanifest) JSON file - Purpose: Specify purpose as “any” (default) or “maskable” for adaptive icons with safe zones
Creating a Web App Manifest
After generating favicons with this tool, create a site.webmanifest file:
{
"name": "Your Website Name",
"short_name": "Short Name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Link manifest in your HTML <head>:
<link rel="manifest" href="/site.webmanifest">
Maskable icons (advanced)
Android adaptive icons use “maskable” specification, allowing different shapes (circle, squircle, rounded square) based on device manufacturer. Maskable icons require 20% safe zone padding on all sides (important content must stay within central 80%). This tool’s padding slider helps create maskable-compliant icons—set padding to 20% for full safety.
Testing PWA favicons
- Add manifest to your website
- Install PWA on Android device via Chrome’s “Install app” prompt
- Verify icon appears correctly on home screen
- Check icon in app launcher and multitasking view
- Use Google Lighthouse to audit PWA compliance (checks for 192x192 and 512x512 icons)
Troubleshooting Favicon Issues
Common favicon problems and solutions:
Problem: Favicon not appearing in browser
- Solution: Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R) to clear cached favicon. Browsers cache favicons aggressively—old version may persist for days.
- Solution: Verify HTML
<link>tags are in<head>section (not<body>). Check file paths are correct (/favicon-32x32.png, notfavicon-32x32.png). - Solution: Ensure favicon files uploaded to correct server directory (root directory
/or wherever HTML href points). - Solution: Check file permissions—favicons must be publicly accessible (755 permissions on Unix servers).
Problem: Favicon shows in some browsers but not others
- Solution: Different browsers prefer different sizes. Ensure you have both 16x16px and 32x32px favicons (most critical sizes).
- Solution: Check browser-specific requirements—Safari sometimes requires specific Apple Touch Icon markup.
- Solution: Validate HTML syntax—malformed
<link>tags may work in some browsers but fail in others.
Problem: Old favicon still showing after update
- Solution: Browsers cache favicons based on URL. Hard refresh may not be enough—clear entire browser cache.
- Solution: Version your favicon files (
favicon-v2.png) and update HTML hrefs to force reload. - Solution: Some users may see old favicon for weeks due to aggressive browser caching. Consider adding cache-control headers to favicon files:
Cache-Control: public, max-age=604800(1 week).
Problem: Favicon blurry or pixelated
- Solution: Upload higher-resolution source image (minimum 512x512px, ideally 1024x1024px or SVG).
- Solution: Ensure source image is square (1:1 ratio). Rectangular images get distorted when forced to square.
- Solution: Check that you’re generating all required sizes—browsers downscaling large favicons create blurry results.
Problem: Favicon not showing on iOS home screen
- Solution: Ensure Apple Touch Icon is 180x180px (older tutorials mention 152x152px or 120x120px—these are outdated).
- Solution: Verify HTML includes
<link rel="apple-touch-icon" href="/apple-touch-icon.png">tag. - Solution: File must be named
apple-touch-icon.pngor specified in link tag. iOS looks for this specific filename. - Solution: Don’t round corners yourself—iOS applies corner rounding automatically. Pre-rounded images get double-rounded.
Problem: Transparent favicon has white background
- Solution: Some browsers don’t support transparency in favicons. Add solid background color using this tool.
- Solution: Ensure PNG format (not JPG—JPEG doesn’t support transparency).
- Solution: Check alpha channel in source image—some image editors save “transparent” as white background with no alpha.
Problem: Favicon too detailed, unrecognizable at 16x16px
- Solution: Simplify your design—remove intricate details that disappear at small sizes.
- Solution: Create dedicated favicon-specific version of logo (simplified icon vs. detailed full logo).
- Solution: Use this tool’s padding slider to add space, reducing content complexity within small canvas.
Favicon File Organization
Best practices for organizing favicon files on your server:
Root directory (recommended)
Place favicons in website root directory (/) for maximum compatibility:
/
├── index.html
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest
Advantages: Simple file paths in HTML (href="/favicon-32x32.png"). Legacy browsers auto-detect favicon.ico in root without HTML tag. Standard location users expect for troubleshooting.
Dedicated folder (alternative)
Create /favicons/ or /images/favicons/ folder for organization:
/
├── index.html
└── favicons/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest
Update HTML hrefs: href="/favicons/favicon-32x32.png". Cleaner root directory. Easier to manage multiple icon sets (light/dark theme variants).
File naming conventions
This tool uses standard favicon naming conventions:
favicon-16x16.png,favicon-32x32.png,favicon-48x48.png: Browser favicons with size in filenameapple-touch-icon.png: iOS home screen icon (standard name iOS looks for)android-chrome-192x192.png,android-chrome-512x512.png: Android/PWA icons with size in filename
Maintain these exact names for maximum compatibility and clarity.
Favicon Generator Settings & Customization
This tool provides several customization options:
Background color
Choose solid color background or transparent. Color picker allows any hex color (#ffffff, #3b82f6, etc.). “Transparent” button sets transparency instantly. Transparent works best for simple icon logos (Nike swoosh, Apple logo). Solid colors help text-based logos stand out and provide contrast.
Padding
Add space around your image (0-30%). 0% = edge-to-edge (image fills entire canvas). 10-15% = comfortable padding for most logos. 20% = maskable icon safe zone (for PWA adaptive icons). 30% = maximum padding for very generous spacing. Use padding to prevent edge-clipping at small sizes and create breathing room.
Border radius
Round the corners of your favicon (0-50%). 0% = sharp square corners (traditional favicon look). 25% = moderately rounded corners (modern, friendly aesthetic). 50% = perfect circle (popular for profile-style icons). Match your brand’s design language—tech brands often use slight rounding (10-20%), playful brands use heavy rounding (40-50%).
Settings persistence
This tool saves your customization settings to browser localStorage (background color, padding, border radius). Settings persist across page refreshes and future visits. Cleared when you clear browser data. Allows consistent favicon generation workflow without re-entering preferences.
