PNG a ICO
Convertidor

Cómo convertir PNG a ICO

1. Empieza con un PNG cuadrado, idealmente de 256 por 256 píxeles o más, con fondo transparente si lo quieres.
2. Haz clic en «Elegir fotos» o suelta el PNG en la página. Se convierte de inmediato con los tamaños de favicon.
3. Para incluir más tamaños, cambia Tamaños de icono en el panel de ajustes de la derecha y pulsa «Aplicar a todos los archivos».
4. Pulsa «Guardar» para descargar el archivo .ico, o «Descargar todo (.zip)» si has creado varios iconos.

Qué hace el ajuste Tamaños de icono

• Favicon (16, 32, 48). El valor por defecto. Cubre las pestañas del navegador, los marcadores y el acceso directo de un sitio en la barra de tareas de Windows. Es lo que necesitan la mayoría de los sitios web en favicon.ico.
• Todos los tamaños. 16, 32, 48, 64, 128 y 256 px en un solo archivo. Úsalo para el icono de un programa o de un acceso directo de Windows, donde el Explorador elige tamaños mayores para las vistas de iconos grandes.
• Solo 256. Una única imagen de 256 por 256, para herramientas que piden un solo icono grande.

Cómo se crea cada tamaño

Cada tamaño se obtiene reduciendo tu PNG en varios pasos de reducción a la mitad, en lugar de un único salto grande, lo que mantiene más limpios los iconos pequeños. Cada tamaño se guarda dentro del ICO como una imagen PNG comprimida. Los navegadores modernos y Windows Vista y posteriores leen este tipo de archivo ICO.

Una imagen que no sea cuadrada se ajusta dentro del cuadrado y se centra, con espacio transparente añadido en los lados más cortos. No se recorta nada.

Los tamaños mayores que tu PNG se omiten para que una imagen pequeña no se amplíe hasta convertirse en iconos grandes y borrosos. Un PNG de 48 px con «Todos los tamaños» seleccionado te da 16, 32 y 48. Si el PNG es más pequeño que todos los tamaños elegidos, obtienes solo el más pequeño de ellos, ampliado.

Cómo usar el archivo como favicon

Renombra el archivo a favicon.ico y colócalo en la carpeta raíz de tu sitio, de modo que sea accesible en tusitio.com/favicon.ico. Los navegadores buscan esa dirección automáticamente. También puedes apuntar a él desde el head de tus páginas con un elemento link cuyo atributo rel sea icon.

Muchos sitios añaden además un PNG de 180 por 180 como apple-touch-icon para las pantallas de inicio del iPhone y el iPad, junto con iconos PNG o SVG más grandes. ICO sigue siendo útil para los tamaños de 16 y 32 px y para programas antiguos que solo buscan favicon.ico.

Consejos para un icono nítido

• Simplifica el diseño para los tamaños pequeños. El texto y las líneas finas desaparecen a 16 px; una sola letra o forma en negrita se lee mejor.
• Deja un poco de margen alrededor del dibujo, pero no tanto como para que se vea diminuto en la pestaña del navegador.
• Comprueba cómo se ve el icono en los temas claro y oscuro del navegador. Un fondo transparente con un logotipo oscuro puede desaparecer en una barra de pestañas oscura.
• Es posible que tu nuevo favicon no aparezca al principio, porque los navegadores guardan los iconos en caché de forma agresiva. Abre directamente la dirección de favicon.ico o prueba en una ventana privada.

Privacidad

Tu navegador cambia el tamaño del PNG y lo empaqueta en el ICO. No se sube nada, así que la imagen de marca en la que estás trabajando se queda en tu equipo.