Safari 26 now supports SVG icons for all interface surfaces

Why SVG matters now

• Historically, icons relied on multiple raster files (PNG, ICO) sized for different contexts. This creates bandwidth overhead and maintenance complexity.
• The Safari 26 beta adds support for SVG icons in all interface surfaces, including favicons, Home Screen, Dock, tabs, and menus.
• A single SVG can be automatically rasterized to the needed sizes, reducing download size and simplifying your icon workflow.

Where SVG icons appear in Safari 26

Browser surfaces

• URL bar favicon
• Tab icons
• Browser menus
• Safari start page (Reading List, iCloud Tabs, Suggestions, Favorites)

Web app surfaces

• Home Screen icon
• Dock icon
• Platform-specific widgets and shortcuts

These icons vary widely in size—from 16×16 (tab) to 1024×1024 (Home Screen on some devices). An SVG guarantees consistent quality at all scales.

Developer implementation notes

Basic SVG favicon

<link rel="icon" href="/icon.svg">

Web app manifest icon

In your manifest, point to the SVG:

{
  "icons": [
    {
      "src": "/icon.svg",
      "sizes": "any",
      "type": "image/svg+xml"
    }
  ]
}

Data URL support

Safari 26 also supports Data URL images for icons, allowing you to embed small icon files directly in documents:

<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB...c3ZnPg==">

Practical checklist

• [ ] Create a square SVG icon with consistent branding.
• [ ] Optimize the SVG for size (remove unnecessary paths, use proper viewBox).
• [ ] Test the SVG at multiple sizes (16×16, 32×32, 96×96, 512×512) to ensure readability.
• [ ] Replace multiple PNG/ICO files with the single SVG where supported.
• [ ] Verify the icon appears correctly in Safari tabs, Home Screen, and Dock.
• [ ] Keep fallback PNG/ICO for browsers that don't support SVG favicons.

What to avoid

• Don't use overly complex SVGs that degrade performance or rasterization.
• Don't forget to include fallback raster icons for older browsers that don't support SVG favicons.
• Don't rely solely on the SVG without checking contrast at different sizes, especially on small contexts like tabs.
• Don't assume SVG will be rasterized identically in every context; test on key surfaces.

What this means for PWA branding

With SVG icons, your web app branding stays sharp across every touchpoint. The same icon that represents your app on the Home Screen also appears in tabs, menus, and start pages at the right resolution.

For users, this means recognizable iconography at every stage of interaction—from discovery in Safari start page to daily use in Home Screen and Dock. Consistent, legible, and properly scaled icons build trust and make your PWA feel intentionally designed.

Next steps

• Review your current icon stack: multiple PNG/ICO vs. a single SVG.
• Export or convert your branding icon to a square SVG.
• Test the SVG on Safari 26 beta, including Home Screen and Dock contexts.
• Update your manifest to reference the SVG icon while maintaining raster fallbacks for older browsers.
• Document the SVG requirement in your icon assets guide to maintain moving forward.