Cómo se usa
- 1.Suelta tu logotipo en la página, pégalo o haz clic en «Elegir una imagen». Un PNG o SVG cuadrado de al menos 512 × 512 píxeles da el mejor resultado.
- 2.Ajusta el margen interior y elige un color de fondo y esquinas redondeadas si tu logotipo necesita una forma sólida detrás.
- 3.Revisa la vista previa: las pestañas del navegador muestran cómo se ve el icono a 16 píxeles con tema claro y oscuro.
- 4.Haz clic en «Descargar favicon.zip», sube los archivos a la carpeta raíz de tu sitio web y pega el HTML en la sección head de tus páginas.
Qué archivos de favicon necesita un sitio web
Hoy basta con un pequeño conjunto para cubrir todos los navegadores y dispositivos. favicon.ico es el archivo clásico que navegadores, lectores de feeds y otras herramientas piden a /favicon.ico aunque la página no lo mencione; contiene versiones de 16, 32 y 48 píxeles. Los navegadores modernos prefieren un icono SVG (icon.svg), que se mantiene nítido a cualquier tamaño e incluso puede cambiar de color en modo oscuro con una media query prefers-color-scheme dentro del SVG.
apple-touch-icon.png (180 × 180) es lo que usan el iPhone y el iPad cuando alguien añade tu sitio a la pantalla de inicio. Android y las web apps instaladas toman los PNG de 192 y 512 píxeles que aparecen en site.webmanifest. Las guías antiguas enumeran decenas de tamaños; los navegadores escalan estos pocos archivos para todo lo demás.
Dónde poner los archivos
Sube los archivos a la carpeta raíz de tu sitio, para que se carguen desde direcciones como https://example.com/favicon.ico, y añade las líneas HTML al <head> de cada página. Cambia el nombre que aparece en site.webmanifest por el de tu sitio.
Los frameworks suelen tener su propio método. En el App Router de Next.js, pon favicon.ico, icon.svg (o icon.png) y apple-icon.png en la carpeta app y las etiquetas se añaden solas. En WordPress, sube una imagen cuadrada en Apariencia → Personalizar → Identidad del sitio → Icono del sitio. Los creadores de webs como Shopify, Wix y Squarespace tienen un campo para el favicon en los ajustes del sitio.
Cómo diseñar un icono que funcione a 16 píxeles
Una pestaña del navegador muestra tu icono a 16 × 16 píxeles (32 en pantallas de alta resolución). A ese tamaño, el texto pequeño, las líneas finas y los logotipos detallados se convierten en una mancha. Usa un símbolo sencillo, la inicial de tu nombre o una parte llamativa de tu logotipo, con un contraste fuerte.
Revisa las dos vistas previas de pestaña: un logotipo oscuro sobre fondo transparente puede desaparecer con un tema oscuro del navegador. Si ocurre, dale al icono un color de fondo o añade un contorno claro al logotipo.
Preguntas frecuentes
¿Se sube mi logotipo a algún sitio?
No. Tu navegador dibuja los iconos y los empaqueta en el archivo ZIP en tu dispositivo. No se envía nada a nestoo ni a nadie más.
¿Qué tamaño debe tener un favicon?
Las pestañas del navegador usan 16 × 16 y 32 × 32 píxeles, que es lo que contiene favicon.ico (además de 48 × 48 para los accesos directos de Windows). Los móviles y las web apps necesitan iconos más grandes: 180 × 180 para el Apple touch icon, y 192 × 192 y 512 × 512 para Android. Parte de una imagen de al menos 512 × 512 píxeles, o de un SVG.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons en caché durante mucho tiempo, a veces incluso después de una recarga forzada. Abre directamente el archivo del icono (/favicon.ico) y recárgalo, prueba en una ventana privada o añade una versión a los enlaces de tu HTML, como href="/favicon.ico?v=2", para que los navegadores descarguen el archivo nuevo.
¿Uso ICO o PNG?
Los dos. Deja favicon.ico en la carpeta raíz, porque algunos navegadores y herramientas solo buscan ese archivo. Los navegadores modernos usan los iconos PNG o SVG de tu HTML. El archivo ICO generado aquí guarda imágenes PNG en su interior, lo que lo mantiene ligero.
¿Puedo crear un favicon a partir de un emoji o de un texto?
No directamente con esta herramienta, pero es fácil con SVG: guarda <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> como icon.svg y suéltalo aquí. Los emojis se ven distintos en cada sistema operativo, así que los archivos PNG e ICO generados muestran el emoji tal como lo dibuja tu ordenador.