Implementation Snippets
<!-- HTML / Meta -->
<link rel="apple-touch-icon" href="/at%0A----------------apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="/at%0A----------------apple-touch-icon.png" sizes="32x32">
<!-- CSS / Background -->
.icon-ref {
background-image: url('/at%0A----------------apple-touch-icon.png');
background-size: contain;
width: 48px; height: 48px;
}
Platform Behavior Notes
- iOS / Safari: Automatically rounds corners and applies a subtle drop shadow. Provide 180×180 to prevent upscaling artifacts.
- Android / Chrome: Defaults to standard favicon handling. Use
manifest.json for full PWA control.
- macOS / Finder: Recognized as desktop shortcut icon. 512×512 variant recommended for Finder sidebar.
- Windows / Edge: Renders as standard favicon. Legacy Edge may require
.ico fallback.