Cómo crear un favicon para tu sitio web

“Haz un favicon” suena a un solo archivo, y en 1999 lo era: un favicon.ico de 16×16 en la raíz del sitio. En 2026 un favicon completo es un pequeño conjunto de archivos —un ICO para solicitudes heredadas y de respaldo de raíz, un PNG para las pantallas de inicio de iOS, dos PNG para el manifiesto de aplicación web, y opcionalmente un SVG que maneja cada tamaño y el modo oscuro a la vez. La buena noticia: el conjunto es pequeño, el marcado del head son cuatro líneas, y todo se deriva de una sola imagen fuente.

Qué tamaños importan realmente en 2026

Las páginas de consejos sobre favicon adoran las listas de 30 líneas con tamaños para navegadores que ya no existen. El conjunto que realmente cargan las plataformas actuales:

• 16×16 y 32×32, dentro de favicon.ico — pestañas del navegador, barra de marcadores, historial. 16px es lo que renderizan la mayoría de las pestañas; 32px cubre pantallas de alta densidad y anclajes en la barra de tareas de Windows. Empaquetar ambos en un ICO es la entrega convencional y más segura.
• PNG 180×180, apple-touch-icon — lo que usa iOS cuando alguien añade tu sitio a su pantalla de inicio, y lo que muestra Safari en favoritos y hojas para compartir. iOS ignora el ICO y el SVG aquí; esto debe ser un PNG.
• PNG 192×192 y 512×512, en el manifiesto — declarados en manifest.webmanifest, no en una etiqueta link. Android y Chrome de escritorio usan 192px para los iconos de pantalla de inicio y requieren 512px para la pantalla de instalación; ambos son la base para que un sitio cuente como instalable.

Eso es todo. Tamaños como 57, 76, 114 y 152 pertenecen a generaciones retiradas de iOS, que escalan bien el icono de 180px. Enviarlos añade peticiones, no compatibilidad.

ICO vs PNG: por qué ambos siguen existiendo

ICO es un formato contenedor: un solo archivo .ico contiene varias imágenes en distintos tamaños, y el navegador elige la mejor coincidencia. Eso, más la historia, es por qué sobrevive. Cuando una página no declara ningún icono, los navegadores solicitan /favicon.ico desde la raíz del sitio por iniciativa propia —el estándar WHATWG HTML documenta este respaldo— y muchos clientes que no son navegadores (lectores de feeds, desplegadores de enlaces, rastreadores) solicitan esa ruta exacta sin analizar nunca tu HTML. Un ICO a nivel de raíz es el único icono que funciona sin ningún marcado.

PNG gana en cualquier sitio donde se declare un tamaño explícito único: comprime mejor, cualquier herramienta lo exporta, y tanto el apple-touch-icon como los iconos del manifiesto lo requieren. Así que la respuesta a “¿ICO o PNG?” es: un ICO en la raíz, PNG para todo lo demás. (Para una mirada más amplia sobre cuándo PNG es el formato ráster correcto en general, consulta PNG vs JPG vs WebP.)

Favicons SVG: un archivo, casi todos los tamaños

Los navegadores basados en Chromium y Firefox aceptan <link rel="icon" href="/icon.svg" type="image/svg+xml">. Un favicon SVG es independiente de la resolución, normalmente más pequeño que un ICO multitamaño, y —de forma única— puede llevar un bloque <style> con una media query prefers-color-scheme, así que el icono cambia de color automáticamente frente a barras de pestañas oscuras. Ningún formato ráster puede hacer eso.

El inconveniente es Safari: su soporte de favicon SVG llegó tarde y es irregular, y iOS nunca usa SVG para los iconos táctiles. Así que el SVG es una mejora, no un reemplazo — decláralo primero y mantén el ICO como respaldo. Los navegadores que entienden SVG lo toman; el resto sigue con el respaldo. Si tu logo ya existe como SVG, también tienes la fuente ideal de favicon: renderízalo a PNG nítidos exactamente en los tamaños anteriores con un conversor de SVG a PNG en lugar de escalar una exportación ráster.

