Cómo crear un favicon.ico (multitamaño) desde PNG o SVG

Un favicon es el pequeño icono que aparece en las pestañas del navegador, marcadores, listas de historial y barras de direcciones. Es uno de los primeros elementos visuales que los usuarios notan de tu sitio, y hacerlo bien importa más de lo que la mayoría de los desarrolladores creen. Un favicon borroso, ausente o con un tamaño incorrecto hace que un sitio parezca inacabado y poco profesional.

El formato ICO sigue siendo la opción más fiable para favicons porque puede agrupar múltiples tamaños de imagen en un solo archivo. Cuando un navegador necesita un icono de 16x16 para la barra de pestañas, extrae la imagen de 16x16 del archivo ICO. Cuando el sistema operativo necesita un icono de 32x32 para un acceso directo de la barra de tareas, extrae la versión de 32x32. Esto asegura que tu favicon siempre se vea nítido en cada tamaño, en lugar de ser escalado hacia arriba o abajo desde una sola resolución.

En esta guía, prepararás una imagen de origen, la convertirás a un archivo ICO multitamaño usando Any2ICO, elegirás los tamaños de favicon correctos y añadirás las etiquetas HTML correctas para que los navegadores encuentren y muestren tu icono. Todo el proceso toma menos de dos minutos, y la conversión ocurre directamente en tu navegador.

Paso 1: Prepara tu imagen de origen

Un gran favicon comienza con una gran imagen de origen. La calidad de tu entrada determina directamente la calidad de tu salida, así que vale la pena dedicar un momento a hacerlo bien antes de convertir nada.

Usa una imagen cuadrada. Los favicons siempre se muestran como cuadrados, así que tu fuente debe ser cuadrada o muy cercana a serlo. Si tu logotipo es más ancho que alto, considera recortarlo a una porción cuadrada o usar una marca simplificada en lugar del logotipo completo. Any2ICO ofrece modos de escalado ajustar y recortar si tu imagen no es perfectamente cuadrada. Ajustar encaja toda la imagen dentro del cuadrado con relleno de fondo opcional, mientras que recortar escala la imagen para llenar completamente el cuadrado, cortando los bordes.

Comienza con la resolución más alta disponible. Una imagen de al menos 256x256 píxeles le da a Any2ICO datos fuente limpios para cada tamaño de favicon desde 16x16 hasta 256x256. Si tu fuente es solo de 32x32, la herramienta aún puede crear tamaños más pequeños reduciendo, pero no puede generar una versión nítida de 256x256 a partir de un original diminuto. En caso de duda, ve más grande.

PNG es el formato de entrada ideal. PNG preserva la transparencia y es sin pérdida, lo que lo convierte en el mejor punto de partida para la conversión de iconos. Si tu logotipo tiene un fondo transparente, PNG llevará esa transparencia perfectamente a la salida ICO. JPG también funciona, pero no soporta transparencia y puede introducir artefactos de compresión en la fuente.

SVG funciona, pero con advertencias. SVG es un formato vectorial que teóricamente puede escalar a cualquier resolución, lo cual suena ideal para favicons. Any2ICO acepta archivos SVG y los rasteriza durante la conversión. Sin embargo, los SVG con referencias de fuentes externas, imágenes vinculadas o CSS complejo pueden no renderizarse como se espera al ser rasterizados en el navegador. Si tu SVG se ve correcto en un navegador web, casi seguro se convertirá correctamente.

Paso 2: Convierte a un ICO multitamaño con Any2ICO

Con tu imagen de origen lista, dirígete a Any2ICO para convertirla en un archivo ICO multitamaño correctamente estructurado. El proceso es sencillo y toma solo unos clics.

Sube tu imagen. Arrastra y suelta tu archivo PNG, SVG, JPG, WebP, GIF, BMP o AVIF en el área del conversor. También puedes pegar una imagen directamente desde tu portapapeles, importar desde una URL o conectar con Google Drive u OneDrive. Any2ICO acepta archivos de hasta 10 MB, que es mucho más de lo que cualquier fuente de favicon debería necesitar.

Selecciona los tamaños de tu ICO. Any2ICO te permite elegir qué tamaños incrustar en el archivo ICO: 16, 32, 48, 64, 128 y 256 píxeles. Para la mayoría de los sitios web, seleccionar 16, 32 y 48 cubre los casos de uso esenciales. Si quieres cobertura completa incluyendo iconos de aplicaciones de Windows y pantallas de alta resolución, añade 64, 128 y 256 también. Cada tamaño seleccionado añade una capa de imagen separada dentro del único archivo ICO.

