Brave Browser Favicon Guide
Master favicons for Brave: privacy-focused optimization, Shields compatibility, New Tab page icons, and ensuring your favicons work with Brave's unique features.
Brave Browser Essentials
??
Privacy-First
Built-in blockers
???
Brave Shields
Ad & tracker blocking
?
Chromium-Based
Chrome compatibility
??
Fast & Secure
Optimized browsing
Key Info: Brave is Chromium-based, so it shares Chrome's favicon behavior but with unique privacy features that can affect how resources are loaded.
Brave Favicon Support
Format & Compatibility
| Format | Support | Recommended Size | Notes |
|---|---|---|---|
| ICO | ? Full | 16x16, 32x32 | Traditional format, always works |
| PNG | ? Full | 32x32 (preferred) | Best quality, transparency support |
| SVG | ? Full | Any (vector) | Perfect scaling, future-proof |
| GIF | ? Static | 16x16, 32x32 | No animation support |
| WebP | ? Yes | 32x32 | Supported, but PNG recommended |
Recommended: PNG 32x32 for standard favicons + SVG for modern, scalable icons. Brave follows Chrome's standards.
Brave Shields & Favicon Loading
How Brave Shields Affect Favicons
Brave Shields Protection Levels:
Shields Down
All favicons load normally, including from CDNs and external sources.
Standard (Default)
Same-origin favicons work. Some third-party requests may be blocked.
Aggressive
Most external resources blocked. Use same-origin favicons only.
Best Practices for Brave Shields:
- Host locally: Always serve favicons from your own domain (not CDN in critical paths)
- Same origin: Avoid cross-domain favicon references
- No trackers: Don't embed tracking pixels in favicons (Brave will block)
- Avoid dynamic loading: Use standard HTML link tags, not JavaScript injection
- HTTPS only: Mixed content favicons may be blocked
Warning: If Brave Shields blocks your favicon source, users will see a broken/missing icon. Always use same-origin, direct links.
Brave-Compatible HTML
Recommended Implementation
? Brave-Friendly Setup (Same-Origin):
<!-- All served from your domain (Brave-friendly) -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icon for Brave New Tab -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Fallback -->
<link rel="shortcut icon" href="/favicon.ico">? Problematic Setup (May Be Blocked):
<!-- Cross-domain CDN (may be blocked by Shields) -->
<link rel="icon" href="https://cdn.example.com/favicon.png">
<!-- External tracking domain (will be blocked) -->
<link rel="icon" href="https://analytics.example.com/icon">
<!-- Mixed content (HTTPS page, HTTP favicon - blocked) -->
<link rel="icon" href="http://example.com/favicon.png">Key Requirements:
- Same domain: Serve from your site, not external CDN
- HTTPS: Always use secure connections
- Direct paths: Avoid redirects or complex URLs
- Static files: Not dynamically generated with tracking
Brave New Tab Page
Top Sites & Favorites Icons
Brave New Tab Features:
Brave's New Tab page shows "Top Sites" with favicon thumbnails. For best appearance:
Icon Sources (in order):
- apple-touch-icon (180x180px+)
- Large PNG favicon (128x128px+)
- Standard favicon (32x32px)
- Page screenshot (if no icons)
Optimization Tips:
- Provide 180x180px apple-touch-icon
- Use high-contrast design
- Simple, recognizable branding
- Optimize file size (<50KB)
Recommended Sizes:
| Size | Purpose | Priority |
|---|---|---|
| 180x180px | New Tab Top Sites (apple-touch-icon) | High |
| 32x32px | Browser tabs (standard favicon) | High |
| 16x16px | Bookmarks, small displays | Medium |
| 512x512px | PWA, high-DPI future-proofing | Optional |
Privacy & Performance in Brave
Privacy-First Optimization
Privacy Considerations:
- No tracking: Brave blocks tracking scripts; don't embed analytics in favicons
- Local storage: Brave caches favicons locally for privacy
- Fingerprinting protection: Avoid unique, user-specific favicons
- Third-party blocking: Cross-origin resources may be blocked
Performance Features:
- Built-in ad blocking: Faster page loads, favicons load quicker
- Aggressive caching: Favicons cached aggressively for speed
- Resource optimization: Brave prioritizes essential resources
- HTTPS upgrade: Automatically upgrades HTTP to HTTPS where possible
Optimization Checklist:
Brave-Specific Troubleshooting
Symptoms: Favicon doesn't load; Console shows blocked request
Causes:
Causes:
- Cross-domain favicon URL
- Favicon served from tracking domain
- Mixed content (HTTP favicon on HTTPS site)
- Move favicon to same domain as site
- Ensure all URLs use HTTPS
- Remove tracking parameters from favicon URL
- Check Brave console (F12) for blocked requests
Solutions:
- Add apple-touch-icon 180x180px
- Visit site multiple times to trigger Top Sites
- Manually add to favorites/bookmarks
- Clear Brave cache and revisit
- Ensure icon file is accessible and not blocked
Brave cache is very aggressive. Try:
- Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Clear cache: Settings ? Privacy ? Clear browsing data
- Add version query:
favicon.png?v=2 - Restart Brave completely
- Check server to confirm new file is uploaded
Possible Reasons:
- Brave Shields blocking resources Chrome allows
- Stricter HTTPS enforcement in Brave
- Privacy features blocking third-party requests
- Different cache settings
- Test with Shields down to isolate issue
- Check browser console for differences
Testing in Brave
Brave Testing Checklist
Test with Different Shield Settings:
Brave Favicon Best Practices
? Best Practices
- Host all favicons on same domain
- Use HTTPS exclusively
- Provide apple-touch-icon 180x180px
- Include PNG 32x32px and SVG
- Optimize file sizes (<10KB)
- Set long cache headers
- Test with Shields in different modes
- No tracking or analytics
? Avoid
- Cross-domain CDN favicons
- HTTP favicon URLs (use HTTPS)
- Tracking pixels in favicons
- Dynamic/personalized favicons
- Redirects in favicon URLs
- Large file sizes (>50KB)
- External/third-party hosts
- Mixed content warnings
Brave-Compatible Favicons
Generate privacy-friendly favicons optimized for Brave browser
Generate for Brave