SVG, Favicons y todas las cosas divertidas que podemos hacer con ellos

Los favicons son los pequeños íconos que ves en la pestaña de tu navegador. Le ayudará a comprender qué sitio es cuál cuando escanea los marcadores y las pestañas abiertas de su navegador. Son una parte interesante de la historia de Internet y son capaces de realizar algunos trucos interesantes.

Un truco muy nuevo es la posibilidad de utilizar SVG como favicon. Es algo que admitirá la mayoría de los navegadores modernos y habrá más soporte en el camino.

Aquí está el código sobre cómo agregar favicons a su sitio. Coloque esto en su sitio web head:

link rel="icon" href="/favicon.ico"link rel="icon" href="/favicon.svg" type="image/svg+xml"link rel="manifest" href="/manifest.webmanifest"

Y coloque este código en el manifiesto de la aplicación web de su sitio:

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

Los navegadores que admiten favicons SVG anularán la declaración del primer elemento de enlace y respetarán la segunda. Los navegadores que no admiten favicons SVG pero sí permiten manifiestos de aplicaciones web que utilizarán imágenes de mayor resolución. Todos los demás navegadores vuelven a utilizar el favicon.icoarchivo. Esto garantiza que todos los navegadores que admitan favicons puedan disfrutar de la experiencia.

También puede observar el valor del atributo alternativo para nuestra reldeclaración en la segunda línea. Esto comunica mediante programación al navegador que el favicon con un formato de archivo que utiliza .icose utiliza específicamente como una presentación alternativa.

Después de los favicons hay una línea de código que carga otra imagen SVG, una llamada safari-pinned-tab.svg. Esto es para admitir la funcionalidad de pestañas fijadas de Safari, que existía antes de que otros navegadores tuvieran soporte para favicon SVG. Hay archivos adicionales que puedes agregar aquí para mejorar su sitio para diferentes aplicaciones y servicios, pero hablaremos de eso en un momento.

Aquí hay más detalles sobre el nivel actual de compatibilidad con favicon SVG:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

¿Por qué SVG?

Quizás se pregunte por qué es necesario esto. El .icoformato de archivo existe desde siempre y puede admitir imágenes de hasta 256 × 256 píxeles de tamaño. Aquí tienes tres respuestas.

Instalación de creación

Es una molestia crear .icoarchivos. El archivo es un formato propietario utilizado por Microsoft, lo que significa que necesitarás herramientas especializadas para crearlo. SVG es un estándar abierto, lo que significa que puede usarlos sin necesidad de herramientas adicionales ni bloqueo de plataforma.

Preparado para el futuro

¿Retina? 5k? 6k? Cuando usamos un archivo SVG independiente de la resolución para un favicon, garantizamos que nuestros favicons se verán nítidos en dispositivos futuros, independientemente del tamaño de sus pantallas.

Actuación

Los SVG suelen ser archivos muy pequeños, especialmente en comparación con sus homólogos de imágenes rasterizadas, y más si los optimizan de antemano. Al utilizar únicamente un favicon de 16×16 píxeles como alternativa para los navegadores que no admiten SVG, proporciona una combinación que disfruta de un alto grado de compatibilidad con un tamaño de archivo más pequeño para arrancar.

Esto puede parecer un poco extremo, pero cuando se trata de rendimiento web, ¡cada byte cuenta!

trucos

Otra cosa interesante de SVG es que podemos incrustar CSS directamente en él. Esto significa que podemos hacer cosas divertidas como ajustarlos dinámicamente con JavaScript, siempre que el SVG se declare en línea y no esté incrustado mediante un imgelemento.

