Mejores tamaños de favicon para sitios web

Un favicon está escalado a muchos píxeles físicos: 16×16 en una pestaña, 32×32 en una barra de marcadores Retina, 180×180 en la pantalla de inicio de un iPhone, 512×512 en una pantalla de presentación PWA. Una imagen no puede servirles a todos. Utilice nuestro [generador favicon](herramienta:generador favicon), [convertidor PNG a ICO](herramienta:png-to-ico), [convertidor SVG a ICO](herramienta:svg-to-ico) y [probador favicon en vivo](utilidad:favicon-tester) para crear y verificar su conjunto de iconos, y lea el [complementario guía](guía:favicon-tamaños-explicados) para ver un tutorial condensado.

Ampliar una fuente pequeña produce desenfoque. Al reducir la escala a un formato detallado de 1024 × 1024 sin realizar pruebas, se pierden las líneas finas. La solución es un pequeño conjunto de exportaciones especialmente diseñadas, o un .ico de varios tamaños que incorpora los marcos de escritorio comunes.

Publicar todos los tamaños enumerados en publicaciones de blogs antiguas es un desperdicio. Publicar muy pocos productos deja un espacio visible en una plataforma. La siguiente matriz refleja las solicitudes reales medidas en 2026 navegadores.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Las pestañas del escritorio generalmente muestran un ícono de píxeles CSS de 16 × 16, que se asigna a píxeles del dispositivo de 16 × 16 o 32 × 32, según la densidad de visualización.

Las barras de marcadores y las pestañas fijadas suelen utilizar 32×32 o 48×48. Chromium puede seleccionar automáticamente el marco incrustado más cercano de favicon.ico.

Los tres tamaños de pestañas comunes (16, 32, 48) caben cómodamente dentro de un único .ico de varios tamaños. Es por eso que el contenedor .ico sigue siendo el formato de entrega de escritorio más eficiente.

Windows El menú Inicio, los pines de la barra de tareas y los accesos directos del Explorador de archivos pueden solicitar 24×24, 32×32, 48×48, 64×64, 128×128 o 256×256 según el contexto y la escala de visualización.

Microsoft documenta 16, 24, 32, 48, 64, 128 y 256 como conjunto práctico para aplicaciones Windows. Los Web favicon se benefician de agrupar al menos 16 a 256 en favicon.ico.

macOS prefiere .icns para aplicaciones nativas, pero felizmente consume .ico y PNG para accesos directos web. iOS ignora .ico para los íconos de la pantalla de inicio y quiere un PNG dedicado de 180 × 180 a través del ícono táctil de Apple.

Los manifiestos de aplicaciones web requieren íconos con cualquier propósito y, opcionalmente, enmascarables. Los tamaños comunes son 192×192 y 512×512 PNG.

Android Chrome usa íconos de manifiesto para la interfaz de usuario de instalación y las pantallas de presentación. Una fuente de 512 × 512 se reduce limpiamente; un manifiesto de solo 192 × 192 parece suave en teléfonos de alta gama.

iOS no lee los íconos de manifiesto para su ubicación en la pantalla de inicio. Debes declarar <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — pestañas del navegador (densidad 1×). 32×32: pestañas y marcadores en pantallas Retina. 48 × 48: algunos contextos de interfaz de usuario Windows y usos de marcadores heredados.

64 × 64 y 128 × 128: atajos Windows a mayor escala. 256 × 256: mosaicos fijados Windows y vistas previas de alto DPI.

180 × 180: icono táctil de Apple (iOS / iPadOS). 192 × 192 y 512 × 512: iconos de manifiesto PWA para Android e indicaciones de instalación.

Blog personal: favicon.ico con fecha 32/16/48 únicamente. Aceptable si no le importa el pulido de la pantalla de inicio iOS.

Sitio de marketing de la empresa: paquete .ico más icono táctil de Apple de 180 × 180 más PNG <enlace> de 32 × 32 para pestañas Retina explícitas.

PWA instalable: .ico completo, ícono táctil de Apple, manifiesto 192 + 512, SVG opcional para interfaz de usuario cromada escalable.

Aplicación de escritorio electrónica: Windows .ico con 16–256; macOS .icns por separado si distribuye fuera del navegador.

