Cómo usarla
- Elige Letras y escribe uno o dos caracteres con tus colores, o elige Imagen y selecciona un logotipo (a ser posible cuadrado y de al menos 512 px).
- Comprueba las vistas previas de todos los tamaños, sobre todo las de 16 y 32 px, que se muestran en las pestañas del navegador.
- Descarga el ZIP y sube sus archivos a la raíz de tu sitio web.
- Pega las etiquetas HTML en la sección head de tus páginas y, si hace falta, cambia el nombre en site.webmanifest.
Cómo funciona
Los navegadores y dispositivos buscan iconos en distintos lugares. El conjunto que se genera aquí cubre los casos más habituales: favicon.ico con imágenes de 16, 32 y 48 px para pestañas del navegador, marcadores y programas antiguos que solicitan /favicon.ico automáticamente; archivos PNG de 16 y 32 px referenciados mediante etiquetas link; un apple-touch-icon de 180 × 180 que se usa cuando alguien añade tu sitio a la pantalla de inicio de un iPhone o iPad; e iconos de 192 y 512 px referenciados desde site.webmanifest para pantallas de inicio de Android y aplicaciones web instalables.
El archivo favicon.ico guarda los iconos como imágenes PNG dentro de un contenedor ICO, que pueden leer todos los navegadores actuales y Windows Vista o versiones posteriores. Los archivos ICO y ZIP se generan mediante código en esta página; no se envía nada a ningún servidor.
Los tamaños pequeños requieren un diseño sencillo: en 16 × 16 píxeles, las líneas finas y el texto pequeño desaparecen, así que una letra en negrita o una versión simplificada del logotipo funciona mejor que un logotipo completo con texto. La imagen se reduce en varios pasos de alta calidad. El apple-touch-icon siempre tiene un fondo sólido porque iOS muestra en negro las áreas transparentes, y redondea las esquinas por su cuenta.
Después de subir iconos nuevos, es posible que los navegadores sigan mostrando el favicon anterior durante un tiempo porque lo almacenan en caché de forma intensiva. Normalmente ayuda forzar la recarga de la página o abrir /favicon.ico directamente.
Ejemplos
Icono con letras para un proyecto nuevo
Escribe "TG" en letras blancas sobre un cuadrado verde oscuro con esquinas redondeadas para crear un icono sencillo que se siga leyendo bien a 16 × 16 px en una pestaña del navegador, sin necesidad de diseñar un logotipo.
Icono a partir de un logotipo existente
Un logotipo PNG de 1024 × 1024 con fondo transparente, configurado en Ajustar imagen completa, genera iconos de pestaña transparentes y un apple-touch-icon sobre el color de tu marca.
Logotipo apaisado
Con un logotipo apaisado de 1200 × 300, Recortar el centro conserva solo las letras del medio. Ajustar imagen completa lo conserva todo, pero lo hace diminuto; suele quedar mejor un icono de logotipo cuadrado aparte.
Preguntas frecuentes
¿Sigo necesitando favicon.ico?
Sigue siendo útil. Algunos navegadores, lectores de feeds y herramientas solicitan /favicon.ico en la raíz del sitio aunque no haya una etiqueta link. Los navegadores modernos también usan los iconos PNG referenciados en el HTML.
¿Dónde guardo los archivos?
Súbelos a la carpeta raíz de tu sitio web, junto a la página de inicio, para que funcionen /favicon.ico y las demás rutas del HTML. Si usas una subcarpeta, cambia las rutas en las etiquetas link y en site.webmanifest.
¿Por qué sigue apareciendo mi favicon anterior?
Los navegadores guardan los favicons en caché por separado y durante mucho tiempo. Prueba a forzar la recarga de la página, abrir /favicon.ico en una pestaña nueva o comprobarlo en una ventana privada. Cambiar el nombre de los archivos, por ejemplo a favicon-v2.ico, también fuerza su recarga.
¿Esto genera un favicon SVG?
No. Genera archivos PNG e ICO, que funcionan en todas partes. Si ya tienes un logotipo SVG, puedes añadirlo por tu cuenta con una etiqueta link de tipo image/svg+xml, además de estos archivos.
Privacidad
Los iconos, el archivo ICO y el ZIP se generan en tu navegador. Tu imagen y tu texto no se suben, almacenan ni incluyen en las analíticas.