Elige tu modo de escalado. Si tu fuente no es perfectamente cuadrada, elige ajustar para encajar la imagen completa dentro del límite cuadrado (con relleno de fondo para las áreas vacías) o recortar para llenar todo el cuadrado cortando los bordes. Para la mayoría de los logotipos, ajustar es la opción más segura porque preserva la imagen completa sin cortar nada.

Establece el fondo. Si tu fuente tiene transparencia y quieres mantenerla, selecciona fondo transparente. Si prefieres un respaldo sólido, elige blanco. Los fondos transparentes lucen mejor en navegadores y sistemas operativos modernos, mientras que un fondo blanco puede ser útil si tu logotipo tiene elementos muy finos o claros que podrían desaparecer contra barras de pestañas oscuras.

Descarga tu ICO. Haz clic en el botón de convertir y descarga el archivo favicon.ico generado. La conversión se realiza por la Canvas API directamente en tu navegador. Para entender exactamente cómo Any2ICO maneja tus archivos durante la subida e importación, visita nuestra página acerca de.

Paso 4: Añade las etiquetas de favicon a tu sitio

Una vez que tengas tu archivo favicon.ico, necesitas colocarlo en tu servidor e indicar a los navegadores dónde encontrarlo.

Coloca el archivo en la raíz de tu dominio. Guarda tu archivo favicon.ico en el directorio raíz de tu servidor web para que sea accesible en https://tudominio.com/favicon.ico. La mayoría de los navegadores buscarán automáticamente un archivo en esta ruta exacta, incluso sin ninguna etiqueta HTML que apunte a él. Esta convención data de los primeros días de los favicons y sigue siendo el método más fiable.

Añade una etiqueta link en tu head HTML. Aunque colocar el archivo en la raíz a menudo es suficiente, añadir una etiqueta <link> explícita en tu sección <head> asegura que cada navegador lo encuentre de manera fiable, incluyendo aquellos que buscan en rutas no raíz o subdominios. Aquí está el fragmento mínimo que necesitas:

<link rel="icon" href="/es/favicon.ico" sizes="any">

El atributo sizes="any" le dice al navegador que el archivo ICO contiene múltiples tamaños y que el navegador debe elegir el mejor para su contexto actual. Si quieres ser explícito sobre qué tamaños están incluidos, puedes listarlos:

<link rel="icon" href="/es/favicon.ico" sizes="16x16 32x32 48x48">

Para la mayoría de los sitios, la versión de una línea con sizes="any" es perfectamente suficiente. Los navegadores son inteligentes al seleccionar el tamaño correcto de un archivo ICO multitamaño. Para una referencia completa sobre etiquetas link de favicon, valores de atributos y casos especiales, consulta nuestra guía sobre etiquetas HTML de favicon.

Verifica que funcione. Abre tu sitio en un navegador y comprueba el icono de la pestaña. Si ves el favicon antiguo o ningún favicon, probablemente necesites limpiar la caché de tu navegador. Los favicons son agresivamente cacheados por todos los navegadores principales, así que una recarga forzada (Ctrl+Shift+R o Cmd+Shift+R) o abrir la página en una ventana de incógnito es la forma más rápida de confirmar que tu nuevo icono se está cargando correctamente.

Resumen

Crear un favicon.ico multitamaño adecuado es un proceso de cuatro pasos: prepara una imagen de origen cuadrada de alta calidad (preferiblemente PNG o SVG a 256x256 o más), conviértela a ICO con los tamaños correctos usando Any2ICO, elige tamaños que coincidan con tu audiencia (16, 32 y 48 como mínimo), y añade una simple etiqueta <link> a tu head HTML. Todo el proceso toma menos de dos minutos y produce un favicon que se ve nítido en cada pestaña del navegador, barra de marcadores y acceso directo del escritorio.

Un archivo ICO multitamaño sigue siendo el formato de favicon más universalmente soportado entre navegadores y sistemas operativos. Mientras que los navegadores modernos también aceptan favicons PNG y SVG, el formato ICO garantiza compatibilidad hasta Internet Explorer y funciona perfectamente con accesos directos del escritorio de Windows. Al agrupar múltiples tamaños en un solo archivo, aseguras que el navegador siempre tenga la resolución correcta disponible sin descargar archivos separados para cada contexto.

¿Listo para crear tu favicon? Dirígete a Any2ICO, sube tu logotipo, selecciona tus tamaños y descarga tu favicon.ico terminado en segundos. Sin registro, sin marcas de agua, y la conversión ocurre directamente en tu navegador.