Glosario de favicons

Un favicon es el pequeño icono que el navegador muestra para tu sitio en pestañas, marcadores e historial. Qué es, los tamaños y formatos que necesitas y cómo añadir uno.

Un icono de aplicación representa una app instalada en una pantalla de inicio o un lanzador, no un sitio en una pestaña del navegador. De dónde lo lee cada plataforma y qué incluir.

Un favicon es el diminuto icono de la pestaña; una imagen de Open Graph es la vista previa grande cuando se comparte tu enlace. Archivos distintos para trabajos distintos: aquí está cuál es cuál.

Un logotipo es tu marca completa; un favicon es un diminuto derivado que tiene que leerse a 16 píxeles. Por qué no puedes limitarte a encoger el logotipo, y cómo derivar uno que funcione.

Hacer un favicon a mano significa exportar cada tamaño y escribir tú mismo las etiquetas; un generador hace ambas cosas en segundos. Cuándo está bien hacerlo a mano y cuándo no.

Guía completa de tamaños de favicon. Cada dimensión para navegadores, iOS, Android y PWA, cuáles son imprescindibles y dónde va cada archivo.

La etiqueta <link rel="icon"> le indica al navegador dónde está tu favicon. Qué hace cada uno de rel, href, type y sizes, dónde va la etiqueta y el conjunto moderno que merece la pena incluir.

"shortcut icon" es un valor rel heredado para favicons. Por qué la palabra "shortcut" es redundante, si todavía la necesitas y qué escribir en su lugar.

Los navegadores almacenan los favicons en caché con más fuerza y durante más tiempo que la mayoría de los recursos, y por separado de la página. Por qué son tan persistentes y cómo forzar el refresco.

Un favicon puede responder al ajuste claro u oscuro del SO: un SVG con una media query dentro, o dos PNG intercambiados mediante prefers-color-scheme en la etiqueta link.

Google muestra un favicon junto a tu resultado, principalmente en móvil. El tamaño y formato que necesita, cómo encuentra el icono y por qué el tuyo podría no aparecer.

Los navegadores y rastreadores solicitan /favicon.ico desde la raíz de tu dominio la enlaces o no. Por qué el archivo pertenece a la raíz, y cómo los frameworks cambian dónde lo pones.

BIMI muestra el logotipo de tu marca junto a los correos en las bandejas de entrada compatibles: el favicon del correo electrónico. Qué necesita: un logotipo SVG Tiny PS, cumplimiento de DMARC y a menudo un certificado.

Los favicons se renderizan en espacios cuadrados, así que una imagen no cuadrada se enmarca con bandas o se estira. Por qué el cuadrado es prácticamente obligatorio, y cómo manejar un logotipo ancho.

Los favicons son diminutos: un favicon.ico suele ser de unos pocos kilobytes y los tamaños PNG muy por debajo de 100KB. Qué determina el tamaño, y por qué un favicon sobredimensionado es una señal de alarma.

Favicon ICO vs PNG comparados: profundidad de color, transparencia, tamaño de archivo y compatibilidad con navegadores, más las etiquetas del head para incluir ambos sin conflictos.

Un favicon SVG es un único archivo vectorial que se mantiene nítido en todos los tamaños y puede reaccionar al modo oscuro. Compatibilidad, la etiqueta link y los respaldos que conservar.

favicon.ico es el icono que los navegadores solicitan desde la raíz de tu sitio cuando no se declara ningún icono. Qué hay dentro del archivo, dónde ponerlo y por qué conservarlo.

Puedes incrustar un favicon como un data URI en base64 en vez de un archivo aparte. Cuándo ahorra una solicitud, y las superficies donde falla en silencio.

Algunos navegadores animan un favicon GIF en la pestaña. Cuáles lo admiten, por qué los sitios usan JavaScript para el estado en vivo, y cuándo mantenerlo estático.

Los favicons WebP funcionan en la mayoría de los navegadores modernos pero no en todas partes, y nunca para /favicon.ico. Cuándo está bien un icono WebP y por qué PNG e ICO siguen siendo la opción segura.

Los favicons transparentes se ven limpios en una pestaña pero fallan en las pantallas de inicio de iOS, que componen sobre negro. Cuándo ayuda la transparencia y cuándo usar un fondo sólido.

Puedes usar un emoji como favicon con un SVG en línea de una sola línea: útil para un marcador de posición rápido. Por qué se renderiza de forma distinta según el SO, y cuándo exportar un archivo real.

Los iconos del manifiesto son las entradas del array icons de manifest.json. Qué hace cada campo, los tamaños a declarar y cómo elige uno el navegador.

Un icono maskable llena todo el cuadrado para que las plataformas puedan recortarlo a cualquier forma. La zona segura del 80%, el campo purpose del manifiesto y cómo probarlo.

El manifiesto de aplicación web es un archivo JSON que le indica a los navegadores cómo se comporta tu sitio al instalarse: su nombre, iconos, colores y modo de visualización. Qué contiene y por qué.

Una PWA necesita iconos específicos antes de que un navegador ofrezca instalarla: 192x192 y 512x512 en el manifiesto, idealmente uno maskable, más apple-touch-icon para iOS.

La propiedad display del manifiesto decide cómo se ve una PWA instalada: browser, minimal-ui, standalone o fullscreen. Qué muestra cada modo y cuál elegir.

Un manifiesto tiene dos colores que hacen trabajos distintos: theme_color tiñe la interfaz del SO alrededor de tu app, background_color pinta la pantalla de bienvenida. Más el meta theme-color.

El apple-touch-icon es el PNG que iOS usa cuando se añade un sitio a la pantalla de inicio. El tamaño 180x180, la etiqueta link y por qué la transparencia se vuelve negra.

La etiqueta meta theme-color le indica a los navegadores qué color pintar en la interfaz alrededor de tu página. Dónde aparece, variantes de modo oscuro y el equivalente en el manifiesto.

Las pestañas ancladas de Safari usan un SVG monocromo declarado con rel="mask-icon". Qué aspecto debe tener el archivo, el atributo color y si todavía importa.

La variante precomposed le decía al iOS antiguo que no añadiera su brillo satinado a un icono de la pantalla de inicio. Si todavía hace algo, y qué usar hoy.

browserconfig.xml y las etiquetas meta msapplication-* definían los mosaicos de sitios anclados para Windows y el Edge heredado. Qué hacían y si todavía los necesitas.

La etiqueta meta apple-mobile-web-app-capable ejecuta a pantalla completa una web app de la pantalla de inicio en iOS. Qué hace, la etiqueta de la barra de estado y la alternativa moderna del manifiesto.

apple-touch-startup-image establece la pantalla de lanzamiento de una web app añadida a la pantalla de inicio de iOS. Por qué necesita una imagen por tamaño de dispositivo y las media queries implicadas.