#558 · Herramienta para desarrolladores

Generador de etiquetas de favicon

Genera etiquetas HTML para favicon e iconos de dispositivos a partir de una URL o ruta base y varios tamaños habituales. Puedes elegir si quieres incluir favicon.ico, iconos PNG, apple-touch-icon y el enlace al Web App Manifest. El resultado evita etiquetas vacías y permite preparar un bloque coherente para el .

Datos de entrada

Ruta base de iconos
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Escribe la ruta base donde estarán los iconos.
  2. Activa o desactiva favicon.ico, apple-touch-icon y manifest.
  3. Genera las etiquetas.
  4. Ajusta nombres de archivo si tu proyecto usa otra convención y pega el bloque en el head.

Qué hace esta herramienta para desarrolladores

Crea link rel=icon para 16x16 y 32x32, apple-touch-icon de 180x180 y, opcionalmente, rel=manifest.

La ruta base se normaliza con una barra final. Los nombres de archivo generados son favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, favicon.ico y site.webmanifest.

Los nombres son una convención del generador; deben existir realmente en la ruta seleccionada para que el navegador pueda cargarlos.

Ejemplo

Entrada

/icons/

Salida esperada

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">

Casos de uso

  • Preparar el head de un proyecto nuevo.
  • Migrar iconos a una ruta común.
  • Evitar olvidar tamaños y relaciones frecuentes.

Consejos para obtener resultados fiables

  • Trabaja con una copia del marcado o archivo antes de sustituirlo en producción.
  • Prueba una entrada válida y otra deliberadamente incorrecta para entender los mensajes de la herramienta.
  • Revisa el resultado en el contexto real del sitio y no solo de forma aislada.
  • Conserva únicamente los metadatos o hints que tengan una finalidad concreta.

Detalles del procesamiento

No se realizan descargas ni conversión de imágenes. La salida es únicamente el marcado HTML correspondiente a la ruta indicada.

No genera archivos ICO/PNG ni valida transparencia, dimensiones, MIME real o soporte específico de cada navegador.

Preguntas frecuentes

¿Qué tamaños de favicon genera esta herramienta?

Incluye etiquetas PNG de 16x16 y 32x32, además de un apple-touch-icon de 180x180 cuando está activado.

¿Necesito mantener favicon.ico?

No siempre, pero sigue siendo útil para compatibilidad con algunos clientes y configuraciones antiguas.

¿Qué nombre usa para el Web App Manifest?

El generador enlaza site.webmanifest dentro de la misma ruta base.

¿Puedo usar una URL absoluta como ruta base?

Sí. Siempre que termine representando una ubicación válida, se normaliza con una barra final antes de añadir los nombres de archivo.

¿La herramienta crea las imágenes del favicon?

No. Solo genera las etiquetas HTML; las imágenes deben existir previamente.

Resumen del módulo

MóduloFunción
EntradaRuta base de iconos
ProcesamientoAnálisis y transformación local en el navegador
SalidaEtiquetas <link>

Explora Metadatos web y archivos del servidor

Consulta más utilidades de esta categoría para revisar metadatos, relaciones HTML y archivos de configuración web.

Ver Category Hub