Índice
Lea Verou tuvo la genial idea de usar un emoji como favicon. La idea solo fue posible recientemente, ya que los navegadores comenzaron a admitir SVG para favicons. Inserta un emoji dentro de un textelemento SVG y úsalo como favicon.
Aquí está la frase ingeniosa en uso:
link rel="icon" href="data:image/svg+xml,svg xmlns=%22https://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22text y=%22.9em%22 font-size=%2290%22 /text/svg"Proyecto de demostración que demuestra Emoji como Favicon
Hice un pequeño proyecto de demostración rápido para que puedas verlo en funcionamiento. Vea el proyecto implementado para ver realmente los favicons. Eso funciona en Firefox y Chrome. Safari solo hace esos íconos de estilo “máscara” en SVG, por lo que esto no funciona allí. ¿Quizás podría ser así? No sé, te dejaré probarlo.
Aquí tenéis un vídeo por si queréis verlo.
Conceptos relacionados
- Ada Rose Cannon agregó una insignia que puede incrementarse.
- Taylor Hunt incluyó algo de código sobre cómo usa el nombre de la rama actual de Git para crear un favicon SVG (relacionado con la idea de “diferente favicon para desarrollo”)
- Podrías evitar una
prefers-color-schemeconsulta de medios en SVG si quisieras hacer algo especial para el modo oscuro (aunque los emojis generalmente funcionan bien en cualquier fondo)
Tal vez te puede interesar:
- La innovación no puede mantener la Web rápida
- Rendimiento web ultrarrápido
- Tabla de contenidos fijos con estados activos de desplazamiento
- “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario
Cómo utilizar un emoji como favicon fácilmente
Índice Proyecto de demostración que demuestra Emoji como Favicon
programar
es
2025-01-15
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente