Genere etiquetas HTML para favicon y Apple touch icon

Crea una referencia de favicon para cada recurso suministrado y añade automáticamente una referencia Apple touch icon. El resultado es determinista, escapa de forma segura los valores de los atributos y queda listo para pegar en una plantilla, un sitio estático, un gestor de contenidos o el diseño de una aplicación.

Prepare un inventario preciso de iconos

Comience con los archivos de icono que su sitio ya publica. Añada una fila por cada recurso e indique sus dimensiones en píxeles con el formato ANCHOxALTO, además de su ruta pública o URL. Los conjuntos habituales para navegadores incluyen archivos cuadrados pequeños destinados a pestañas y marcadores, mientras que una imagen cuadrada mayor resulta útil cuando un dispositivo guarda el sitio en la pantalla de inicio. Puede usar rutas relativas al sitio, como /assets/icons/favicon-32.png, o URL absolutas servidas desde un alojamiento de recursos. Cada tamaño debe aparecer una sola vez, pues dos archivos rivales con dimensiones idénticas vuelven ambigua la selección. El generador valida todas las filas antes de producir el marcado, de modo que las rutas vacías, dimensiones incorrectas, tamaños duplicados y valores extremos no admitidos generan errores de entrada claros en lugar de etiquetas defectuosas. La herramienta no consulta el sistema de archivos ni descarga imágenes, por lo que considera las dimensiones como una declaración explícita. Compruebe que cada ruta será accesible públicamente después del despliegue y que las dimensiones reales coinciden con las indicadas.

Comprenda cómo se eligen y ordenan las etiquetas

Por cada icono suministrado, el resultado incluye un elemento link con rel establecido como icon, un valor sizes normalizado en minúsculas y un href escapado. Las etiquetas para navegador se ordenan desde el área de píxeles más pequeña hasta la mayor, con criterios de desempate deterministas; por ello, un mismo conjunto lógico siempre produce la misma salida aunque las filas lleguen en otro orden. El Apple touch icon se selecciona aparte. Se da preferencia a un recurso cuadrado exacto de 180x180, un tamaño muy utilizado para iconos táctiles. Si falta, se elige el icono cuadrado más grande; si no existe ninguno cuadrado, se usa el recurso de mayor tamaño mediante una regla de respaldo transparente. El archivo elegido permanece también en la lista normal del navegador y otro elemento link lo identifica con rel igual a apple-touch-icon. El escape de atributos protege ampersands, comillas y signos angulares presentes en las rutas sin alterar el destino interpretado por HTML. No se deduce ningún tipo MIME a partir de la extensión, evitando declaraciones falsas en rutas sin extensión o con transformaciones.

Coloque y verifique el marcado generado

Copie el valor html devuelto en el head de la plantilla compartida que sirve todas las páginas públicas. Si usa un framework, colóquelo en el diseño raíz o en la plantilla de metadatos, en vez de repetirlo dentro de cada ruta. El arreglo tags contiene las mismas líneas como cadenas separadas cuando un script de compilación necesita valores estructurados; icon_count y apple_touch_size facilitan las comprobaciones automatizadas. Tras el despliegue, abra el código fuente de la página generada y verifique que los valores href se resuelvan desde el origen público definitivo. Una ruta relativa al sitio que empiece por barra se resuelve desde la raíz del dominio; una ruta relativa sin barra se resuelve respecto de la ubicación del documento y puede comportarse de otro modo en rutas anidadas. Al comprobar sustituciones, borre la caché del navegador o use una ventana privada, ya que los favicon se almacenan en caché con especial persistencia. Si esta experiencia es importante, pruebe también a añadir el sitio a la pantalla de inicio de un móvil. La herramienta solo escribe referencias: no crea imágenes, modifica manifiestos web, sube recursos ni confirma el tipo de contenido servido.