Conversión de formatos y compatibilidad en la web moderna
El icono de un sitio web, conocido históricamente como favicon, ha dejado de ser un simple archivo de mapa de bits de pequeña resolución para convertirse en un sistema estructurado de recursos visuales. En la actualidad, los navegadores de escritorio, los dispositivos móviles y las aplicaciones web progresivas (PWA) requieren diferentes dimensiones y formatos para representar la identidad de una marca de manera óptima en pestañas, marcadores, pantallas de inicio y menús de aplicaciones.
Esta herramienta procesa un único archivo de imagen de origen y lo transforma en una colección completa de iconos optimizados para la web. El resultado se empaqueta en un único archivo comprimido que incluye los formatos necesarios para cubrir la compatibilidad con navegadores antiguos y modernos, dispositivos iOS y sistemas Android.
El procesamiento de la imagen se realiza de manera local: tu imagen se convierte en iconos dentro de tu navegador. No se sube nada a BroBroGo, lo que garantiza que los datos del archivo original no se transmitan ni se almacenen en servidores externos durante el proceso de generación.
Especificaciones técnicas de los archivos generados
El paquete descargable resultante de la conversión contiene una estructura de archivos diseñada para cumplir con los estándares actuales de desarrollo web. Al procesar la imagen, se generan los siguientes elementos:
- favicon.ico: Un archivo contenedor que integra tres resoluciones de mapa de bits en su interior: 16, 32 y 48 píxeles. Este archivo garantiza la compatibilidad retrospectiva con navegadores antiguos que buscan este recurso específico en la raíz del servidor.
- Iconos PNG: Archivos individuales optimizados para diferentes propósitos y densidades de pantalla, generados en las siguientes dimensiones:
- 16 × 16 px y 32 × 32 px: Destinados principalmente a las pestañas de los navegadores de escritorio.
- 180 × 180 px: Dimensión requerida por los dispositivos Apple (iPhone y iPad) para los accesos directos en la pantalla de inicio.
- 192 × 192 px y 512 × 512 px: Tamaños estándar utilizados por dispositivos Android y aplicaciones web progresivas (PWA).
- site.webmanifest: Un archivo de configuración en formato de texto que enumera los iconos de mayor tamaño y sus respectivas dimensiones, permitiendo que los sistemas operativos móviles identifiquen correctamente los recursos visuales al instalar la web.
- Archivo vectorial: Si la imagen de origen proporcionada es un archivo SVG, el propio vector original se incluye en el paquete final, asegurando una definición perfecta en cualquier resolución de pantalla compatible con este formato.
Requisitos del archivo de origen y optimización
Para obtener un resultado de alta calidad en todas las resoluciones generadas, es fundamental seleccionar adecuadamente el archivo de origen. La herramienta admite tres formatos de entrada: PNG, JPG y SVG, con un límite de tamaño de archivo de hasta 50 MB.
Uso de gráficos vectoriales (SVG)
El uso de un archivo SVG como origen es la opción recomendada. Al tratarse de gráficos basados en fórmulas matemáticas y no en cuadrículas de píxeles, el motor de conversión puede renderizar cada tamaño de icono directamente desde el vector. Esto asegura que incluso las versiones más pequeñas, como la de 16 píxeles, mantengan la máxima nitidez posible.
Uso de imágenes de mapa de bits (PNG o JPG)
Si se utiliza una imagen rasterizada, se recomienda que el archivo de origen tenga unas dimensiones mínimas de 512 × 512 píxeles. Si se introduce una imagen con dimensiones inferiores, el sistema mostrará la advertencia: "Imagen de origen pequeña ({w} × {h} px): los iconos grandes pueden verse borrosas. Lo ideal es 512 × 512 o más, o un SVG.". Esto se debe a que la generación de los iconos de 192 px y 512 px requerirá un escalado hacia arriba, lo que introduce pérdida de definición y bordes suavizados artificialmente.
Ajustes de encuadre y color de fondo
Los iconos de sistema deben ser estrictamente cuadrados. Cuando la imagen de origen no cumple con esta relación de aspecto, la herramienta ofrece dos métodos de adaptación para evitar la deformación de la imagen:
| Opción de ajuste | Comportamiento visual | Caso de uso recomendado |
|---|---|---|
| Encajar | La imagen completa queda visible, centrada y con margen alrededor. | Logotipos alargados o con elementos que no deben recortarse. |
| Rellenar | La imagen llena el cuadrado y los bordes sobrantes se recortan. | Fotografías o composiciones visuales abstractas que cubren todo el lienzo. |
Adicionalmente, se debe considerar el tratamiento de la transparencia. Por defecto, el generador mantiene el fondo transparente, lo cual es la opción idónea para la visualización en las pestañas de los navegadores de escritorio, adaptándose a los diferentes temas (claros u oscuros) del sistema operativo.
Sin embargo, para los iconos destinados a la pantalla de inicio de dispositivos iOS (iPhone y iPad), las áreas transparentes se pintan automáticamente de negro. Por esta razón, si se prevé que los usuarios añadirán el sitio web a la pantalla de inicio de sus dispositivos móviles, es más seguro seleccionar un color de fondo sólido mediante el selector de color de la interfaz.
Errores comunes en la carga de archivos
Durante el proceso de lectura y conversión de la imagen, pueden presentarse situaciones que impidan la generación de los iconos. La herramienta cuenta con validaciones específicas para informar al usuario sobre el origen del problema:
- Formato no compatible: Si se intenta subir un archivo con una extensión distinta a las admitidas, se mostrará el mensaje: "Solo se admiten imágenes PNG, JPG y SVG.".
- Archivo dañado o vacío: Si el archivo no puede ser interpretado por el motor del navegador, se presentará el error: "Este archivo no se pudo abrir como imagen. Puede estar dañado, vacío o no ser realmente una imagen.".
- Estructura SVG incorrecta: En caso de subir un archivo vectorial con errores de sintaxis en su código XML, la interfaz indicará: "No se pudo leer este SVG. Comprueba que el archivo sea un documento SVG válido.".
- Exceso de peso: Si el archivo supera el límite establecido para el procesamiento local, se mostrará la advertencia: "El archivo supera los 50 MB. Usa una imagen más pequeña.".
- Ausencia de archivo: Si se intenta iniciar la conversión sin haber cargado un recurso, el sistema indicará: "Primero elige una imagen PNG, JPG o SVG.".
Implementación de los iconos en el servidor
Una vez generado el paquete y descargado el archivo ZIP, el proceso de instalación en el sitio web requiere dos pasos fundamentales para asegurar que los navegadores localicen y carguen los recursos de forma correcta:
- Subida de archivos: Se deben extraer todos los archivos contenidos en el ZIP y subirlos al directorio raíz del servidor web. Esto significa que el archivo
favicon.icodebe ser accesible directamente a través de la rutahttps://tudominio.com/favicon.ico. Muchos navegadores y rastreadores web buscan este archivo en dicha ubicación de forma automática, sin necesidad de leer el código HTML. - Inserción del código HTML: Se debe copiar el fragmento de código facilitado por la herramienta en la sección
<head>de cada una de las páginas HTML del sitio web. Este bloque de código indica a los navegadores modernos la ubicación exacta de las variantes PNG de alta resolución, el archivo de configuración para dispositivos móviles y el recurso vectorial si estuviera disponible, permitiendo que cada dispositivo elija de forma automática el tamaño de icono más adecuado para su pantalla.
Preguntas frecuentes
¿Qué archivos incluye el pack de iconos?
Un favicon.ico con versiones de 16, 32 y 48 píxeles, iconos PNG de 16, 32, 180, 192 y 512 píxeles, y un site.webmanifest que lista los iconos grandes. Si partes de un SVG, el vector también se incluye. Todo va en un único ZIP.
¿De qué tamaño debe ser la imagen de origen?
Lo ideal es un SVG: cada icono se dibuja desde el vector y hasta los 16 píxeles se ven nítidos. Con PNG o JPG, parte de al menos 512 × 512; las imágenes más pequeñas se amplían y pueden verse borrosas.
¿Fondo transparente o de color?
Para las pestañas, la transparencia funciona bien. En cambio, las pantallas de inicio de iPhone y iPad pintan de negro las zonas transparentes: si tus visitantes pueden añadir la web a su pantalla de inicio, elige un color de fondo.
¿Qué pasa si mi imagen no es cuadrada?
Los iconos son cuadrados, pero tu imagen nunca se deforma. Por defecto se centra con margen alrededor; con «Rellenar» se recortan los bordes sobrantes.
¿Dónde coloco los archivos en mi web?
Súbelos a la raíz del sitio, de modo que favicon.ico quede en /favicon.ico, y pega las líneas generadas en el <head> de tus páginas. El navegador elige solo el tamaño adecuado.