favicon.ico de varios tamaños (16, 32, 48, 64, 128, 256) en /favicon.ico.

apple-touch-icon.png a 180×180 para pantallas de inicio iOS.

Un PNG de 512×512 en site.webmanifest para superficies de instalación Android.

Ese trío cubre aproximadamente el 95% de las solicitudes de íconos del mundo real. Agregue SVG cuando desee una escala infinita y un estilo en modo oscuro en pestañas modernas.

¿Necesito un PNG de 16×16 si está dentro del .ico? No, a menos que desee un <link rel="icon" sizes="16x16"> explícito para la depuración.

¿Aún se requiere 120 × 120? Ese era un viejo tamaño iOS. El Safari moderno espera 180×180.

¿Qué pasa con los favicon de 64 × 64? Útil dentro de .ico para Windows; rara vez se necesita como PNG independiente.

¿Puedo saltarme 256×256? Solo si nunca te importan las vistas previas de accesos directos de alto DPI de Windows. La mayoría de los equipos lo incluyen.

El icono iOS tiene esquinas redondeadas y parece recortado: eso es el enmascaramiento iOS: diseño con relleno seguro, no un error en su archivo.

La instalación PWA muestra un ícono genérico: faltan íconos de manifiesto o están por debajo del mínimo de 192 × 192. Valide JSON con Chrome DevTools → Aplicación.

Icono de pestaña suave en Retina Mac: asegúrese de que favicon.ico contenga un marco de 32 × 32, no solo de 16 × 16.

Descarga enorme de .ico: incrustó 256 × 256 BMP sin comprimir. Reconstruir con compresión PNG dentro del contenedor.

Los píxeles CSS no son píxeles físicos. Una ranura para pestañas de 16×16 en una pantalla de 2× a menudo carga un mapa de bits de 32×32 para mayor nitidez.

Es por eso que un favicon.ico que contiene 16 y 32 fotogramas supera a un único PNG de 16×16 en MacBooks Retina y portátiles Windows de alto DPI.

Los Android PWA muestran iconos de manifiesto en las pantallas de presentación con la resolución completa del dispositivo: una fuente de 192 × 192 ampliada a un teléfono de 1440p parece suave; 512×512 reduce la escala limpiamente.

iOS aplica su propia máscara y radio de esquina a los recursos de íconos táctiles de Apple. Diseño con acolchado seguro para que la ardilla no corte los bordes importantes.

Al realizar la prueba, haga una captura de pantalla de la pestaña con el zoom del navegador al 100 % y la escala del sistema operativo al 200 %. Si ambos se ven nítidos, su matriz de tallas probablemente sea correcta.

Descargue favicon.ico y ábralo en una herramienta que enumere los marcos incrustados. Confirme que existen 16, 32, 48 y al menos un marco de tamaño alto.

Obtenga apple-touch-icon.png y verifique las dimensiones en cualquier inspector de imágenes; espere 180 × 180, no 120 × 120 de plantillas obsoletas.

Abra site.webmanifest y verifique que los íconos [] incluyan 192 × 192 y 512 × 512 con rutas correctas y tipos de imagen/png.

Cargue su sitio en Chrome DevTools → Aplicación → Manifiesto. Las entradas faltantes o no válidas muestran advertencias antes de que los usuarios vean un cuadro de diálogo de instalación roto.

Mantenga una hoja de cálculo que asigne cada archivo a su consumidor (pestaña, iOS, PWA, Windows). En el futuro, no tendrá que realizar ingeniería inversa en la carpeta de activos durante un cambio de marca.

Nuevas clases de dispositivos aparecen lentamente en el país favicon. Los íconos de manifiesto de 512 × 512 hoy en día cubren mejores interfaces de usuario de instalación plegables y de tabletas que 192 por sí solas.

Evite tamaños exóticos (96×96, 120×120) a menos que un documento de plataforma específico todavía los exija: agregan una carga de creación sin un beneficio amplio.

Guarde el vector maestro o el ráster de 1024 × 1024 en su repositorio de diseño incluso si nunca lo publica. Las plataformas futuras pueden solicitar íconos de manifiesto más grandes.

Automatice la regeneración desde el maestro para que, cuando aparezca un nuevo tamaño recomendado, vuelva a ejecutar un script en lugar de exportarlo manualmente en Photoshop.