Cómo generar el conjunto a partir de una imagen

Empieza con una fuente cuadrada de 512×512 o más, o un SVG. Diseña pensando en lo pequeño: un favicon se juzga a 16 píxeles, donde los trazos finos, los degradados y los logotipos con texto se convierten en manchas. Silueta fuerte, alto contraste, detalle mínimo. Luego reduce la fuente a cada tamaño objetivo —180, 192, 512 como PNG, 16 y 32 empaquetados en el ICO. Cada tamaño debería remuestrearse a partir del original grande, no de otro tamaño pequeño, para que los bordes se mantengan nítidos; el mismo principio cubierto en redimensionar imágenes sin perder calidad.

Hacerlo a mano también funciona — cualquier editor de imagen decente exporta los PNG, e ImageMagick construye el ICO (magick icon-512.png -define icon:auto-resize=32,16 favicon.ico)— pero existe un generador precisamente porque cinco exportaciones y un formato contenedor son tediosos de hacer bien una vez, y más aún cada vez que cambia el logo.

El marcado mínimo del head que lo cubre todo

Cuatro declaraciones, más un archivo que no necesita ninguna:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

El archivo de manifiesto entonces enumera los PNG de 192 y 512 en su array icons. Si te saltas el SVG, elimina la primera línea; si te saltas el soporte PWA, elimina la última. El sizes="32x32" en la línea del ICO es una pista pragmática que evita que algunas versiones de Chromium prefieran el ICO sobre el SVG. Y sea cual sea el marcado, mantén favicon.ico físicamente en la raíz del sitio para todo lo que nunca lee tu HTML.

Modo oscuro

Las barras de pestañas del navegador vienen en claro y oscuro, y un logo casi negro desaparece en un tema oscuro. Dos estrategias: el truco de media query SVG anterior, que intercambia colores automáticamente en los navegadores que aceptan favicons SVG; o —cubriendo cada formato— diseñar de forma defensiva, dando al símbolo un contorno contrastante, una forma de fondo rellena, o una paleta de tono medio que se lea bien en ambos. La mayoría de los sitios grandes hacen lo segundo, porque el ICO y el PNG se servirán a muchos clientes de todas formas.

Errores comunes

• Ampliar una fuente de 16px. El fallo clásico: alguien encuentra un favicon.ico antiguo, lo amplía a 512px para el manifiesto, y envía un icono de instalación borroso. La generación solo funciona cuesta abajo —siempre desde el original más grande.
• Falta el apple-touch-icon. Sin él, iOS renderiza una miniatura de captura de pantalla de tu página como icono de pantalla de inicio. Es el archivo que más se olvida porque las pruebas de escritorio nunca lo revelan.
• Sin favicon.ico en la raíz. Las etiquetas link cubren los navegadores, pero las solicitudes silenciosas a /favicon.ico de bots y clientes más antiguos dan 404 — ruidoso en los registros y sin icono en los lectores de feeds.
• Iconos transparentes que asumen una barra de pestañas clara. Prueba el renderizado a 16px en un tema oscuro antes de publicar.
• Olvidar la invalidación de caché. Los navegadores cachean los favicons de forma agresiva. Tras un rediseño, cambia el nombre del archivo o añade una cadena de consulta, o te quedarás mirando el icono antiguo durante semanas.

Versión corta: una imagen fuente de 512px; genera 16/32 en un ICO en la raíz, un apple-touch-icon de 180px, y PNG de manifiesto de 192/512; opcionalmente lidera con un SVG para nitidez y modo oscuro; cuatro líneas de marcado en el head. Veinte minutos, una vez —y cada pestaña, marcador, pantalla de inicio y aviso de instalación muestra tu símbolo en lugar de un globo gris.