Cómo Favicon en 2021 | Programar Plus

0

Siempre agradezco a alguien que 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="https://css-tricks.com/favicon.ico" ><!-- 32×32 -->
<link rel="icon" href="https://css-tricks.com/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://css-tricks.com/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="https://css-tricks.com/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 en el que me volví ultra minimalista y solo tenía favicon.ico Archivo. Ahora tengo todo lo anterior en su lugar.

Donde difiero …

  • No tengo GIMP o Inkscape instalados, que pueden exportar .ico formato, así que utilicé este generador de favicon (lo alimenté con mi “principal” SVG “) solo para ese icono.
  • Encontré que Figma es útil para cambiar el tamaño de los marcos y exportar los tamaños correctos.
  • Usé ImageOptim para optimizar todas las imágenes.
  • Estaba nervioso por agregar un “manifiesto” porque no tengo otros pasos similares a PWA implementados y se siente como una solicitud web adicional por 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 Fue un buen toque. Se siente relacionado.

Me encanta el concepto SVG del modo oscuro:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      .a { fill: #f0f0f0 }
    }
  </style>
  <path class="a" fill="#0f0f0f" d="…" />
</svg>

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

Tampoco he vuelto a hacer un favicon especial solo de desarrollo, pero lo haré porque lo encuentro extremadamente útil.

Enlace directo →

(Visited 4 times, 1 visits today)