IMAGE

Generador de Favicon: Guía Completa de Archivos .ICO (2026)

Todo lo que necesitas para tener un favicon perfecto en 2026: .ico vs PNG, Apple Touch Icon, manifest Android, modo oscuro, el HTML exacto. Generador gratis incluido.

DuneTools · · 13 min de lectura

Puedes enviar un favicon en 30 segundos, o puedes enviar uno que se vea nítido en cada dispositivo, navegador, escritorio y tamaño de pantalla de inicio que los humanos realmente usan. Esta guía es sobre la segunda opción, y no necesitas un diseñador ni 12 herramientas separadas para hacerlo.

Al final sabrás exactamente qué archivos generar, qué etiquetas <link> pegar en tu HTML, y por qué cualquier otro post de “best practices favicon” en internet está unos tres años desactualizado.

La versión de 30 segundos

Si tienes prisa: abre el Generador de Favicon de DuneTools, sube un PNG 512×512 de tu logo, descarga el ZIP, pega las cuatro líneas de HTML que te da en tu <head>. Listo.

Si quieres entender por qué esas cuatro líneas, qué hace cada archivo, y qué hacer cuando algo se ve mal, sigue leyendo.

Qué es realmente un favicon

Originalmente, en 1999, un favicon era un icono de 16×16 píxeles mostrado junto a la URL en la barra de direcciones de Internet Explorer. El formato era el contenedor .ico de Microsoft. Eso era todo. Un archivo, un tamaño, un propósito.

Veinticinco años después, “favicon” es un término paraguas para todo icono pequeño que representa tu sitio fuera de la página:

  • El icono en pestañas del navegador (16, 32 o 48 píxeles según el navegador y la densidad).
  • El icono de marcador cuando alguien guarda tu URL.
  • El icono que Safari usa cuando haces “Añadir a Pantalla de Inicio” en iPhone o iPad.
  • El icono que Android Chrome usa cuando un usuario instala tu sitio como Progressive Web App.
  • El tile de Windows si lo anclan al menú Inicio.
  • El icono que el Explorador de Archivos usa al guardar un acceso directo .url.
  • La variante de modo oscuro si tu icono claro desapareciera sobre tema oscuro.

Como mínimo 4 archivos de imagen distintos en 2026, e idealmente 6.

El kit mínimo viable de favicon (edición 2026)

Aquí la lista exacta de archivos que necesitas. Más es sobreingeniería; menos deja a los usuarios con iconos rotos o borrosos en algún sitio.

ArchivoTamañoFormatoPara qué
favicon.icomulti-tamaño: 16, 32, 48Contenedor ICONavegadores legacy, escritorio Windows, Explorador
icon.svgescalableSVGNavegadores modernos (nítido en cualquier zoom)
apple-touch-icon.png180×180PNGiPhone/iPad Añadir a Inicio
icon-192.png192×192PNGAndroid Chrome, PWA
icon-512.png512×512PNGSplash screens, app stores
icon-dark.svg (opcional)escalableSVGNavegadores en modo oscuro

Son seis archivos. El generador de favicon en DuneTools produce todos a partir de un único origen 512×512, localmente en tu navegador, sin subir nada, y te da el HTML exacto para pegar.

.ICO vs PNG: ¿cuál gana?

Esta es la pregunta que descarrila la mayoría de artículos sobre favicon. Respuesta corta: ninguno, envías ambos.

.ICO es un formato contenedor de Microsoft que permite agrupar múltiples imágenes codificadas como PNG-o-BMP de distintos tamaños en un solo archivo. Cuando Windows renderiza tu acceso directo en el escritorio a 48×48, saca la capa 48×48. Cuando renderiza en la barra de tareas a 16×16, saca esa. Sin artefactos de escalado. Los navegadores caen al .ico cuando ningún otro icono está declarado. Es la red de seguridad universal.

PNG tiene mejor compresión para iconos tipo foto, transparencia, y es lo que los navegadores modernos prefieren para pestañas. Pero un único PNG a 32×32 no cubre bien el caso 16×16 (el navegador lo escala hacia abajo y los detalles se enturbian en líneas finas). Necesitarías archivos separados por tamaño.

SVG es el futuro: escala infinitamente, perfectamente nítido a cualquier densidad, y soporta currentColor y prefers-color-scheme. Pero Safari sólo añadió soporte en 2023 y no todos los crawlers / lectores RSS / Slack / Discord lo entienden todavía.

