# Diseño de favicon: iconos diminutos que siguen pareciéndose a ti
[Canonical HTML page](https://gradiently.design/es/guide/favicon-design)
Tu favicon es la pieza de tu marca que más se repite y la más pequeña. Tiene que aguantar a 16 píxeles, en pestañas claras y oscuras, junto a otras cincuenta webs. Así se consigue que resista.
## The short version
- Un favicon es el icono pequeño que representa una web en las pestañas del navegador, los marcadores, el historial, las pantallas de inicio y los resultados de búsqueda.
- Un conjunto mínimo moderno es un favicon.ico de 32×32, un icono SVG, un Apple touch icon de 180×180 y PNG de 192×192 y 512×512 en un manifiesto de aplicación web.
- Google Search muestra el favicon de una web junto a los resultados y pide un icono cuadrado, idealmente de más de 48×48 píxeles.
- Los favicons funcionan mejor como una sola forma o letra contundente con mucho contraste, porque el detalle desaparece a 16 píxeles.
- Un favicon SVG puede cambiar de colores en modo oscuro con una media query dentro del propio archivo.
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](https://web.dev/articles/add-manifest) para los manifiestos y el comportamiento actual de los navegadores para el resto.
| Archivo | Tamaño | Lo usan |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Navegadores antiguos y cualquier cosa que pida `/favicon.ico` directamente |
| `icon.svg` | Escalable | Navegadores actuales compatibles con favicons SVG; puede adaptarse al modo oscuro |
| `apple-touch-icon.png` | 180×180 | Pantallas de inicio de iPhone y iPad y marcadores de Safari |
| `icon-192.png` | 192×192 | Pantalla de inicio de Android, a través del manifiesto |
| `icon-512.png` | 512×512 | Pantallas de bienvenida e instalación de apps en Android, a través del manifiesto |
Cinco archivos. Ponlos en la raíz de tu web, o en cualquier otro sitio, siempre que el HTML apunte a ellos.
Google Search también muestra favicons junto a los resultados. Sus [directrices sobre favicons](https://support.google.com/webmasters/answer/9290858) 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
```html
```
Va en el `head` de cada página. Los navegadores que entienden SVG lo prefieren; los demás recurren al ICO.
```json
{
"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" }
]
}
```
Un `manifest.webmanifest` mínimo. El icono maskable es opcional y permite que Android lo recorte con sus propias formas.
> **Los iconos maskable necesitan margen** Android puede recortar un icono maskable en círculo, squircle o cuadrado redondeado. Mantén lo importante dentro del círculo central, aproximadamente el 80% del ancho, y rellena el resto con el color de fondo.
## 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.
Un icono de app cuadrado con una sola letra N en negrita sobre un fondo degradado
Una letra gruesa sobre un fondo potente. Se sigue leyendo cuando el navegador la reduce a 16 píxeles.
Un icono cuadrado con el nombre de un estudio de tres palabras, demasiado detallado para funcionar como favicon
El nombre completo se ve bien a 512 píxeles y se convierte en una textura ilegible a 16. Resérvalo para la propia página.
### Evita
- El logo completo con su logotipo
- Trazos finísimos y contraformas pequeñas
- Dos colores cercanos que se confunden
- Detalle que llega hasta los bordes
- Un icono transparente que desaparece en pestañas oscuras
### Haz
- Una letra, monograma o símbolo
- Trazos de al menos 2 píxeles de grosor a 32×32
- Mucho contraste entre forma y fondo
- Llena casi todo el cuadrado, con un poco de margen
- Prueba en temas claros y oscuros del navegador
## 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.
- Índigo a rosa: se lee: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Verde azulado a lima: se lee: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Grises pálidos: desaparece: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`
Los fondos de un favicon necesitan un cambio claro de luminosidad y un tono decidido. El último desaparece contra una barra de pestañas clara.
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](https://gradiently.design/es/guide/logo-on-gradient-background).
## 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.
```html
```
Guárdalo como `icon.svg`. Un cuadrado redondeado con una letra N que invierte sus colores en modo oscuro.
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](https://gradiently.design/es/guide/svg-vs-png) explica por qué el archivo vectorial es el que hay que conservar.
## Lista rápida para tu favicon
1. **Parte de lo más simple de tu logo** Un monograma, la primera letra o solo el símbolo. [Variantes de logo](https://gradiently.design/es/guide/logo-variations) explica cómo crear a propósito una versión pequeña.
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. **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. **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](https://gradiently.design/es/guide/open-graph-image-size) 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](https://gradiently.design/es/guide/logo-sizes) para el kit completo.
## FAQ
### ¿Qué tamaño debe tener un favicon?
Prepara un favicon.ico de 32×32, un SVG, un Apple touch icon de 180×180 y PNG de 192×192 y 512×512 en un manifiesto. Los navegadores eligen y redimensionan a partir de ellos.
### ¿Cómo añado un favicon a mi web?
Sube los archivos del icono y añade etiquetas `link rel="icon"` y `link rel="apple-touch-icon"` al `head` de cada página, además de un enlace al manifiesto para Android.
### ¿Por qué no se ve mi favicon en Google?
Google necesita un favicon cuadrado, idealmente de más de 48×48 píxeles, enlazado desde tu página de inicio y rastreable. Puede tardar un tiempo en actualizarse después de cambiarlo.
### ¿Un favicon puede ser un SVG?
Sí, los navegadores actuales compatibles con favicons SVG lo usarán y se verá nítido a cualquier tamaño. Conserva un favicon.ico como alternativa.
### ¿Mi favicon debería ser mi logo completo?
Normalmente no. Usa una letra, un monograma o el símbolo del logo, porque un logotipo completo es ilegible a 16 píxeles.