Cómo hacer Favicon en 2021

Siempre aprecio que alguien investigue y reevalúe las mejores prácticas de algo que literalmente todo sitio web necesita y tiene un conjunto complejo de requisitos. Andrey Sitnik lo ha hecho aquí con favicons.

La sugerencia final:

link rel="icon" href="/favicon.ico"!-- 32×32 --link rel="icon" href="/icon.svg" type="image/svg+xml"link rel="apple-touch-icon" href="/apple-touch-icon.png"!-- 180×180 --link rel="manifest" href="/manifest.webmanifest"

{  "icons": [    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }  ]}

Era un buen momento para hacer esto aquí en CSS-Tricks, así que intenté seguir los consejos al pie de la letra y hasta ahora está funcionando muy bien. Creo que me harté de lo complejo que era en algún momento que me volvió ultraminimalista y solo tenía favicon.icoarchivo. Ahora tengo todo lo anterior en su lugar.

Donde diferí...

• No tengo instalado GIMP o Inkscape, que pueden exportar .icoformato, así que use este generador de favicon (le alimentado con mi SVG “principal”) solo para ese ícono.
• Figma me resultó útil para cambiar el tamaño de los marcos y exportar los tamaños correctos.
• Utilicé ImageOptim para optimizar todas las imágenes.
• Estaba nervioso por agregar un “manifiesto” porque no tengo otros pasos similares a los de PWA y se siente como una solicitud web adicional de poco valor. Pero lo hice de todos modos.
• Tengo un color de tema ( meta name="theme-color" content="rgb(255, 122, 24)") porque me dijeron que era un buen toque. Se siente relacionado.

Me encanta el concepto SVG en modo oscuro:

svg  viewBox="0 0 500 500"  style    @media (prefers-color-scheme: dark) {      .a { fill: #f0f0f0 }    }  /style  path fill="#0f0f0f" d="…" //svg

Pero no hice ningún truco porque creo que mi ícono se ve bien de cualquier manera sin cambios:

Tampoco he vuelto a crear un favicon especial solo para desarrollo, pero lo haré porque el encuentro es extremadamente útil.