Visto en: https://css-tricks.com/emoji-as-a-favicon/

Toda web necesita su favicon: ese iconito que sale junto al título de la página.

Normalmente, tu favicon sería una pequeña imagen que enlazas en el encabezado del .html, como en este blog (aunque aquí lo hace WordPress por mí).

<link rel="icon" href="https://theroamingworkshop.cloud/b/wp-content/uploads/2022/08/cropped-TRW-favicon-1-32x32.png" sizes="32x32">

Pero para tus webapps de uso personal no es necesario perder el tiempo diseñando una imagen, ni tampoco dejar el cutre icono por defecto del navegador.

Puedes usar un Emoji, que le dará un toque más personal a tu página, tal y como nos indica Lea Verou en este tweet:

Resumiendo

Vamos, que todo lo que tienes que hacer es copiar y pegar lo siguiente:

  1. Pega este código dentro de tu <html>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">
  1. Sustituye el icono «⚡» por cualquiera de los símbolos HTML, como los que encontrarás en w3schools (selecciónalo y cópialo):

https://www.w3schools.com/charsets/ref_emoji.asp

  1. En caso de que veas símbolos raros en lugar del icono, añade codificación UTF-8 a tu documento:
    <meta charset="UTF-8">

Código ejemplo

Aquí te dejo un código de ejemplo para que lo pruebes en un archivo .html en tu ordenador.

<html>

<meta charset="UTF-8">

<title>Mi web app</title>

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">

</html>

Consulta y comparte este y más trucos de diseño web en 🐦 Twitter!

🐦 @RoamingWorkshop