Usa esta guia de tamanos de favicon para elegir los archivos correctos de navegador, Apple touch y web app y mantener tu logo nitido en pestanas, buscadores e instalaciones.
La mayoria de las marcas necesita mas de un solo archivo de favicon. El set practico en 2026 es un favicon.ico con varios tamanos para fallbacks pequenos del navegador, un PNG de 32x32, un Apple touch icon de 180x180 y los iconos de manifest de 192x192 y 512x512 si el sitio puede instalarse. Con eso el mismo logo funciona mejor en pestanas, Google Search, guardados en la pantalla de inicio de iOS y superficies tipo app.
Tras revisar kitnex.ai y el blog actual de Kitnex el 6 de julio de 2026, el sitio ya cubre bien prompts, mockups, color, formatos de archivo, uso comercial y checklists de lanzamiento. Lo que faltaba era la capa de despliegue: como convertir una direccion de logo aprobada en los iconos diminutos que la gente ve de verdad en pestanas, resultados de busqueda, accesos directos y pantallas de inicio. Esta guia usa la documentacion actual de Google Search, HTML, Apple y web.dev como base.
La documentacion actual de Google Search dice que el favicon debe ser cuadrado y medir al menos 8x8 pixeles, y recomienda usar un archivo mayor de 48x48 para que el icono se vea bien en distintas superficies. Google Search solo admite un favicon por sitio o hostname, asi que la claridad de marca pesa mas que las variaciones decorativas.
Ese es el suelo de elegibilidad, no el plan completo de lanzamiento. Navegadores, sistemas operativos y superficies de instalacion siguen pidiendo iconos en varios tamanos. Para la mayoria de equipos, la respuesta mas segura es mantener un simbolo coherente y exportar fallbacks pequenos para navegador, un touch icon para Apple y iconos de manifest para contextos de web app.
El modelo HTML de iconos permite declarar varios archivos rel=icon y los navegadores pueden elegir la opcion mas apropiada segun el tipo y el atributo sizes. El propio HTML Standard muestra varios iconos como un patron normal. Eso importa porque pestanas, marcadores y accesos directos de escritorio pueden preferir fallbacks distintos segun el entorno.
iOS va por otra via. MDN recuerda que iOS no usa rel=icon para Web Clips y que en su lugar busca apple-touch-icon. La guia de Apple para aplicaciones web muestra tamanos como 152x152, 167x167 y 180x180 y explica que el dispositivo elige el archivo mas cercano. Si no creas ese touch icon, dejas una superficie importante al azar.
El set minimo es mas pequeno de lo que parece. Empieza con un favicon.ico que incluya tamanos pequenos de fallback, normalmente 16x16, 32x32 y 48x48, porque esas superficies siguen existiendo. Añade un PNG de 32x32 como raster explicito para navegadores modernos, luego crea un apple-touch-icon de 180x180 para la pantalla de inicio de iPhone y los iconos de manifest de 192x192 y 512x512 para contextos de instalacion o splash.
Aqui conecta bien la pieza de Kitnex sobre formatos de archivo. El objetivo no es producir exportaciones infinitas, sino los pocos archivos que encajan con superficies reales. Si la marca elegida solo funciona como lockup horizontal o si el lettering fino desaparece a 32 pixeles, normalmente conviene simplificar el simbolo antes de generar mas archivos.
La documentacion de manifest en MDN explica que los iconos pueden declarar propositos como any, maskable o monochrome. Ese campo existe porque una web instalada no siempre muestra el icono como un cuadrado intacto. La guia de web.dev sobre maskable icons dice que la parte importante del arte debe quedarse dentro de una zona segura centrada con un radio igual al 40 por ciento del ancho, y advierte que el 10 por ciento exterior puede recortarse en algunas plataformas.
La consecuencia para branding es directa: no intentes resolver los iconos pequenos reduciendo el lockup completo. Un wordmark denso, degradados finos o contornos delicados pueden verse bien en un hero y fallar en cuanto el sistema recorta el icono dentro de un circulo o un cuadrado redondeado. Si el simbolo va a vivir en una superficie tipo app, tratalo como un asset propio.
Google dice que Googlebot-Image debe poder rastrear el archivo del favicon y que Googlebot debe poder rastrear la home, y ademas recuerda que el recrawl puede tardar desde varios dias hasta varias semanas tras un cambio. La costumbre mas segura es dejar los iconos en rutas estables, enlazarlos desde la home y evitar renombrarlos a la ligera una vez que el sitio esta en produccion.
Despues toca la prueba visual. Abre el icono en una pestana real, guarda el sitio en la pantalla de inicio de un iPhone, revisa el manifest en un flujo de instalacion de Android o Chrome y reduce el arte hasta el tamano minimo que esperas ver. Aqui tambien ayudan los articulos de Kitnex sobre mockups y checklist de marca: la misma disciplina que detecta una senaletica floja tambien detecta un simbolo que muere en un cuadrado diminuto.
Google dice que el favicon debe ser cuadrado y de al menos 8x8 pixeles, y recomienda usar un icono mayor de 48x48 para que se vea bien en distintas superficies. Google Search solo admite un favicon por sitio o hostname, asi que importa mas la claridad de marca que las variaciones decorativas.
Normalmente si. favicon.ico sigue siendo un fallback muy util para contextos pequenos del navegador y marcadores, mientras que PNG o SVG cubren mejor otras superficies modernas. La meta practica no es elegir un unico ganador, sino asegurarte de que tanto los fallbacks antiguos como las rutas nuevas tienen un archivo fiable.
El favicon cubre sobre todo superficies de navegador y buscador, mientras que apple-touch-icon es el icono que iOS usa cuando alguien guarda el sitio en la pantalla de inicio. MDN senala que iOS no usa rel=icon para Web Clips, por eso un buen favicon de navegador no garantiza por si solo un buen icono en iPhone.
No todos los sitios informativos necesitan un sistema profundo de iconos tipo app, pero 512x512 sigue siendo util cuando el sitio puede instalarse, fijarse o mostrarse en superficies grandes del sistema. Si tu web es mas bien informativa, prioriza primero el favicon de navegador y el Apple touch icon, y anade los assets de manifest grandes cuando la instalacion ya forme parte del producto.
Empieza por la parte mas simple del sistema de marca, normalmente un simbolo, un monograma o una version muy reducida en lugar del wordmark completo. Aumenta el espacio negativo, elimina detalles delicados y prueba el icono a 16-32 pixeles sobre fondos claros y oscuros. Si solo funciona en grande, el problema es el arte, no la exportacion.
Sigue explorando la biblioteca de Kitnex para comparar estrategias de prompts, flujos para fundadores y marcos de decisión de marca.
Una buena paleta de logo no se decide solo por intuición. Esta guía explica cómo elegir colores que encajen con tu categoría, funcionen en superficies reales y sobrevivan al lanzamiento.
Leer artículoUn buen brief de logo convierte gustos vagos en una dirección útil. Esta guía explica qué incluir, ofrece una plantilla copiable y muestra cómo convertirla en mejores direcciones para logos con IA.
Leer artículoLa identidad de marca de una startup es más que un logo. Reúne posicionamiento, reglas visuales, assets de lanzamiento y revisiones para que la empresa se vea consistente desde la primera salida.
Leer artículoEl mejor creador de logos con IA para una pequeña empresa no es solo el que enseña ejemplos bonitos. Es el que te ayuda a pasar de una idea a archivos utilizables, activos consistentes de marca y superficies reales de lanzamiento sin sumar complejidad innecesaria.
Leer artículoUn buen mockup de logo no es una escena bonita al azar. Es una superficie real que te muestra si la marca sigue siendo clara y creíble fuera del artboard.
Leer artículoPNG es el formato más práctico para muchos usos digitales de un logo, pero SVG, PDF, EPS y JPG resuelven necesidades distintas. Esta guía explica qué archivo conviene para web, mockups, impresión y trabajo de marca a largo plazo.
Leer artículoLos mejores prompts de logos con IA no dependen de adjetivos ingeniosos. Funcionan como briefs creativos compactos que aclaran la marca, el público, la dirección visual y el contexto de uso para que el modelo entregue opciones más útiles.
Leer artículoUn logo generado con IA puede usarse comercialmente en muchos casos, pero eso no significa que quede protegido automáticamente ni que esté libre de riesgo de marca. La clave está en los derechos y en la revisión previa al lanzamiento.
Leer artículoUna idea difusa se convierte en un flujo real de logo cuando defines el brief, comparas direcciones, pruebas mockups y decides si el concepto ya aguanta el lanzamiento.
Leer artículoPara un fundador, el mejor flujo de logo con IA no es el que genera más opciones, sino el que permite decidir rápido y pasar a assets listos para lanzamiento.
Leer artículoEl color no es solo decoración. Cambia cómo se percibe la seriedad, la categoría y la credibilidad de una marca.
Leer artículo
Kitnex