Cómo crear un archivo ICO
- 1
Haz clic en Elegir archivo o arrastra tu imagen (PNG, JPG, WebP o SVG) al recuadro. Lo ideal es una imagen cuadrada de al menos 256 × 256 px.
- 2
Haz clic en Convertir: la herramienta genera automáticamente varios tamaños, de 16 a 256 px, en un único archivo .ico.
- 3
Haz clic en Descargar, cambia el nombre del archivo a
favicon.icosi hace falta y colócalo en la raíz de tu web.
¿Qué es un archivo ICO?
ICO es el formato de icono clásico de Windows, que los navegadores adoptaron para el favicon: la pequeña imagen que aparece en la pestaña, en los marcadores y en el historial. Su particularidad es que un solo archivo .ico puede contener varias versiones de la misma imagen en distintos tamaños. El sistema elige la más adecuada según dónde se muestre.
| Tamaño | Dónde se usa |
|---|---|
| 16 × 16 px | Pestaña del navegador, marcadores |
| 32 × 32 px | Barra de tareas, pestañas en pantallas de alta densidad |
| 48 × 48 px | Accesos directos y Explorador de Windows |
| 256 × 256 px | Iconos grandes |
Preparar una buena imagen de partida
- Cuadrada: el favicon es cuadrado; un logotipo rectangular se reducirá para caber en el cuadrado.
- Suficientemente grande: parte de al menos 256 × 256 px para que el tamaño mayor se vea nítido. Un SVG es ideal porque se ve nítido a cualquier tamaño.
- Sencilla: a 16 px, un texto o un logotipo detallado se vuelve ilegible. Usa una inicial, un pictograma o una versión simplificada.
- Con transparencia: un PNG con fondo transparente se integra mejor en los temas claros y oscuros de los navegadores.
¿Tu imagen de partida es enorme (una foto de miles de píxeles)? Redúcela primero a 512 px de lado con Redimensionar imagen; el recorte en cuadrado puedes hacerlo en cualquier editor de imágenes.
Instalar el favicon en tu web
- Cambia el nombre del archivo a
favicon.ico. - Súbelo a la raíz de tu web, junto a la página de inicio.
- Si tu gestor de contenidos no lo hace ya, añade la línea
<link rel="icon" href="/favicon.ico">en la cabecera de tus páginas. - Vacía la caché o prueba en una ventana de incógnito: los navegadores recuerdan el favicon anterior durante mucho tiempo.
En WordPress, Shopify o Wix, el «icono del sitio» suele configurarse desde los ajustes del tema; algunos piden un PNG en lugar de un ICO.
Iconos de Windows
El formato ICO no solo sirve para webs: también es el formato de los iconos de Windows. Puedes usar el archivo para personalizar el icono de un acceso directo o de una carpeta (clic derecho > Propiedades > Personalizar > Cambiar icono) o para una pequeña aplicación que estés desarrollando. Los tamaños grandes incluidos en el archivo garantizan que se vea nítido en el escritorio.
La conversión se hace en local: tu logotipo, aunque todavía no lo hayas presentado, no se envía a ninguna parte.
Preguntas y respuestas
¿Qué tamaños contiene el archivo ICO?
¿Cómo añado el favicon a mi web?
favicon.ico en la raíz del sitio (por ejemplo, https://tuweb.com/favicon.ico): los navegadores lo buscan ahí. También puedes declararlo en el <head> con <link rel="icon" href="/favicon.ico">.