Favicons SVG en acción

¿Alguna vez has oído hablar de favicons hechos con SVG? Si es un lector habitual de CSS-Tricks, probablemente lo sea. ¿Pero su sitio web realmente utiliza uno?

La tarea no es tan trivial de lo que piensas. Como veremos en este artículo, crear un favicon SVG útil implica editar un archivo SVG manualmente, algo que muchos de nosotros intentamos evitar o nos resulta incómodo hacer. Además, estamos hablando de un favicon . Podemos pasar unas horas jugando con un nuevo marco CSS. ¿Pero un favicon? A veces parece demasiado pequeño para que valga la pena.

Este artículo trata sobre la creación de un favicon SVG de verdad . Si estás frente a tu computadora portátil, prepara el archivo vectorial de un logotipo. Al final de tu lectura (¡activa!), tu favicon SVG estará listo para brillar.

¿Por qué un favicon SVG?

Estamos aquí por el “cómo”, pero vale la pena reflexionar: ¿para qué sirve un favicon SVG? Ya tenemos otros tipos de archivos que manejan esto, ¿verdad?

SVG es un formato vectorial. Como tal, tiene características valiosas sobre los formatos ráster, incluidos los que se usan típicamente para favicons, como PNG. Los SVG escalan y suelen ser más compactos que sus primos binarios porque, bueno, ¡son solo código! ¡Todo está dibujado con números y letras!

Esas son buenas noticias, pero ¿cómo ayuda esto a nuestro favicon? Los favicons de escritorio son pequeños, como máximo 64×64 . Y puedes enviar tus íconos en varias resoluciones . El escalado es una característica que realmente no necesitamos aquí.

El tamaño del archivo es otra fuente de decepción. Si bien SVG tiene una clara ventaja sobre un archivo PNG de alta resolución, las tablas cambian en baja resolución. Es común que un favicon PNG de 48 × 48 dé como resultado un tamaño de archivo más pequeño que su equivalente SVG.

Sin embargo, tenemos una buena razón para prestar atención al favicon SVG: compatibilidad con el modo oscuro .

El modo oscuro ha recibido mucha atención últimamente. Es posible que incluso hayas implementado el modo oscuro para tus propios sitios web. ¿Qué significa eso para el favicon? Significa la capacidad de mostrar diferentes íconos según el brillo del fondo de la pestaña del navegador.

Vamos a preparar tal ícono.

Cómo crear un favicon SVG (en teoría)

Obtener compatibilidad con el modo oscuro para un favicon SVG se basa en un truco de CSS (10 puntos para Gryffindor), es decir, que podemos colocar una styleetiqueta directamente dentro de SVG y usar una consulta de medios para detectar la preferencia de tema actual del usuario. Algo como esto:

