Convertir PNG a ICO (favicon)

Un favicon es el pequeño icono que los navegadores muestran en la pestaña, la barra de marcadores y el historial. Esta herramienta convierte un PNG en un archivo .ico multitamaño con versiones de 16, 32, 48 y 64 píxeles, creado por completo en tu dispositivo sin subir nada.

Cómo convertir PNG a ICO (favicon)

  1. Suelta tu imagen PNG en la herramienta. Una imagen cuadrada funciona mejor.
  2. El formato de salida ya está fijado en ICO (favicon).
  3. Pulsa Ejecutar para generar un .ico multitamaño.
  4. Descarga tu favicon.ico y colócalo en la raíz de tu sitio.

Qué tiene que hacer un favicon

Un favicon se muestra a tamaños muy pequeños, a menudo 16 píxeles cuadrados. A ese tamaño, el detalle fino desaparece y las líneas finas se esfuman por completo. Un buen favicon es una forma sencilla y contundente con mucho contraste: una sola letra, una versión simplificada de un símbolo de marca o una forma sólida en el color de la marca. Si tu logotipo completo tiene un nombre escrito, usa solo el símbolo, o solo la primera letra.

La razón de que los archivos .ico contengan varios tamaños es que escalar una sola imagen hacia arriba o hacia abajo al mostrarla se ve borroso. Al incluir versiones de 16, 32, 48 y 64 píxeles, el sistema operativo o el navegador pueden mostrar una imagen exacta al píxel en cada contexto: 16 px en una pestaña, 32 px en una lista de marcadores en una pantalla de alta densidad, 48 px en un acceso directo de la barra de tareas de Windows, y así sucesivamente.

Preparar el PNG de origen

  • Hazlo cuadrado. Si tu logotipo es ancho, colócalo primero sobre un lienzo cuadrado transparente, o recorta al símbolo con la herramienta de recorte.
  • Parte de 256 píxeles o más. Reducir desde un origen grande y limpio da resultados más suaves que ampliar uno pequeño.
  • Mantén un fondo transparente si la forma es sólida, para que quede bien en los temas claros y oscuros del navegador. Si la forma es fina o de color claro, ponla sobre un cuadrado redondeado sólido.
  • Evita texto de más de uno o dos caracteres; será ilegible a 16 píxeles.

Instalar el favicon

Guarda el archivo descargado como favicon.ico y colócalo en la carpeta raíz de tu sitio. Luego añade esto dentro del <head> de cada página:

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

La mayoría de plataformas tienen un ajuste específico: WordPress lo llama Icono del sitio en Apariencia, Shopify y Squarespace tienen un campo Favicon en los ajustes del tema, y Webflow lo tiene en Ajustes del proyecto. Sube el .ico ahí.

Ir más allá

Para el conjunto completo de iconos que piden los dispositivos modernos, también querrás un PNG de 180 píxeles para los accesos directos de la pantalla de inicio de iOS (apple-touch-icon) y PNG de 192 y 512 píxeles para Android y el manifiesto de la aplicación web. Son archivos PNG normales, así que usa la herramienta de redimensionar para producirlos a partir del mismo maestro. El .ico de esta página cubre las pestañas del navegador, los marcadores y Windows, que es donde más gente nota un favicon ausente.

Preguntas frecuentes

¿De qué tamaño debe ser el PNG de origen?

Cuadrado, y de al menos 64 por 64 píxeles. Un PNG cuadrado de 256 píxeles da los resultados reducidos más limpios. Las imágenes no cuadradas se centran y se rellenan con transparencia.

¿Qué contiene el archivo .ico?

Cuatro imágenes codificadas en PNG a 16, 32, 48 y 64 píxeles. Los navegadores y Windows eligen el tamaño que mejor encaja en cada contexto, así que el icono se ve nítido en una pestaña, un marcador y un acceso directo del escritorio.

¿Cómo añado el favicon a mi sitio web?

Sube favicon.ico a la raíz de tu sitio (de modo que esté en tusitio.com/favicon.ico) y añade <link rel="icon" href="/favicon.ico"> dentro del <head> de tus páginas. Los navegadores guardan los favicons en caché con insistencia, así que puede hacer falta una recarga forzada para ver el cambio.

¿Sigo necesitando un archivo .ico en 2026?

Los navegadores modernos aceptan favicons PNG y SVG, pero .ico es el único formato que funciona en todas partes, incluidos navegadores antiguos, accesos directos de Windows y algunos lectores de feeds. La mayoría de sitios incluyen ambos.

Tus archivos nunca salen de tu dispositivo

Todas las herramientas de Squishly Tools son 100% gratuitas y funcionan por completo dentro de tu navegador. Tus imágenes y documentos se procesan en tu propio ordenador y nunca se suben a un servidor. Sin cuentas, sin marcas de agua y sin trampa.