Edge Favicon Support

?

Chromium-based
Same as Chrome

4.4%

Market Share
Desktop usage

Windows

Platform
Deep OS integration

ICO+

Formats
All modern types

Edge (Chromium) vs Chrome

Understanding the Relationship

Since 2020, Microsoft Edge is built on Chromium (same engine as Chrome):

Same as Chrome

Format support (ICO, PNG, SVG)
PWA manifest handling
DevTools implementation
Cache behavior
HTML5 features
Dark mode SVG support

Edge-Specific Features

Windows integration (tiles, taskbar)
Collections feature
Pinned Sites on Start Menu
Microsoft account sync
Legacy Edge compatibility

Good News: If your favicons work in Chrome, they'll work in Edge. But Edge offers additional Windows-specific features.

Standard Edge Favicon Implementation

Recommended HTML (Works in All Browsers)

<!-- Standard favicons (Edge Chromium) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<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">

<!-- SVG favicon (Edge 79+, all Chromium versions) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PWA manifest (Edge 79+ supports PWA) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme color (Edge address bar on Android) -->
<meta name="theme-color" content="#0078d4">

Windows Integration Features

Pinned Sites to Start Menu & Taskbar

When users pin your site to Windows Start Menu or Taskbar:

Modern Implementation (browserconfig.xml):

<!-- Link to browserconfig.xml -->
<meta name="msapplication-config" content="/browserconfig.xml">

browserconfig.xml file content:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <!-- Windows 8/10 tile images -->
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      
      <!-- Tile background color -->
      <TileColor>#0078d4</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Alternative: Meta Tags (Legacy)

<!-- Legacy meta tags (still supported) -->
<meta name="msapplication-TileColor" content="#0078d4">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png">

Required Tile Sizes:

Size	Name	Use Case
70x70	Small tile	Start Menu small view
150x150	Medium tile	Start Menu default view
310x150	Wide tile	Start Menu wide view
310x310	Large tile	Start Menu large view

Note: Windows 11 has simplified tiles. The 150x150 size is most important for modern Windows.

Edge Collections

Favicons in Edge Collections

Edge Collections uses favicons to identify saved pages:

What Edge Uses:

Primary: 32x32 PNG
Fallback: favicon.ico
Display: Thumbnail grid view
Size: Scaled to fit collection card

Best Practices:

Use recognizable icon
High contrast design
Clear at small sizes
Brand colors prominent

Tip: Test how your favicon looks in Collections by adding your site and viewing the grid layout.

Progressive Web Apps in Edge

Installing PWAs from Edge

Edge has excellent PWA support with Windows integration:

Manifest Configuration:

{
  "name": "Your App Name",
  "short_name": "App",
  "description": "Your app description",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0078d4",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Edge-Specific PWA Features:

Window Controls Overlay: Custom title bar
File Handling: Associate file types
Protocol Handling: Custom URL schemes
Shortcuts: Jump list integration
Widgets: Windows 11 widgets support

Legacy Edge (EdgeHTML)

Supporting Old Edge (Pre-2020)

Note: Legacy Edge is discontinued. Microsoft automatically updates to Chromium Edge. This section is for historical reference only.

Legacy Edge supported:

ICO format (16x16, 32x32)
PNG format
SVG format (limited support)
Windows 8/10 tile meta tags

Edge Caching Behavior

Understanding Edge Favicon Cache

Edge (Chromium) has similar caching to Chrome:

Cache Behavior:

Respects Cache-Control headers
Stores in disk cache
Syncs across devices (if signed in)
Clears with browsing data

Clear Cache Methods:

Manual Clear:

Settings ? Privacy
Choose what to clear
Select "Cached images and files"
Click Clear now

Keyboard Shortcuts:


                                        Ctrl+Shift+Delete - Open clear dialog

                                        Ctrl+F5 - Hard refresh

                                        Ctrl+Shift+R - Hard refresh (alt)

Testing Favicons in Edge

1. Browser Tab Testing:

Open Edge DevTools (F12)
Go to Network tab
Reload page (Ctrl+R)
Filter by "Images" or search "favicon"
Check Status (should be 200)
Verify MIME type (image/x-icon, image/png, etc.)

2. Windows Integration Testing:

Pin site to Start Menu: Settings ? Pin to Start
Check tile appearance
Test different tile sizes
Verify background color

3. Collections Testing:

Add page to Collection (Ctrl+Shift+Y)
View collection in grid mode
Check favicon visibility

4. PWA Testing:

Install as app (Settings ? Apps ? Install)
Check Start Menu icon
Verify taskbar icon
Test app window title bar

Edge Favicon Troubleshooting

Solutions:

Clear browser cache (Ctrl+Shift+Delete)
Hard refresh (Ctrl+F5)
Check file exists: yourdomain.com/favicon.ico
Verify HTML link tags
Check DevTools Console for errors
Test in InPrivate window

Check:

TileColor in browserconfig.xml matches design
msapplication-TileColor meta tag correct
Use hex color format (#RRGGBB)
Unpin and re-pin site to refresh
Restart Edge after changes

Verify:

Manifest.json properly configured
Icons array includes required sizes (192, 512)
MIME type: application/manifest+json
PWA criteria met (HTTPS, service worker)
Uninstall and reinstall PWA

Edge Favicon Best Practices

? Do This

Provide ICO, PNG, and SVG formats
Configure browserconfig.xml for Windows
Use Microsoft blue (#0078d4) if appropriate
Test on Windows 10/11
Optimize for Collections view
Set proper Cache-Control headers
Test PWA installation
Use meaningful tile images

? Avoid This

Relying only on favicon.ico
Forgetting Windows tile configuration
Using transparent tiles (looks bad)
Ignoring PWA icon requirements
Not testing on actual Windows devices
Low contrast tile colors
Forgetting to set TileColor
Not providing multiple tile sizes