Cómo crear un favicon.ico a partir de un logo PNG
Un favicon es el pequeño icono que aparece en las pestañas del navegador, los marcadores y los resultados de búsqueda junto al nombre de tu sitio. Sin él, los navegadores muestran un icono genérico de página en blanco, y el sitio parece inacabado.
Esta guía muestra cómo convertir un logo PNG o JPG en un favicon.ico en condiciones y añadirlo a cualquier sitio web.
¿Qué tamaños necesita un favicon?
Los navegadores muestran los favicons en distintos tamaños: 16×16 píxeles en las pestañas, 32×32 en pantallas de alta resolución y en algunos marcadores, 48×48 en Windows y tamaños mayores para los accesos directos.
Un archivo ICO puede guardar varios tamaños a la vez, y el navegador elige el más adecuado. PixShift crea automáticamente archivos ICO con versiones de 16, 32, 48 y 256 píxeles.
Prepara tu imagen
- Usa una imagen cuadrada. Si tu logo no es cuadrado, se centrará con espacio transparente alrededor.
- Parte de al menos 256×256 píxeles para que los tamaños grandes se vean nítidos.
- Mantenlo simple. El texto fino y las líneas delgadas desaparecen a 16 píxeles, así que una sola letra o un símbolo suele funcionar mejor.
- Usa PNG con fondo transparente si quieres que el icono se integre tanto en pestañas claras como oscuras.
Convierte PNG a ICO
- Abre el conversor de PNG a ICO de PixShift.
- Suelta tu logo en el recuadro. El archivo ICO se crea al instante en tu navegador.
- Descarga el archivo y cámbiale el nombre a favicon.ico.
Añade el favicon a tu sitio web
- Sube favicon.ico a la carpeta raíz de tu sitio web para que esté disponible en https://tu-sitio.com/favicon.ico.
- Añade la línea que se muestra abajo dentro de la sección <head> de tus páginas.
- Recarga tu sitio. Si sigue apareciendo el icono anterior, borra la caché del navegador o abre el sitio en una ventana privada; los navegadores guardan los favicons en caché de forma muy agresiva.
<link rel="icon" href="/favicon.ico" sizes="any">¿Sigue haciendo falta ICO en los navegadores modernos?
Los navegadores modernos también aceptan favicons en PNG y SVG. Aun así, un favicon.ico en la raíz del sitio sigue siendo la opción más compatible: algunas herramientas, lectores de feeds y navegadores antiguos buscan exactamente ese archivo. Muchos sitios ofrecen tanto un ICO como una versión SVG o PNG.