Diseño de favicon: iconos diminutos que siguen pareciéndose a ti

Un favicon es el pequeño icono cuadrado que representa tu web en las pestañas del navegador, los marcadores, el historial, las pantallas de inicio del móvil y los resultados de Google. A menudo se muestra a solo 16 o 32 píxeles, así que un buen diseño de favicon es implacable: una sola forma o letra contundente, mucho contraste, nada de detalle fino. Técnicamente solo necesitas unos pocos archivos, un ICO de 32×32, un SVG, un Apple touch icon de 180×180 y dos PNG para el manifiesto, más unas líneas de HTML.

Tamaños de favicon y archivos que de verdad necesitas

Las guías antiguas enumeran veinte tamaños. Los navegadores modernos redimensionan bien, así que un conjunto corto cubre todos los sitios donde aparece un favicon. Esto sigue el enfoque recomendado en web.dev para los manifiestos y el comportamiento actual de los navegadores para el resto.

Google Search también muestra favicons junto a los resultados. Sus directrices sobre favicons piden un icono cuadrado, recomiendan uno de más de 48×48 píxeles y dicen que debe representar tu marca. Los PNG de 192 y 512 cumplen; revisa esa página antes del lanzamiento, porque Google la actualiza.

Cómo añadir un favicon a tu web

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

{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Cómo diseñar un favicon legible a 16 píxeles

A 16 píxeles tienes 256 puntos. Un logotipo completo se convierte en una mancha gris, los trazos finos desaparecen y dos colores parecidos se funden. Los favicons que la gente reconoce al instante casi siempre son una de estas tres cosas: una sola letra, un símbolo sencillo o una forma sólida en un color distintivo.

Color y degradados en un icono diminuto

A este tamaño, el color trabaja más que la forma, porque es lo que la gente busca a lo largo de una fila de pestañas. Un color de marca reconocible gana a un símbolo ingenioso. Los degradados pueden funcionar si son contundentes y cortos: dos paradas con una diferencia clara de luminosidad se leen como una superficie iluminada, mientras que una mezcla sutil de muchas paradas parece turbia a 16 píxeles.

Si tu marca ya tiene un fondo característico, un recorte de él puede dar un favicon distintivo. Los Marks de Gradiently son útiles aquí: el mismo estilo que va detrás de tus publicaciones puede ir detrás de una sola letra a 512×512, para que la pestaña y el feed se sientan como una sola marca. Asegúrate de que la letra mantiene un contraste fuerte con el fondo, como se explica en logo sobre fondo degradado.

Favicons para modo oscuro con SVG

Un icono negro desaparece en una barra de pestañas oscura, y uno blanco en una clara. Como un favicon SVG es un pequeño documento, puede llevar su propia media query y cambiar de colores con el tema del navegador.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>

Un fondo sólido detrás del símbolo es el seguro más sencillo: se lee sobre cualquier fondo, claro u oscuro, sin depender de la media query. SVG vs PNG explica por qué el archivo vectorial es el que hay que conservar.

Lista rápida para tu favicon

1. 1

   Parte de lo más simple de tu logo

   Un monograma, la primera letra o solo el símbolo. Variantes de logo explica cómo crear a propósito una versión pequeña.

2. 2

   Dibújalo primero a 32×32

   Diseña sobre la cuadrícula pequeña y escala hacia arriba, no al revés. Trazos gruesos, espacios generosos.

3. 3

   Exporta los cinco archivos

   ICO a 32×32, SVG, Apple touch icon de 180×180 y PNG de 192 y 512 para el manifiesto.

4. 4

   Pruébalo en pestañas reales

   Abre tu web junto a otras diez, en temas claro y oscuro. Si no encuentras tu pestaña en un segundo, simplifica.

El favicon está junto a tu imagen Open Graph y tus fotos de perfil en redes como las pequeñas señales constantes de una marca. Mantenlas coherentes, y consulta tamaños de logo para el kit completo.