svg  style    @media (prefers-color-scheme: dark) {      // Your dark styles here    }  /style  !-- more stuff --/svg

Con este patrón, tu favicon claro/oscuro sólo está limitado por tu imaginación. Por ejemplo, cambie el color de todas las líneas :

svg  style    path { fill: black; }    @media (prefers-color-scheme: dark) {      path { fill: white; }    }  /style  !-- more stuff --/svg

Ahora es el momento de escribir estos estilos. Aquí es cuando comienzan los problemas.

Los SVG son imágenes y el logotipo que estamos usando para crear nuestro favicon probablemente se creó con una herramienta como Adobe Illustrator o InkScape. ¿Por qué no volver a utilizar la misma herramienta? Esto se debe a que aplicaciones como estas realmente no han integrado CSS y consultas de medios en sus productos. No es que no puedan manejarlos, pero hay que olvidarse de la experiencia de solo mouse que prometen. Vas a utilizar el teclado y escribir el código.

Lo que nos lleva a una segunda opción: escribir el CSS a mano. Después de todo, este es el camino a seguir con el desarrollo front-end. ¿Por qué debería ser diferente aquí? Desafortunadamente, SVG suele ser difícil de leer. Claro, este es un dialecto XML, que es (casi) como HTML. Pero las imágenes SVG están repletas de pathdeclaraciones largas y otras marcas que a menudo no vemos en nuestro trabajo diario. Por ejemplo, el logotipo de Raspberry Pi tiene más de 8 KB de datos sin procesar. Esto hace que la edición manual sea más tediosa de lo que parece.

Cómo crear un favicon SVG (en la práctica)

Para comprender cómo podemos manejar un favicon SVG de forma rápida y sencilla, primero debemos definir qué queremos lograr.

La técnica que cubrimos anteriormente requiere creatividad: reemplazar un color, invertirlos todos (lo cual veremos), cambiar una forma… Pero la configuración de un favicon no es el momento adecuado para esto. Un favicon casi siempre debe ser el logotipo del sitio web. ¿Su apariencia? ¿Estético? ¿El mensaje que transmite? Todas estas preguntas ya han sido respondidas. La preparación del favicon debe consistir en ajustar el logotipo para que se ajuste al pequeño espacio asignado en las pestañas del navegador.

A menudo, el logotipo es perfecto tal como está y su contraparte de favicon es una versión reducida del mismo. A veces, necesitamos agregar margen para que quede cuadrado. Entonces, ¿qué motiva un ícono oscuro?

Contraste.

Muchos logotipos están diseñados para fondos claros. Cuando no es así, existe otra versión únicamente para fondos más oscuros.

Por lo tanto, ya sea que preparemos un favicon manualmente o con una herramienta, automáticamente elegimos el logotipo compatible con la luz y comenzamos con eso. Después de todo, las pestañas del escritorio son tradicionalmente blancas o gris claro. El problema surge al pasar al modo oscuro.

Ahora que hemos identificado el problema, podemos formular una solución: a veces necesitamos un ícono más brillante para el modo oscuro. Es muy sencillo. Para un logotipo colorido pero demasiado oscuro, podemos agregar brillo a un favicon en modo oscuro con un filtro CSS:

svg  style    @media (prefers-color-scheme: dark) {      :root {        filter: brightness(2);      }    }  /style  !-- more stuff --/svg

Si el logo está en tonos o grises, podemos invertir sus colores usando otro filtro CSS:

svg  style    @media (prefers-color-scheme: dark) {      :root {        filter: invert(100%);      }    }  /style  !-- more stuff --/svg

¡Tu turno! Abra su logotipo SVG en un editor de texto y suelte cualquiera de los stylefragmentos de arriba justo antes de la /svgetiqueta de cierre. Abra su logotipo en un navegador, cambie de claro a oscuro, luego de oscuro a claro ( Windows o Mac ) y observe la magia. Ajuste los filtros brightnesso invertsegún sea necesario.

¿Qué tan rápido fue eso?

Aún más rápido: el editor de favicon SVG

Ese truco de brillo que cubrimos no surgió de la nada. Lo escribí mientras actualizaba RealFaviconGenerator con el editor de favicon SVG . Esta herramienta en línea incluye todo lo que comentamos anteriormente. Envíe su logotipo SVG para obtener una vista previa de su favicon en pestañas y páginas de resultados de Google.

Después de eso, juega con el editor para producir el favicon perfecto. En este ejemplo, aclaramos el ícono oscuro usando el brightnesstruco de filtro detrás de escena:

invertLos logotipos en escala de grises también se benefician del filtro:

Haz clic en el botón “Generar Favicon”, ¡y listo! Listo para Favicon, ajustado para modos claro y oscuro en menos de un minuto. Misión cumplida.

Conclusión

Más allá de lo genial, los favicons SVG en realidad resuelven un problema que su contraparte PNG no puede. Solo ha pasado aproximadamente un año desde que tuvimos la capacidad de usar SVG de esta manera, pero hasta ahora, parece que rara vez se usa. Con un propósito y herramientas intencionales, tal vez los favivons SVG surjan y encuentren su lugar entre los favicon clásicos.