Tamaños de Favicon: Cuáles realmente necesitas en 2025

Si buscas "tamaño de favicon" te encontrarás con un montón de números conflictivos: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. La mayoría de esas listas fueron escritas hace una década y nunca se actualizaron. En la práctica, un sitio moderno necesita aproximadamente cuatro archivos, y puedes hacerlos todos de una sola vez con el generador de favicon — se ejecuta completamente en tu navegador, así que tu logo nunca sale de tu máquina.

Aquí está para qué sirve cada tamaño, y qué puedes omitir con seguridad.

Los tamaños que todavía importan

16x16 y 32x32 — pestañas del navegador y marcadores

Este es el favicon clásico. 16x16 es lo que ves en una barra de pestañas llena; 32x32 se usa en pantallas de alta resolución (DPI), la barra de marcadores y algunas interfaces de la barra de direcciones. Ambos se agrupan tradicionalmente en un único archivo favicon.ico, que puede contener múltiples resoluciones a la vez. Windows también extrae 48x48 del mismo .ico para accesos directos de escritorio, así que incluirlo cuesta casi nada.

180x180 — Ícono táctil de Apple

Cuando alguien toca "Añadir a la pantalla de inicio" en un iPhone o iPad, Safari busca apple-touch-icon.png en 180x180. Si no está ahí, iOS toma una captura de pantalla de tu página y la usa en su lugar, lo que se ve terrible. Este único PNG cubre todos los dispositivos iOS actuales porque el sistema reduce la escala según sea necesario.

192x192 y 512x512 — Android y PWAs

Android Chrome y las aplicaciones web instalables leen los iconos de tu site.webmanifest. 192 es el ícono de la pantalla de inicio; 512 se usa para la pantalla de inicio de la aplicación y listados de aplicaciones. Si alguna vez quieres que tu sitio sea instalable, necesitas ambos.

SVG — opcional pero recomendado

Firefox y Chrome ambos soportan un favicon SVG, que se ve nítido en cualquier tamaño y puede responder al modo oscuro con una consulta de medios dentro del archivo. Es un plus, no un reemplazo — Safari y navegadores más antiguos todavía quieren las versiones rasterizadas.

Lo que puedes omitir

64x64, 96x96, 128x128, todo el conjunto de imágenes de tiles de Windows, y la docena de archivos heredados de estilo apple-touch-icon-76x76. Fueron necesarios para dispositivos que ya casi no existen. Enviar veinte archivos de iconos hincha tu repositorio y no ganas nada medible.

El HTML

Coloca los archivos en la raíz de tu sitio y agrega esto a <head>:

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

Y en el manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Diseñando para 16 píxeles

La parte difícil no es la exportación, es que un logo completo se vuelve irreconocible en 16x16. Algunas cosas que ayudan:

• Usa un fragmento, no el logo completo. Una letra, un glifo, una forma. Los wordmarks son ilegibles en tamaño de pestaña.
• Comienza con un cuadrado. Si tu fuente es un logo ancho, recórtalo a un cuadrado primero para que el generador no lo enmarque con espacio vacío.
• Mantén el contraste alto. Los contornos finos desaparecen. Las formas sólidas sobreviven.
• Decide sobre el fondo. Un PNG transparente se adapta a la interfaz clara u oscura del navegador; si tu marca es oscura, considera darle un fondo de color sólido en su lugar. Puedes eliminar el fondo de una captura de pantalla de logo en segundos si solo tienes un JPG plano.
• Ten cuidado con el área segura. Android enmascara los iconos en círculos y squircles, así que deja aproximadamente un 10% de relleno alrededor del borde de tu obra de 512.

Si estás haciendo coincidir el fondo del favicon con el color de marca de tu sitio, el selector de color de imagen extraerá el hexadecimal exacto de una captura de pantalla existente — también útil para la etiqueta meta theme-color.

Genera todo el conjunto de una vez

No subas nada: suelta un PNG cuadrado o SVG en el generador de favicon gratuito basado en navegador y genera el .ico, el ícono táctil de Apple, y los PNG 192/512 localmente, en tu propia pestaña. Nada se envía a un servidor, no hay registro requerido, y ninguna copia de tu logo sin lanzar termina almacenada en el depósito de almacenamiento de otra persona.

Luego aleja tu navegador, mira la pestaña, y hazle la única pregunta que importa: ¿puedes saber qué es?