Uso de Emojis como SVG en Favicons

Irónicamente esta imagen no es un SVG por problemas técnicos con mi CMS 😂

Hace ya unos tres meses que actualicé a Chromium 80 y me asombró ver que el changelog incluía una función largamente demandada por diseñadores web de todo el mundo, desde hace tantos años. Es el soporte de SVG como favicon que permite especificar en línea o en archivo a parte nuestros favicones a través del formato vectorial basado en XML.

Las ventajas de este cambio que más me interesan son la posibilidad de programar el favicon en vez de dibujarlo en un software de edición de gráficos (como ya he hecho en otras ocasiones) y el dinamismo que esto permite. Por ejemplo, se podría cambiar su color en función del estado de la web, como hace Travis CI pero en vez de recurrir al backend para generar bajo demanda el favicon correcto en cada momento, se podría hacer en el frontend, sin necesidad de realizar una petición extra al servidor.

Otra posibilidad que nos brinda esta novedad es la inserción de texto en el SVG que va a ser nuestro favicon. Y cuando me refiero a texto, en realidad estoy pensando en emojis. La principal expresión de la comunicación online y favorita de la generación Z, los emojis encapsulan significado en un solo glifo como otros alfabetos logográficos pero sin perder la correlación intuitiva que existe entre significante y significado, al contrario que otros como el kanji o el hanzi en cuya evolución milenaria han ido simplificando los trazos hasta perder su identidad primigenia.

Después de experimentar con distintos valores, he encontrado que el óptimo es un viewBox de 19x19. Normalmente se utilizan los de base 100 pero luego habría que reajustar el tamaño del texto y me parece una operación innecesaria. El tamaño indicado maximiza el área del emoji sin que se produzcan recortes en los bordes. El ajuste vertical de 15 parece ser el más centrado pero lo he hecho a ojo y puede que haya que ajustar un pixel más en algunos emojis concretos.

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'>
	<text y='15'>
		😂
	</text>
</svg>" />