Color del tema e iconos de la aplicación

La etiqueta <meta name="theme-color" content="#1f2937"> establece el color de la barra de direcciones del navegador en dispositivos móviles y el color de la barra de título en las PWA de escritorio. Proporciona a la página un aspecto cuidado, similar al de una aplicación, sin cambiar ningún contenido.

Proporcione colores distintos para los modos claro y oscuro: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> y una segunda etiqueta con el color oscuro. Los navegadores eligen la que corresponde según la preferencia del sistema operativo del usuario.

El theme_color del manifest establece el color cuando la aplicación se ejecuta como una PWA instalada (la barra de título de una ventana independiente). Hágalo coincidir con la metaetiqueta theme-color de la página para mantener la coherencia: tanto en el navegador como en la aplicación instalada, la identidad visual será la misma.

<link rel="icon" href="/favicon.ico"> es el icono clásico de la pestaña del navegador. A pesar de su nombre, los navegadores modernos prefieren PNG o SVG en lugar de ICO. Proporcione un PNG de 32x32 mediante <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> para obtener una representación más nítida.

Los navegadores modernos aceptan favicons SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Se ven nítidos en cualquier tamaño y ocupan muy poco. Úselos para logotipos vectoriales y acompáñelos de una alternativa PNG para los navegadores que no admiten favicons SVG.

La pantalla de inicio de iOS utiliza apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Proporcione un PNG de 180x180. iOS no lee los iconos del manifiesto web al instalar en la pantalla de inicio; el enlace apple-touch-icon es obligatorio.

Las instalaciones en Android leen los iconos del array icons del manifest. Incluya archivos PNG de 192x192 (pantalla de inicio) y 512x512 (pantalla de inicio durante la carga y cajón de aplicaciones). Añada una copia con el propósito "maskable" para que Android pueda adaptar el icono a la forma del icono de la pantalla de inicio (círculo, squircle o cuadrado).

Los iconos maskable deben mantener su contenido principal dentro de una zona segura central del 80 %; el 20 % exterior puede recortarse según la forma de máscara del dispositivo. Use herramientas como maskable.app para previsualizar el icono con distintas formas de máscara durante el diseño.

Para un mosaico fijado en Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> y <meta name="msapplication-TileColor" content="#1f2937">. Ahora tienen menor prioridad que en otras plataformas, pero los usuarios de Windows que fijan sitios seguirán agradeciéndolos.

Para IE/Edge antiguos: <meta name="msapplication-config" content="/browserconfig.xml"> apunta a un archivo XML con iconos de mosaico de varios tamaños. Hoy es prácticamente irrelevante; los sitios nuevos pueden omitir browserconfig.xml sin consecuencias.

Pestaña fijada de Safari en macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. El SVG debe ser un icono de un solo color, ya que el atributo color reemplaza su color. Solo se utiliza en la función de pestañas fijadas de Safari para macOS.

Use realfavicongenerator.net para generar todas las variantes de iconos a partir de una única fuente. Pruebe en un dispositivo iOS real (añada el sitio a la pantalla de inicio) y en Android (instale la aplicación desde el menú del navegador) para verificar que los iconos se muestran correctamente recortados y sin pixelarse.

theme-color (con variantes de media queries) tiñe la barra de direcciones; theme_color del manifest tiñe la barra de título de la aplicación instalada. Los iconos incluyen favicons (SVG + PNG), apple-touch-icon (iOS, 180x180), iconos del manifest (Android, 192 + 512 + maskable), mask-icon de Safari (SVG de un solo color) y msapplication-TileImage (mosaicos fijados de Windows). Use realfavicongenerator.net para generar todas las variantes a partir de una única fuente.