Safari Favicon Ecosystem

3

Icon Types
Tab, Touch, Pinned

18%

Market Share
Desktop + Mobile

iOS

Mobile
60% of mobile web

Safari Icon Types

Standard Favicon

Where: Browser tabs

Size: 32x32px (16x16 also used)

Format: ICO, PNG, SVG

Apple Touch Icon

Where: iOS home screen

Size: 180x180px

Format: PNG only

Pinned Tab Icon

Where: macOS pinned tabs

Size: Any (vector)

Format: SVG monochrome

Complete Safari Implementation

All Safari Icons (macOS + iOS)

<!-- Standard Favicons (Safari tabs) -->
<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="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 (Safari 17+) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon (iOS Home Screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon (macOS) -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<!-- Apple Mobile Web App Settings (Optional) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Your App Name">

1. Standard Safari Favicons

Browser Tab Favicons

Format Support:

Format	Safari Version	Recommended Size	Use Case
ICO	All versions	16x16, 32x32	Universal compatibility
PNG	Safari 5+	32x32 (preferred)	Modern standard
SVG	Safari 17+ (2023)	Any (scalable)	Dark mode, Retina

Best Practice: Provide both PNG (32x32) and ICO for maximum compatibility. Add SVG for Safari 17+ users.

2. Apple Touch Icons (iOS/iPadOS)

Home Screen Icons

When users add your site to iOS home screen:

Essential Requirements:

Size: 180x180 pixels (minimum)
Format: PNG only
Background: Must be opaque (no transparency)
Corners: Apple adds rounded corners automatically
Safe Zone: Keep important content in center 80%

Implementation:

<!-- Single size (recommended) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Or with explicit size -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Auto-detection (if file in root) -->
<!-- Safari automatically looks for /apple-touch-icon.png -->

Design Guidelines:

? Do

Use solid background color
High contrast design
Simple, bold shapes
Center important elements
Test at actual size on device

? Don't

Transparent background
Rely on corner content
Use fine details
Add your own rounded corners
Use low contrast colors

iOS Tip: Apple automatically adds effects (shadow, gloss). Design a flat icon and let iOS handle styling.

3. Safari Pinned Tab Icons (macOS)

Mask Icon for Pinned Tabs

macOS Safari pinned tabs use special monochrome SVG icons:

Requirements:

Format: SVG only (no PNG/ICO)
Style: Single color (black shapes on transparent)
Size: Scalable (typically designed at 16x16)
Attribute: Must specify color attribute

HTML Implementation:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<!-- 
  color="#5bbad5" - Theme color for pinned tab
  Replace with your brand color
-->

SVG Template:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <!-- Single color shapes only -->
  <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z" fill="#000"/>
  <path d="M8 3l2 5h-4l2-5z" fill="#fff"/>
</svg>

Design Tip: Create a simple, recognizable silhouette. Safari fills it with the specified color. Avoid gradients or multiple colors.

Safari-Specific Features

Web App Capabilities

Make your site behave like a native app:

<!-- Enable full-screen mode -->
<meta name="apple-mobile-web-app-capable" 
      content="yes">

<!-- Status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" 
      content="black-translucent">
<!-- Options: default, black, black-translucent -->

<!-- App title (different from page title) -->
<meta name="apple-mobile-web-app-title" 
      content="App Name">

Startup Images (Optional)

Splash screen while app loads:

<!-- iPhone X/XS -->
<link rel="apple-touch-startup-image"
      media="(device-width: 375px)"
      href="/splash-iphonex.png">

<!-- iPad Pro -->
<link rel="apple-touch-startup-image"
      media="(device-width: 1024px)"
      href="/splash-ipad.png">

?? Complex setup, optional for most sites

Safari Caching & Updates

Understanding Safari Cache

Desktop Safari (macOS):

Caches favicons aggressively
Clear: Safari ? Settings ? Privacy ? Manage Website Data
Or: Develop ? Empty Caches
Hard refresh: Cmd+Shift+R

Mobile Safari (iOS/iPadOS):

Apple Touch Icons cached permanently
Must delete home screen icon and re-add to update
Clear browser cache: Settings ? Safari ? Clear History
Use versioned filenames for forced updates

Important: iOS home screen icons are very persistent. Use unique filenames for new versions: apple-touch-icon-v2.png

Testing Safari Favicons

macOS Safari Testing:

Open Safari Developer Tools: Safari ? Settings ? Advanced ? Show Develop menu
Develop ? Empty Caches
Navigate to your site
Check Web Inspector ? Network tab for favicon requests
Pin tab to test mask-icon

iOS/iPadOS Testing:

Open site in Mobile Safari
Tap Share button
Select "Add to Home Screen"
Check icon appearance and name
Launch from home screen to test full experience

Simulator Testing:

# Open iOS Simulator (requires Xcode)
open -a Simulator

# Or use BrowserStack / Sauce Labs for cloud testing

Safari Favicon Troubleshooting

Solutions:

Clear Safari cache and reload
Check file is accessible: yourdomain.com/favicon.ico
Ensure HTTPS consistency (no mixed content)
Provide both ICO and PNG formats
Check Web Inspector console for errors

Cause: iOS requires opaque background.
Solution:

Open PNG in image editor
Add solid background color
Flatten all layers
Save without alpha channel
Use unique filename to force update

Check:

SVG must be monochrome (single color)
color attribute must be set in HTML
SVG shapes should be black (#000)
No fill colors in SVG (Safari ignores them)
Validate SVG syntax

Safari Favicon Best Practices

? Recommended

Provide all three icon types
180x180 Apple Touch Icon minimum
Opaque background for Touch Icons
Test on actual iOS/macOS devices
Use monochrome SVG for pinned tabs
Set appropriate color attribute
Version filenames for updates
Follow Apple Human Interface Guidelines

? Avoid

Transparent Apple Touch Icons
Relying only on favicon.ico
Complex pinned tab SVGs
Multiple colors in mask-icon
Ignoring rounded corners safe zone
Forgetting Retina display quality
Not testing on mobile Safari
Using compressed/low-quality images