Cómo se usa
- Elija Icono a partir de: Una imagen o Letras o un emoji sobre un color.
- Elija la imagen, o escriba las Letras o emoji. Ajuste el Color de fondo y el Color de las letras.
- Ajuste el Color del tema y el Nombre del sitio, y haga clic en Crear los iconos.
- Descargue el ZIP. Coloque los archivos en la carpeta principal de su sitio y pegue las Etiquetas HTML en el encabezado de cada página.
Los archivos y sus tamaños
favicon.ico contiene tres imágenes, de 16, 32 y 48 píxeles, para que una pestaña del navegador, un marcador y Windows encuentren cada uno un tamaño adecuado. apple-touch-icon.png mide 180 píxeles para la pantalla de inicio de un iPhone o un iPad. android-chrome-192x192.png y android-chrome-512x512.png son los iconos de Android que figuran en el manifiesto. site.webmanifest indica el nombre de la aplicación y sus colores.
Transparencia y fondo
El favicon conserva sus zonas transparentes, así que un logotipo se ve sobre el color que muestre el navegador. Los iconos de Apple y Android se rellenan con el color de fondo, porque una esquina transparente de un icono táctil de Apple se ve negra en el iPhone y en el iPad.
Dónde van los archivos
Coloque los archivos en la carpeta principal de su sitio web, para que las direcciones /favicon.ico y /site.webmanifest funcionen. Los navegadores guardan los iconos en caché durante mucho tiempo: después de un cambio, añada un número de versión al enlace o borre la caché para ver el nuevo icono.
Ejemplo: las letras FT sobre azul oscuro
Elija Letras o un emoji sobre un color, escriba FT y mantenga el fondo azul oscuro. La herramienta dibuja las letras en el centro de un cuadrado redondeado y las ajusta al cuadrado, así que siguen legibles incluso en el favicon de 16 píxeles.
Preguntas frecuentes
¿Se sube mi imagen al crear los favicon?
No. Los iconos se dibujan en su navegador y se empaquetan en el archivo ZIP en su dispositivo. Puede comprobarlo desconectando su conexión a internet después de cargar la página y crear un juego de iconos.
¿Qué archivo usa el navegador para el icono de la pestaña?
Los navegadores usan favicon.ico, o una etiqueta de enlace de la página que apunta a un archivo PNG o SVG. Las etiquetas que crea esta herramienta nombran favicon.ico y el icono de Apple, así que cada navegador encuentra un icono de tamaño adecuado.
¿Por qué mi favicon se ve borroso a 16 píxeles?
Un icono pequeño tiene muy pocos píxeles, así que las líneas finas y las letras pequeñas se difuminan. Use una forma simple con trazos gruesos, o dos letras como máximo, y revise las imágenes de 16 y 32 píxeles del archivo ICO.
¿Por qué los iconos de Apple tienen un color de fondo?
Un icono táctil de Apple con una esquina transparente muestra esa esquina en negro en el iPhone y el iPad. La herramienta rellena el cuadrado entero con el color de fondo que elija.
¿Qué va en el encabezado de la página?
Pegue las cuatro líneas del recuadro de etiquetas HTML en el elemento head de cada página. Enlazan favicon.ico, el icono de Apple, el manifiesto y el color del tema.
¿Para qué sirve el manifiesto de la aplicación web?
Coloque site.webmanifest en la carpeta principal de su sitio. El navegador lo lee cuando un visitante instala el sitio como aplicación: indica el nombre de la aplicación, su nombre corto y sus colores, y enumera los dos iconos de Android.
Fuentes
- MDN (en inglés): el elemento link, con los enlaces de icono y de manifiesto
- MDN (en inglés): el manifiesto de aplicación web
- Microsoft Learn (en inglés): iconos, las estructuras ICONDIR e ICONDIRENTRY del archivo ICO
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.