Foundations & Tooling 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
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> with mask: url(...), icons inherit CSS background-color and currentColor while keeping the DOM tree flat.
  • PWA Manifest & Apple Touch Icons: Configure manifest.webmanifest and apple-touch-icon.png for 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)

←
03. TypeScript 6 & Strict Engineering
05. PNPM Workspaces, Monorepos & CI/CD Pipelines
→