Cómo generar un paquete de favicon
- Suelta tu logo o imagen (JPG, PNG o WebP) en el recuadro de arriba, o haz clic en Elegir archivo, una marca cuadrada de 512×512 px o más grande da el resultado más nítido en todos los tamaños.
- Haz clic en Generar paquete de favicon. Tu navegador recorta al centro la imagen a un cuadrado, la renderiza en cada tamaño que necesita un sitio moderno, y empaqueta
favicon.ico, los PNG independientes,site.webmanifesty un fragmento HTML, todo localmente. - Descarga el ZIP y descomprímelo.
- Edita
site.webmanifestpara reemplazar el nombre y los colores de marcador de posición por los tuyos, y luego sube todos los archivos a la carpeta raíz de tu sitio. - Abre
favicon-html-snippet.htmly pega sus cinco líneas<link>en el<head>de tu página.
Por qué un paquete de favicon completo supera a un solo favicon.ico
Durante mucho tiempo, un único favicon.ico en la raíz de tu sitio era suficiente, los navegadores lo piden automáticamente, y esa era toda la historia. Eso ya no es cierto. Los navegadores modernos, los teléfonos y las apps web instalables buscan cada uno su propio icono con una forma específica, y un favicon.ico a secas solo cubre exactamente uno de ellos:
- Pestañas y marcadores del navegador siguen queriendo
favicon.ico, o un PNG pequeño a 16 y 32 px para un renderizado más nítido en pantallas de alta densidad. - Las pantallas de inicio de iOS (cuando alguien pulsa “Añadir a pantalla de inicio” en Safari) buscan específicamente
apple-touch-icon.pnga 180×180 px. Sin él, iOS recurre a una captura de pantalla de la página, que no se parece en nada a un icono de app real. - Android, Chrome y las PWA instalables leen
site.webmanifest, un pequeño archivo JSON que le dice al sistema operativo el nombre de tu sitio y dónde encontrar iconos de 192×192 y 512×512 px para el cajón de apps, el lanzador y la pantalla de carga.
Si te falta cualquiera de estos, el resultado visible es un icono borroso, estirado o de globo genérico exactamente en la plataforma que no cubriste, normalmente descubierto por un usuario, no en pruebas. Construir todo esto a mano significa abrir un editor de imágenes cinco veces por separado, exportar cinco PNG de distinto tamaño, escribir a mano un .ico multi-tamaño, y acertar exactamente con los nombres de campo y rutas de icono del manifest. Esta herramienta hace todo eso en un solo paso: toma tu única imagen de origen, la recorta al centro en un cuadrado para que nada se distorsione, renderiza cada tamaño que necesita un sitio real, y entrega un ZIP listo para desplegar con el HTML ya escrito por ti.
Cada pieza reutiliza bloques de construcción ya probados en este sitio, el mismo escritor de .ico multi-tamaño detrás de PNG a ICO, las mismas matemáticas de recorte centrado cuadrado detrás de Recortar Imagen, y el mismo redimensionador de canvas detrás de Redimensionar Imagen, en lugar de una implementación improvisada, así que la salida sigue exactamente las convenciones de nombrado de archivo usadas por realfavicongenerator.net y favicon.io, los dos servicios generadores de favicon más usados.
Sin subida, tu logo se queda en tu dispositivo
Los favicons casi siempre vienen de un logo, y los logos son con frecuencia el activo que menos te puedes permitir filtrar: un producto sin anunciar, el rediseño de marca de un cliente bajo NDA, una marca personal que aún no has lanzado. La mayoría de los generadores de favicon suben tu imagen a su servidor para hacer el redimensionado. Esta herramienta no lo hace, el recorte, cada redimensionado, el empaquetado del .ico y el ensamblado del ZIP ocurren todos en la memoria propia de tu navegador. Nada se transmite, nada se almacena, y no hay cuenta ni verificación por correo. Cierra la pestaña y la única copia del resultado es el ZIP ya en tu carpeta de descargas.
Usos habituales
- Generar un conjunto de favicon completo y correcto según los estándares para un sitio web, landing page o web app nuevos en un solo paso.
- Arreglar un sitio que solo tuvo siempre un favicon.ico a secas y se ve mal al añadirlo a una pantalla de inicio de iPhone o instalarlo como PWA en Android.
- Producir los activos de icono para la carpeta
public/de un generador de sitios estáticos o framework sin abrir un editor de imágenes cinco veces. - Renovar un favicon antiguo de baja resolución con un conjunto nítido y correctamente dimensionado construido a partir de un logo actual.
- Obtener un fragmento HTML listo para copiar y pegar en lugar de escribir a mano cinco etiquetas
<link>y esperar que los atributos sean correctos. - Combinarlo con el Generador de Paletas de Colores o el Generador de Gradientes CSS al montar la identidad visual completa de un sitio nuevo.
