Un Conjunto de Favicon que Funciona en Todas Partes en 2026
Seis tamaños, un .ico, un manifest — todo lo que realmente necesitas para enviar un favicon que se vea bien en todos los navegadores, pantalla de inicio de iOS y barra de tareas de Windows en 2026.
Los favicons parecen triviales. Envía uno y aparecen cien casos extremos: el icono de la pantalla de inicio de iOS está borroso, la pestaña de Chrome en Android tiene el color incorrecto, los pines de Windows muestran un 16×16 borroso. Esta guía elimina el ruido y cubre exactamente lo que necesitas en 2026 — ni más, ni menos.
El Conjunto Viable Mínimo
Seis activos cubren cada superficie que mostrará el icono de tu sitio:
favicon.ico— contenedor multi-tamaño con 16×16, 32×32, 48×48 adentro (navegadores heredados, Explorador de Windows, pestañas fijadas).favicon-16x16.png,favicon-32x32.png— pestañas de navegadores modernos.apple-touch-icon.png(180×180) — pantalla de inicio de iOS, lista de lectura de Safari.android-chrome-192x192.png,android-chrome-512x512.png— pantalla de inicio de Android, indicadores de instalación de PWA.site.webmanifest— la configuración de PWA que apunta a los iconos de Android y define el color del tema.
Eso es todo. Todo lo demás (SVG de pestaña fijada de Safari, variantes antiguas de Apple touch, imágenes de mosaicos de Windows) es heredado. Los navegadores modernos vuelven a caer gracefully al PNG de 192 o 512.
Por Qué .ico Sigue Siendo Necesario en 2026
Un archivo .ico es un contenedor binario que puede contener múltiples imágenes PNG en diferentes tamaños. Cuando un navegador solicita /favicon.ico (que algunos todavía hacen por defecto), obtiene los tres tamaños en una solicitud. El renderizador elige el que mejor se ajuste a la superficie actual — un 48×48 para el Explorador de Windows, un 16×16 para una pestaña del navegador.
Un PNG renombrado a .ico solo contiene un tamaño. Funciona en su mayoría porque los navegadores son indulgentes, pero el Explorador de Windows y algunos clientes de correo electrónico lo renderizarán borroso o se negarán a mostrarlo. Envía un verdadero .ico si quieres consistencia.
Lo Que Hace site.webmanifest
Cuando un usuario agrega tu sitio a su pantalla de inicio de Android o lo instala como una PWA, el navegador lee site.webmanifest para saber cómo debe verse la aplicación instalada. Define:
name/short_name— la etiqueta bajo el icono.icons— qué PNGs usar en qué tamaño.theme_color— color de la barra de estado cuando la aplicación está abierta.background_color— fondo de la pantalla de inicio durante el lanzamiento.display— usualmentestandalonepara que la aplicación se abra sin chrome del navegador.
Sin un manifest, Android vuelve a caer al apple-touch-icon y muestra tu sitio dentro de una ventana del navegador. Con uno, se ve como una aplicación nativa.
El Fragmento HTML
Cada archivo va en la raíz de tu web. Cada sitio necesita este bloque en <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Diseñando para 16×16
Tu hermoso logo detallado muere en 16 píxeles. Las reglas para hacer un favicon que se lea claramente en ese tamaño:
- Una forma. Un círculo, un cuadrado, o un monograma fuerte. Evita formas compuestas.
- Alto contraste. El primer plano y el fondo deben estar separados al menos WCAG AA. Los gradientes sutiles desaparecen.
- Margen seguro. Deja un relleno del 10–20%. Los navegadores a menudo agregan su propio borde de 1px.
- ¿Texto? Una sola letra en negrita funciona mejor que una palabra completa en 16px.
El Generador de Favicon de aukimi produce los seis archivos y el fragmento HTML desde una imagen o una letra en menos de 30 segundos. Genera un verdadero .ico multi-tamaño (según la especificación Microsoft ICONDIR), no un PNG renombrado. Carga, elige tus tamaños, descarga un paquete sin zip, pega el fragmento — listo.
Errores Comunes
- Servir
.icodesde CDN sin encabezados de caché. Los navegadores almacenan en caché los favicons agresivamente. Usa una URL versionada (?v=2) para forzar una actualización después de un rediseño. - Iconos diferentes por subdominio. Un único
favicon.icoen el apex es generalmente lo que los usuarios esperan — no fragmentes tu identidad. - Olvidar el meta
theme-color. Chrome móvil tinta el chrome del navegador para que coincida con este valor. Omitirlo te deja con el gris predeterminado.
Un buen favicon es aburrido de la mejor manera — los usuarios notan cuando falta o es incorrecto, nunca cuando es correcto. Obtén los seis archivos enviados y continúa.
¿Te gustó este artículo?
Artículos Relacionados
La pila creativa acaba de colapsar: Una semana de herramientas de IA, finales de abril de 2026
Entre el 27 de abril y el 4 de mayo de 2026, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen y Anthropic cruzaron el mismo umbral en ocho días. Aquí está lo que se lanzó, qué significa, y dónde deja a los navegadores creativos basados en web intentando consolidarlo todo.
Música y SFX de IA en 2026: Qué Realmente Funciona en el Audio de Juegos Indie
Hace tres años, el audio de juegos indie significaba o licenciar bibliotecas libres de regalías (barato, genérico, todos los juegos suenan igual) o contratar a un compositor (excelente, caro). En 2026, la IA genera música que se lanza al mercado. Aquí está qué herramientas funcionan — y dónde un compositor humano sigue ganando.
Generación de Mallas con IA en 2026: Lo Que Realmente se Envía en Pipelines de Juegos
Image-to-3D pasó de "demo inquietante" a "en uso en proyectos indie" en dieciocho meses. Esto es lo que Tripo, Meshy, Rodin e Hyper3D realmente hacen en producción — y dónde el artista 3D sigue ganando cada vez.