Herramientas de imágenes y assets

Gratis Generador HTML de favicon

Genera etiquetas de favicon e iconos web app para sitios estáticos.

Cargando herramienta...

Qué es Generador HTML de favicon?

El marcado de favicon indica a los navegadores y dispositivos qué iconos usar para pestañas, marcadores, accesos directos a la pantalla de inicio e instalaciones de aplicaciones web. Un sitio estático pequeño puede necesitar varios formatos de icono porque los navegadores de escritorio, los navegadores móviles y las aplicaciones web guardadas usan archivos diferentes.

Respuesta rápida

Genere etiquetas HTML de favicon, referencias de icono táctil de Apple y entradas de manifiesto de aplicación web para sitios estáticos. Incluya rutas de icono SVG y de respaldo para una compatibilidad amplia.

Last updated: 2026-06-11

Limitaciones

  • Los archivos de icono deben existir en las rutas especificadas en la salida publicada. Las etiquetas generadas son solo referencias.
  • El icono táctil de Apple tiene expectativas de tamaño específicas. Los dispositivos Apple esperan un PNG de 180x180 píxeles.
  • El fragmento del manifiesto web requiere JSON válido. Un error de sintaxis puede impedir que los navegadores lean los metadatos de la aplicación.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese la ruta base donde se publicarán sus archivos de icono.
  2. Agregue el nombre de la aplicación o sitio más los colores de tema y fondo.
  3. Copie las etiquetas link y meta generadas en la sección head de su HTML.
  4. Copie el fragmento JSON del manifiesto en su archivo site.webmanifest si usa uno.

Para qué puedes usarla

  • Agregar marcado de favicon a un sitio web HTML simple.
  • Preparar rutas de iconos para GitHub Pages.
  • Crear un fragmento JSON de manifiesto web pequeño.

Casos de uso

Ejemplos prácticos

Ejemplo

Configuración de iconos para sitio estático

Un sitio de GitHub Pages almacena iconos en /icons. El generador crea el favicon, icono SVG, icono táctil de Apple, enlace de manifiesto y etiquetas de color de tema.

Ejemplo

Soporte para guardar en pantalla de inicio

Un visitante móvil guarda el sitio en la pantalla de inicio de su teléfono. El icono táctil de Apple y las entradas del manifiesto ayudan a que el acceso directo se vea intencional.

Errores comunes

  • Usar rutas de icono que se rompen después de la implementación en una subcarpeta.
  • Olvidar un icono táctil de Apple para guardar en pantalla de inicio en móvil.
  • Usar un color de tema que no coincida con el encabezado real del sitio.

Verificación

  1. Abra la página publicada y verifique el favicon en la pestaña del navegador. Si no aparece, verifique que la ruta coincida con la ubicación real del archivo.
  2. En un dispositivo iOS o simulador, use Compartir > Agregar a Pantalla de Inicio y confirme que el acceso directo use la imagen del icono táctil de Apple.

FAQ

Preguntas sobre Generador HTML de favicon

¿Todavía necesito favicon.ico?

Sigue siendo útil como respaldo general. Muchas configuraciones modernas también incluyen iconos SVG y PNG.

¿Dónde deben vivir los archivos de icono?

Use una carpeta pública estable como /icons o /assets/icons y asegúrese de que la misma ruta exista en la salida compilada.

¿Se requiere un manifiesto web?

No. Es opcional para un sitio web normal, pero útil si desea un mejor comportamiento de aplicación guardada en móvil y escritorio.

Herramientas relacionadas

Más herramientas de imágenes y assets

Prueba también

Prueba también