Optimizar
Generador de favicon
Convierte un logo, una imagen o unas pocas letras en todos los iconos que necesita un sitio web: pestaña del navegador, marcadores, pantallas de inicio de iPhone y Android, con el HTML para añadirlos.
Mira el icono en pestañas claras y oscuras y en las pantallas de inicio de los teléfonos antes de descargarlo. Cada archivo se vuelve a leer y se comprueba antes.
Tu icono aparece aquí en cuanto añades una imagen o escribes letras.
Añade esto al <head> de tu página
Cómo funciona
Diseña, revisa, descarga
- Empieza con una imagen o con letras. Añade un logo (mejor un SVG o un PNG de 512 píxeles o más) o escribe hasta tres letras.
- Dale forma. Cuadrado, redondeado o círculo, fondo transparente o de color, y espacio alrededor.
- Revisa las vistas previas. Pestañas en modo claro y oscuro, los tamaños reales de 16, 32 y 48 píxeles y las pantallas de inicio de iPhone y Android.
- Descarga y añade. Descarga el ZIP, sube los archivos a tu web y pega el HTML en el
<head>de cada página.
Qué obtienes
Los archivos y para qué sirve cada uno
- favicon.ico con imágenes de 16, 32 y 48 píxeles: el icono clásico que busca todo navegador.
- favicon-16x16.png y favicon-32x32.png para pestañas y marcadores.
- apple-touch-icon.png (180 píxeles, nunca transparente) para las pantallas de inicio de iPhone y iPad.
- android-chrome-192x192.png y 512x512.png, más un icono maskable que Android puede recortar en círculo o cuadrado redondeado sin cortar tu diseño.
- site.webmanifest con el nombre y los colores del sitio, para instalarlo como app.
- favicon.svg si empiezas con un SVG, para que los navegadores modernos muestren un icono nítido a cualquier tamaño.
Bueno saberlo
Un favicon legible a 16 píxeles
Una pestaña muestra el icono a 16 píxeles, más o menos el tamaño de una letra. A ese tamaño los detalles finos y las palabras largas desaparecen: usa un símbolo sencillo, de una a tres letras o la parte más reconocible de tu logo. Un buen contraste ayuda, y un fondo relleno mantiene el icono visible en pestañas claras y oscuras. La herramienta te avisa si una imagen es demasiado pequeña o si las letras se leen mal.
Herramientas relacionadas
Más para tu web
FAQ
Preguntas sobre favicons.
¿Qué tamaño debe tener un favicon?
No hay un solo tamaño: los navegadores usan 16 y 32 píxeles en las pestañas, Windows 48 píxeles, los iPhone 180 píxeles y Android 192 y 512 píxeles. Empieza con una imagen de al menos 512 píxeles, o un SVG, y esta herramienta los crea todos.
¿Cómo añado un favicon a mi web?
Sube los archivos del ZIP a tu web, normalmente a la carpeta principal, y pega el HTML que se muestra aquí en el <head> de cada página. Si colocas los archivos en otra carpeta, indícala en Datos del sitio y el HTML se ajusta.
¿Sigo necesitando favicon.ico?
Sí, conviene incluirlo. Algunos navegadores, lectores de feeds y herramientas piden directamente /favicon.ico sin leer tu HTML. El archivo creado aquí contiene imágenes de 16, 32 y 48 píxeles en un solo archivo.
¿Qué es un icono maskable?
Android muestra los iconos de apps con distintas formas, como círculos o cuadrados redondeados, según el teléfono. Un icono maskable tiene espacio extra alrededor del diseño, de modo que recortarlo a cualquiera de esas formas nunca corta tu logo. La vista previa de Android lo muestra recortado en círculo.
¿Por qué no cambia mi favicon en el navegador?
Los navegadores guardan los favicons mucho tiempo. Después de subirlo, abre directamente la dirección del icono, recarga con Ctrl+F5 o Mayús+recargar, o prueba una ventana privada. Cambiar el nombre del archivo, o añadir ?v=2 a los enlaces, hace que todos los navegadores carguen el nuevo.
¿Se suben mis imágenes?
No. Los iconos se dibujan en tu navegador a partir de tu imagen o tus letras. La imagen, los iconos y los datos del sitio nunca se envían a ningún sitio.