Apple Touch Icon SVG Support: What Works in 2026

You've added a beautiful SVG favicon to your site using <link rel='icon' type='image/svg+xml'>. It looks crisp in Chrome, scales perfectly in dark mode — but when an iPhone user saves your site to the home screen, they get a blurry page screenshot instead of your sharp mark.

You're not doing anything wrong. Apple Touch Icons and SVG are two separate things in Apple's eyes, and the relationship between them trips up even experienced developers. Here's exactly what works in Safari and iOS right now, and how to ship a setup that looks sharp in every context.

The Short Answer: Apple Does Not Officially Support SVG for apple-touch-icon

Apple's documentation for the apple-touch-icon link relationship has never listed SVG as a supported format. iOS still expects a PNG (or, less commonly, JPEG) bitmap for the home screen icon, and it picks that file based on size attributes — not MIME type.

What is well supported is the SVG favicon via rel='icon', which Safari reads for browser tabs and pinned tabs. The WHATWG HTML living standard defines the rel='icon' keyword as the mechanism for declaring page icons, and Safari iOS implements it cleanly for SVG. But that's a different code path from the home screen.

So when developers search for apple touch icon SVG support, the honest answer is: serve both. Use SVG for the tab, use PNG for the home screen. Trying to point apple-touch-icon at an SVG file silently falls back to a page screenshot on iOS, which is exactly the blurry square you're trying to avoid.

Prerequisites

• A clean SVG source file (square viewBox like 0 0 100 100, ideally under 5 KB)
• A 180×180 PNG export of the same design, opaque background
• Access to your site's <head> and the ability to drop files in the web root

The Stack That Actually Works (Step-by-Step)

Step 1: Place your SVG favicon in the site root

Drop your SVG file at /icon.svg (same level as index.html). Keeping the name icon.svg is deliberate — Safari checks that path before scanning <link> tags, and it keeps your <head> uncluttered.

Step 2: Generate a 180×180 PNG apple-touch-icon

Use Figma, Sketch, or any raster export tool to produce a 180×180 PNG from the same SVG. Save it as /apple-touch-icon.png in the site root. iOS will pick this file even without a <link> tag, but the explicit tag is more reliable across iOS versions.

If you need to convert an SVG into a clean 180×180 PNG without re-tracing it, Mzu favicondl handles the export in one click.

Step 3: Add the link tags in the right order

Browser parsing order matters. Put the SVG first so modern browsers grab it, then the explicit PNG fallback. Here's the pattern:

<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

Notice there's no type attribute on the apple-touch-icon link — Apple historically ignores it, and some older iOS builds reject the tag entirely when an unsupported MIME type is declared. The sizes='180x180' attribute is what tells iOS to use this exact render for high-density iPhones.

Step 4 (Optional): Cover Older iPads With a 152×152 Fallback

If your analytics show iPad users on iOS 14 or earlier, add a 152×152 fallback before the 180:

<link rel='apple-touch-icon' href='/apple-touch-icon-152.png' sizes='152x152'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

Browsers and iOS pick the smallest asset that still meets the requested density. For a deeper breakdown of legacy iOS resolutions, see our Apple Touch Icon sizes guide.

Common Pitfalls

• Pointing apple-touch-icon at the SVG file. iOS silently falls back to a page screenshot. Always ship a real PNG at that URL.
• Adding type='image/svg+xml' to the apple-touch-icon link. Some older iOS builds reject the tag entirely. Keep type off the apple-touch-icon link.
• Forgetting the square aspect ratio. iOS does not crop your icon — a non-square PNG gets letterboxed. Always export from a square SVG viewBox.
• Transparent PNGs that leak on launch screens. iOS applies its own rounded-rect mask, but a transparent background can still show through during the cold-start launch image. Use an opaque background unless you specifically need transparency — covered in our apple touch icon transparent guide.

How to Verify on a Real Device

Emulators lie about iOS icon behavior. To confirm the PNG actually renders:

1. Safari on Mac → File → Add to Home Screen (with the iPhone paired, or use the device directly).
2. On the iPhone: open the site in Safari, tap Share → Add to Home Screen, inspect the icon before confirming.
3. Re-check after clearing Safari's cache — if the old icon sticks, follow the Safari favicon cache guide.

So Should You Bother With SVG at All?

Yes — for everything except the iOS home screen. SVG gives you crisp tabs in Safari, automatic dark mode switching through inline media queries, and a single source of truth for your brand. The PNG apple-touch-icon gives iOS what it actually expects. Together they're the only stack that survives every surface Apple ships — tabs, pinned tabs, bookmarks, and the home screen.

Stop guessing format support. Mzu favicondl turns your SVG into both the PNG apple-touch-icon and a multi-resolution ICO in one workflow.