Icons & Assets
04. Modern Icons & Responsive Favicon Systems
Design theme-reactive SVG favicons, Apple touch icons, PWA manifest configurations, and high-performance single-node CSS mask icon systems.
icons-favicons.html
<!-- 1. Theme-Responsive SVG Favicon with CSS prefers-color-scheme -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- favicon.svg contents -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #4f46e5; }
@media (prefers-color-scheme: dark) {
path { fill: #818cf8; }
}
</style>
<path d="M16 2L3 9l13 7 13-7-13-7zM3 23l13 7 13-7V13L16 20 3 13v10z"/>
</svg>
-->
<!-- 2. Single-DOM Element CSS Mask Icon Pattern -->
<!-- Uses 1 single DOM span instead of heavy multi-node SVG trees -->
<span
class="inline-block h-6 w-6 bg-indigo-600 dark:bg-indigo-400 [mask:url(/icons/shield.svg)_no-repeat_center/contain]"
aria-hidden="true"
></span>Modern Icon & Favicon Systems
Modern web standards eliminate large icon sprite libraries by leveraging responsive SVG favicons and CSS mask icons.
- Theme-Aware SVG Favicons: SVG favicons support embedded
<style>tags and@media (prefers-color-scheme: dark), dynamically switching colors without JavaScript. - CSS Mask Icons: By rendering a single
<span>withmask: url(...), icons inherit CSSbackground-colorandcurrentColorwhile keeping the DOM tree flat. - PWA Manifest & Apple Touch Icons: Configure
manifest.webmanifestandapple-touch-icon.pngfor seamless cross-device home screen installation.
Theme-Reactive SVG Favicon Simulator Dynamic SVG Media
Simulate Operating System Theme:
Browser Tab Simulation
Favicon fill: #4f46e5 (Indigo 600)
CSS Mask Icon vs Inline SVG 1 DOM Node
CSS Mask (1 DOM Node)