Safari Pinned Tab Icons, SVG Masks and Touch Icons

Three Apple-facing assets with different jobs

A normal rel=icon candidate can appear in ordinary browser tabs. A historical Safari pinned-tab mask uses a separate SVG declared with rel=mask-icon and a color. An Apple touch icon is a raster image for home-screen shortcuts.

Do not rename one asset to fill all three roles. Their selection rules, artwork assumptions and presentation differ.

Connected next stepFavicon API Automation: Deterministic Generation in CI/CD for the closest prerequisite or comparison.

Design the mask artwork

Pinned-tab masks are effectively monochrome silhouettes. Remove gradients, embedded photographs and fine interior detail; make the recognizable shape work as one color against Safari’s chosen presentation.

Use a square viewBox and keep essential geometry away from the edge. Treat the color attribute as presentation metadata rather than proof that multicolor SVG artwork will be preserved.

Connected next stepFavicon MIME Types for ICO, SVG, PNG and Manifests for the next connected implementation decision.

Declare only what you support

Place ordinary rel=icon declarations in the shared head. Add rel=mask-icon only when you maintain and test the dedicated SVG mask. Keep apple-touch-icon pointed to the deliberate 180×180 PNG.

Request each path on the production hostname and confirm the MIME type and bytes. A framework catch-all returning HTML with status 200 is not a usable icon response.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

Test Safari surfaces separately

A tab, pinned tab, favorite and iPhone home-screen shortcut can retain different assets and caches. Record the Safari and operating-system version, the exact surface and the date when publishing a manual observation.

Use a new profile or clean device state to separate deployment failures from retained local artwork, but do not present one successful surface as proof of every Apple client.