El stack pragmático en 2026:

<!-- ICO para legacy + escritorio Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- SVG para navegadores modernos (nítido en cualquier zoom) -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">

<!-- Dispositivos Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA / Android via manifest.json -->
<link rel="manifest" href="/manifest.json">

Cuatro líneas. Los navegadores recorren la lista y eligen el formato que mejor entienden. Sin lógica condicional.

Qué hay dentro de un archivo .ico

Concepto erróneo común: la gente abre Photoshop, guarda un PNG 32×32, lo renombra a .ico, y considera el trabajo hecho. Técnicamente funciona en navegadores modernos (leen el PNG dentro pese a la extensión incorrecta) pero rompe en escritorio Windows y en IE antiguo.

Un archivo .ico real es un contenedor con una cabecera seguida de 1 a N entradas de imagen. Cada entrada puede ser:

  • Una imagen codificada en BMP (formato original de los 90)
  • Una imagen codificada en PNG (permitido desde Vista)

Un .ico multi-tamaño típico contiene imágenes de 16×16, 32×32 y 48×48. Algunos kits incluyen 64×64 para anclajes Windows en alta densidad. Más grande de 48 es excesivo, para eso están apple-touch-icon y el manifest.

DuneTools genera un contenedor ICO multi-tamaño real con una cabecera correcta. Muchas herramientas online gratuitas sólo renombran un PNG, lo que rompe silenciosamente en Windows. Puedes verificarlo ejecutando file favicon.ico en macOS/Linux, un ICO real reporta MS Windows icon resource - N icons.

Apple Touch Icon: la regla del 180×180

Cuando alguien pulsa “Añadir a Pantalla de Inicio” en iOS o iPadOS, Safari busca <link rel="apple-touch-icon">. Si no envías uno, iOS usa una captura de pantalla de tu página. Esa captura es casi siempre fea: incluye chrome de UI, scrollbars y texto desalineado. No dejes que pase.

El tamaño canónico es 180×180 PNG. Apple ha soportado históricamente muchos tamaños (57, 60, 72, 76, 114, 120, 144, 152, 167, 180), pero iOS moderno los unifica todos a 180×180 y reduce según necesite. Enviar los 8 tamaños históricos añade cero beneficio y 7× los bytes.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Los Apple Touch Icons no deben tener transparencia en las esquinas. iOS los redondea automáticamente con una máscara. Si envías un PNG transparente con un logo sobre fondo limpio, iOS añade un fondo blanco y el resultado se ve horrible. Hornea el color de fondo directamente en el PNG.

El Web App Manifest: Android + PWA

Android Chrome no usa Apple Touch Icon. Mira a manifest.json para el icono en:

  • Pantalla de inicio cuando se pulsa “Añadir a Pantalla de Inicio”
  • Cajón de apps cuando se instala como PWA
  • Cambiador de pestañas y apps recientes
  • Splash screen al lanzarse

Un manifest mínimo:

{
  "name": "Nombre de tu Sitio",
  "short_name": "Sitio",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

La parte "purpose": "any maskable" es crítica. Android aplica una “máscara” a tu icono (círculo, squircle, cuadrado, según el lanzador). Si el contenido importante de tu icono se extiende a los bordes, la máscara lo corta. Iconos maskable reservan una zona segura del 20% en el centro, mantén tu logo dentro del 80% interior del lienzo.

El generador de DuneTools produce PNGs maskable-aware por defecto si subes un logo con padding adecuado.

Favicons en modo oscuro: el toque profesional

La mayoría de favicons se diseñan una vez sobre fondo blanco. Cuando el tema del navegador del usuario es oscuro, un logo oscuro-sobre-claro se vuelve un manchón oscuro sobre oscuro, invisible.

La solución está soportada desde Safari 16.4 y Chrome 95:

<link rel="icon" type="image/svg+xml" href="/icon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/icon-dark.svg" media="(prefers-color-scheme: dark)">

O, si usas un único SVG y quieres que el icono responda automáticamente:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="..."/>
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
</svg>

Es uno de esos pequeños detalles que separan un sitio pulido de uno improvisado. Los usuarios lo notan, aunque sea inconscientemente.

Instalando el favicon en tu sitio

Una vez que has generado el kit (el generador DuneTools produce un ZIP con los seis archivos), la instalación es:

  1. Descomprime el kit en la raíz de tu sitio. Los archivos deben vivir en /favicon.ico, /apple-touch-icon.png, /icon-192.png, /icon-512.png, /icon.svg, /manifest.json. No los entierres en /assets/; algunos crawlers legacy sólo miran la raíz.

  2. Añade estas cuatro líneas a tu <head> (el generador te da este snippet exacto):

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

  1. Hard-refresh tu navegador (Cmd+Shift+R / Ctrl+Shift+R). Los navegadores cachean favicons agresivamente, a veces durante semanas. Incluso un hard refresh a veces no es suficiente; limpiar la caché de favicon vía la pestaña Application de DevTools es la opción nuclear.

  2. Verifica en dispositivos reales. Abre tu sitio en:

    • Chrome escritorio, mira la pestaña.
    • Firefox escritorio, mira el icono de marcador al pulsar la estrella.
    • iPhone Safari, pulsa Compartir → Añadir a Pantalla de Inicio.
    • Android Chrome, pulsa Menú → Instalar app.

Errores comunes

Error 1: Guardar un PNG 32×32 como .ico. Funciona en navegadores pero rompe en escritorio Windows. Usa un encoder ICO real (DuneTools lo hace; muchos generadores no).

Error 2: Apple Touch Icon con transparencia. iOS añade blanco. Hornea tu fondo.

Error 3: Usar JPEG. JPEG comprime las líneas finas y bordes en una papilla a tamaños de favicon. Siempre PNG o SVG.

Error 4: Olvidar el manifest. Los usuarios Android que instalen tu PWA obtienen un icono por defecto que dice “W” o similar. Envía siempre el manifest.

Error 5: Enviar 14 tamaños. Apple unificó todo a 180×180 hace años. No necesitas 57×57 en 2026. Enviar 14 tamaños históricos añade bytes y cero beneficio.

Error 6: Enlazar a URLs absolutas. <link rel="icon" href="https://tusitio.com/favicon.ico"> funciona pero ata tu hosting a ese dominio. Usa rutas relativas a la raíz (/favicon.ico).

Privacidad: por qué generar favicons localmente

La mayoría de generadores de favicon online suben tu logo a sus servidores. Para un logo público, da igual. Para una startup pre-launch, un producto sin lanzar, o trabajo confidencial de cliente, eso es una fuga.

El generador DuneTools corre enteramente en tu navegador via WebAssembly. La imagen nunca sale de tu dispositivo, no se guardan copias en ningún servidor, y cerrar la pestaña limpia todos los datos de memoria. Es el mismo flujo que cualquier otra herramienta DuneTools, sólo aplicado al caso favicon.

Cuándo actualizar tu favicon

  • Has hecho rebrand. Obvio, pero ten en cuenta: los navegadores cachean favicons hasta 30 días. Para forzar a los usuarios a ver el nuevo, cambia la ruta del archivo (ej. favicon-v2.ico), no sólo el contenido.
  • Has añadido modo oscuro. Un favicon que funcionaba cuando tu sitio era sólo blanco se perderá cuando la mitad de tus visitantes vean en modo oscuro.
  • Has lanzado una PWA. Necesitarás iconos maskable de manifest específicamente; los sitios no-PWA no.
  • Te has dado cuenta de que tu icono es borroso a 16×16. Genera un kit fresco desde un origen 512×512 limpio, muchos problemas de borrosidad son artefactos de escalado desde originales muy pequeños.

Resumen

Un favicon completo en 2026 son seis archivos: un .ico multi-tamaño, un SVG, un Apple Touch Icon a 180×180, dos PNGs (192 + 512) para el manifest, y opcionalmente una variante oscura. Cuatro líneas de HTML en tu <head>. Alojados en la raíz de tu dominio.

El asunto entero toma 5 minutos si tienes un logo origen 512×512 y una herramienta que genera el kit correctamente. DuneTools lo hace gratis, en tu navegador, sin subir nada, y te da el HTML exacto para pegar.

Si te saltas el favicon, tu sitio se ve sin acabar. Si lo haces a chapuza, se ve borroso en pantallas retina y vergonzoso en pantallas de inicio de iPhone. Hacerlo bien en 2026 es rápido, gratis, y una de las victorias de “pulido” más visibles para una web.