Cómo generar un favicon SVG con emoji y colores personalizados

Para qué sirve este generador

Un favicon permite identificar un sitio mediante un icono asociado a su página. Esta herramienta genera el marcado HTML del favicon y el marcado SVG correspondiente a partir de un emoji y de colores que puedes elegir. También admite una URL opcional para incorporarla a los enlaces de icono del HTML.

Es una opción útil cuando quieres preparar el material que revisarás antes de integrarlo en una página. Puedes escoger un fondo y un color de texto acordes con tu diseño, conservar los valores predeterminados si no necesitas personalizarlos y comprobar por separado qué parte del resultado corresponde al HTML y cuál al SVG. El título del sitio puede introducirse, aunque no modifica el material generado.

Pasos para preparar el favicon

1. Introduce el emoji que quieras mostrar en el favicon. Si no personalizas ese campo, el resultado utiliza una llave inglesa como valor predeterminado.

2. Especifica el color de fondo y el color del texto del SVG. Al dejar esos campos sin cambios, se emplean #2563eb para el fondo y #ffffff para el texto.

3. Añade una URL de icono únicamente cuando quieras que figure en el HTML generado. Si el campo contiene un valor, la herramienta incorpora esa dirección, con escape HTML, en dos elementos de enlace de icono.

4. Rellena el título del sitio solo si te resulta útil para completar los datos de entrada. Ese texto se acepta, pero no se utiliza en el marcado, así que cambia el emoji o los colores si necesitas modificar el aspecto del favicon.

5. Inicia la generación y revisa el resultado satisfactorio. Después, separa el marcado HTML del SVG, copia ambos fragmentos y decide cómo integrarlos en tu página según la estructura que estés preparando.

Cómo interpretar lo que recibes

El resultado reúne marcado HTML para enlazar el favicon y marcado SVG para representar el icono. El emoji que proporcionaste aparece como texto dentro del SVG, mientras que los colores elegidos se aplican a su fondo y a su texto.

El HTML incluye un enlace al favicon mediante una URI de datos SVG. Cuando la URL opcional no está vacía, también encontrarás dos elementos de enlace que contienen esa dirección con escape HTML. Esa presencia indica cómo se incorporó el valor al marcado, no que se haya transformado en otro recurso.

Compara el SVG con tus entradas y revisa el HTML antes de incorporarlo a una página. Si el título no aparece en la salida, el comportamiento es el esperado: ese campo no interviene en el material generado. El resultado proporciona marcado de favicon, por lo que debes interpretar por separado su contenido HTML y su representación SVG.

Ejemplo práctico

Quieres preparar un favicon oscuro con un cohete para revisar el marcado antes de incorporarlo a una página.

Introduce un emoji de cohete, establece #111827 como fondo y #f9fafb como color de texto, deja vacía la URL opcional y genera el resultado.

El resultado contiene marcado HTML del favicon y marcado SVG; el HTML incluye un enlace mediante una URI de datos SVG.

Limitaciones

• El resultado proporciona marcado HTML y SVG; la URL se incorpora a los enlaces de icono y los colores se aplican al SVG, sin ampliar esas funciones a otros materiales.

Errores frecuentes

• Causa: intentar cambiar el diseño escribiendo otro título de sitio. Corrección: selecciona el emoji y ajusta los colores del SVG, porque el título no se utiliza en el marcado generado.

Preguntas frecuentes

¿Puedo añadir una URL de icono al favicon?

Cuando el campo contiene una URL, la herramienta la incorpora con escape HTML en dos elementos de enlace de icono. El HTML conserva ese valor como dirección dentro del marcado generado.

¿Qué aparece dentro del SVG?

Cuando indicas un emoji, este aparece como texto dentro del SVG. Si no cambias el campo correspondiente, se utiliza una llave inglesa como valor predeterminado.

¿El título del sitio cambia el favicon?

El título se admite como dato de entrada, pero no se utiliza al generar el marcado. Para cambiar la apariencia del favicon, modifica el emoji o los colores del SVG.