svg  version="1.1"  viewBox="0 0 100 100"  style    path { fill: #272019; }  /style  !-- etc. --/svg

Dado que los favicons SVG están incrustados usando el linkelemento, en realidad no se pueden modificar usando JavaScript. Sin embargo, podemos usar cosas como emoji y consultas de medios.

emojis

Lea Verou tuvo una idea genial al usar emoji dentro del elemento SVG textpara crear un favicon rápido con un fondo transparente que se mantiene en tamaños pequeños.

Ahora que todos los navegadores modernos admiten favicons SVG, aquí se explica cómo convertir cualquier emoji en un favicon.svg:

svg viewBox=”0 0 100 100″
texto y=” .9em” font-size=”90″ /texto
/svg

¡Útil para aplicaciones rápidas cuando no puedes molestarte en diseñar un favicon! pic.twitter.com/S2F8IQXaZU

– Lea Verou (@LeaVerou) 22 de marzo de 2020

En respuesta, Chris Coyier preparó una pequeña demostración que te permite jugar con el concepto.

Soporte de modo oscuro

Tanto Thomas Steiner como Mathias Bynens se toparon de forma independiente con la idea de que se puede utilizar la prefers-color-schemeconsulta de medios para brindar soporte para el modo oscuro. Este trabajo se basa en la exploración de Jake Archibald de SVG y consultas de medios.

svg   style    path { fill: #000000; }    @media (prefers-color-scheme: dark) {      path { fill: #ffffff; }    }  /style  path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"//svg   

Para los navegadores compatibles, este código significa que nuestro favicon SVG en forma de estrella cambiará su color de relleno de negro a blanco cuando se active el modo oscuro. ¡Con buena pinta!

Otras consultas de los medios

La compatibilidad con el modo oscuro me hizo pensar: si los SVG son compatibles prefers-color-scheme, ¿qué otras cosas podemos hacer con ellos? Si bien es posible que aún no exista soporte para consultas de medios de nivel 5, aquí hay algunas ideas para considerar:

• Úselo light-levelpara desaturar los colores de favicon en un ambiente con poca luz.
• Úselo inverted-colorspara “voltear” colores invertidos para preservar la marca o para garantizar que un favicon fotorrealista se vea como se esperaba.
• Úselo prefers-reduced-motionpara eliminar la animación del favicon. Idealmente, en primer lugar, evitaríamos animar favicons, ya que pueden ser un desencadenante del TDAH y otras discapacidades relacionadas.
• Utilice forced-colorsy/o una consulta de medios del modo de alto contraste de Windows para asegurarse de que el favicon se mantenga visualmente en un contexto de color de alto contraste. ¡Recuerda usar palabras clave de color para mantener dinámicos los colores del favicon!

fresco de manténlo

Otro aspecto importante de un buen diseño de favicon es asegurarse de que se vean bien en el área pequeña de la pestaña del navegador. El secreto para esto es hacer que las rutas de la imagen vectorial se alineen con la cuadrícula de píxeles, la guía que usa una computadora para convertir las matemáticas SVG en el mapa de bits que vemos en una pantalla.

Aquí hay un ejemplo simplificado usando una forma cuadrada:

Cuando los puntos vectoriales del cuadrado se alinean con la cuadrícula de píxeles de la mesa de trabajo, no es necesario el efecto antialiasing que utilice una computadora para suavizar las formas. Cuando los puntos del vector no están alineados, obtenemos un efecto de “mancha”:

La posición de un punto vectorial se puede ajustar en la cuadrícula de píxeles utilizando un programa de edición de vectores como Figma, Sketch, Inkscape o Illustrator. Estos programas también exportan SVG. Para ajustar la ubicación de un punto vectorial, seleccione cada nodo con una herramienta de selección de precisión y arrástrelo a su posición.

Es posible que sea necesario simplificar algunos íconos más complicados para que se vean bien en un tamaño tan pequeño. Si está buscando una buena introducción a esto, Jeremy Frank escribió un muy buen artículo de dos partes en Vidget.

Hacer un esfuerzo adicional

Además de los favicons, hay muchas formas diferentes (y desafortunadamente patentadas) de usar íconos para mejorar la experiencia. Estos incluyen cosas como el ícono de pestaña anclado antes mencionado para Safari¹, la aplicación de chat desplegada, un mosaico del menú de inicio de Windows anclado, vistas previas de redes sociales y lanzadores de pantalla de inicio.

Si está buscando un excelente lugar para comenzar con este tipo de mejoras, me gusta mucho realfavicongenerator.net.

Algo curioso acerca de la historia del favicon: Internet Explorer fue el primer navegador que los admitió y un desarrollador llamado Bharat Shyam los introdujo a último momento:

Según cuenta la historia, una noche, Shyam estaba trabajando en su nueva función de favicon. Llamó al director de proyectos junior, Ray Sun, para que echara un vistazo.

Shyam comentó: “Esto es bueno, ¿verdad? ¿Registrarlo?”, solicitando permiso para verificar el código en el código base de Internet Explorer para que pueda publicarse en la próxima versión. Sun no le dio mucha importancia, la característica era interesante y claramente le daría a IE una ventaja. Entonces le dijo a Shyam que siguiera adelante y lo agregara. Y así, el favicon llegó a Internet Explorer 5, que se convertiría en una de las versiones de navegador más grandes que jamás haya visto la web.

Al día siguiente, su gerente reprendió a Sun por dejar que la función funcionara tan rápido. Resulta que Shyam había esperado específicamente hasta más tarde ese mismo día, sabiendo que un gerente de programa con menos experiencia le daría un pase. Pero para entonces, el código ya se había fusionado. Por cierto, te sorprendería saber cuántas características relativamente importantes del navegador se han colado en versiones como esta.

De Cómo conseguimos el Favicon de Jay Hoffmann

Me alegra ver que la plataforma le da un poco de amor a los favicons. Durante mucho tiempo han sido uno de mis pequeños detalles de diseño favoritos y estoy entusiasmado de que se estén volviendo más reactivos a las necesidades de los usuarios. Si tienes un momento, ¿por qué no introducir un favicon SVG en tu proyecto de la misma manera que lo hizo Bharat Shyam allá por 1999?

¹ No he podido determinar si Safari implementará la compatibilidad con favicon SVG, pero espero que así sea. ¿Alguien ha oído algo?