Cómo crear un favicon.ico desde un PNG, en el navegador

Publicado el 12 de septiembre de 2026

Puedes crear un favicon.ico desde un PNG o WebP en segundos, gratis y en el navegador, con los tamaños 16, 32 y 48 y vista previa antes de descargar. Así se hace.

Por qué el favicon.ico sigue importando

El favicon es el icono que aparece en la pestaña del navegador, en los marcadores y junto a tu sitio en los resultados de Google. Hoy los navegadores aceptan PNG y SVG como favicon, pero el .ico sigue siendo el formato que todos entienden: los navegadores antiguos, Windows al crear accesos directos a sitios web y muchos lectores de feeds buscan "/favicon.ico" en la raíz del dominio aunque la página no tenga ninguna etiqueta. Un .ico bien hecho guarda varios tamaños en un solo archivo, y cada programa toma el que necesita.

La herramienta de AtlasDocs recibe un PNG o WebP, reduce la imagen a cada tamaño del preajuste elegido, monta el .ico con esas versiones y muestra una vista previa en pestaña clara y oscura antes de descargar. El propio favicon de AtlasDocs se generó con ella.

Cómo crear el favicon.ico, paso a paso

Abre la herramienta PNG → ICO (favicon) y sube un PNG o WebP, preferiblemente cuadrado, con fondo transparente y 256 píxeles o más. Si subes más de una imagen, solo se usa la primera y la pantalla te indica cuál.
Elige en "Tamaños del favicon" el preajuste: "Estándar (16 + 32 + 48)" para un sitio web, "Mínimo (solo 32)" para el archivo más ligero posible o "Icono de Windows (16 + 32 + 48 + 256)" para un acceso directo de programa.
Si la imagen es pixel art, marca "Pixel art (sin suavizar)" para reducirla sin difuminar los píxeles. Para logotipos y dibujos normales, déjalo sin marcar.
Pulsa "Generar favicon.ico". El botón muestra las etapas "Leyendo la imagen…", "Reduciendo…" y "Montando el ICO…", y la vista previa "Cómo se verá" aparece justo debajo, con el tamaño en bytes de cada entrada y el total.
Revisa la vista previa y pulsa "Descargar favicon.ico". Usa "Copiar línea del <head>" para copiar la etiqueta lista para pegar en el HTML de tu sitio.

Convertir PNG a ICO (favicon) →

Nada sale de tu ordenador: la lectura, la reducción y el montaje del .ico se ejecutan en tu navegador, sin motor externo y sin enviar la imagen a ningún servidor.

Qué preajuste elegir

"Estándar (16 + 32 + 48)": para un sitio web. El 16 va en la pestaña, el 32 en pantallas de alta resolución y en la barra de tareas, y el 48 es el que usa Google en los resultados de búsqueda (lo reduce a 16). Objetivo de hasta 10 KB.
"Mínimo (solo 32)": el archivo más ligero. Los navegadores reducen el 32 para la pestaña por su cuenta; sirve cuando cada byte cuenta.
"Icono de Windows (16 + 32 + 48 + 256)": para un acceso directo de programa o carpeta en Windows, que usa la versión de 256 píxeles en los iconos grandes. Pesa por naturaleza y no es para sitios web; por eso este preajuste nunca recibe aviso de tamaño.

Solo PNG o WebP: ¿y si mi imagen es JPG?

El JPG se rechaza a propósito: el formato no tiene transparencia, y un favicon con fondo blanco cuadrado queda mal en la pestaña oscura. La comprobación es por el contenido del archivo, no por la extensión, así que renombrar un .jpg a .png no engaña a la herramienta, que responde "Sube un PNG o WebP". El camino correcto es convertir el JPG a PNG antes, con el conversor de formato de imagen, y a ser posible recortar la imagen en cuadrado en un editor. GIF y SVG tampoco entran; el WebP animado sí, pero solo se usa el primer fotograma.

Cambiar formato de imagen →

Avisos que pueden aparecer y qué significan

"La imagen no es cuadrada": el favicon siempre es cuadrado, así que la imagen se centró con transparencia a los lados, sin estirar. Si sobra mucho margen, recorta la imagen antes.
"Se amplió y el icono puede salir borroso": la imagen subida es más pequeña que el mayor tamaño del preajuste (por ejemplo, un PNG de 24 píxeles en un preajuste que pide 48). Usa una fuente de 256 píxeles o más.
"Por encima del objetivo de 10 KB": el .ico quedó más grande de lo recomendado para un sitio web. Las fotos y los degradados pesan más que los logotipos simples; simplifica la imagen o usa el preajuste mínimo.
"Por encima del techo de 20 KB para un favicon": el mismo consejo, con más urgencia. El aviso nunca bloquea la descarga; decides tú.
"WebP animado: solo se usó el primer fotograma": el favicon no se anima; la herramienta toma el primer fotograma.

Cómo poner el favicon en tu sitio

Sube el archivo a la raíz del sitio, de modo que responda en "/favicon.ico", y añade en el <head> de las páginas la línea que la herramienta copia por ti: <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> (los tamaños indicados son exactamente los que entraron en el archivo). En proyectos Next.js con App Router, basta con colocar el archivo en "app/favicon.ico", sin etiqueta. Si el icono antiguo sigue apareciendo después del cambio, es la caché del navegador: abre el sitio en una ventana privada para comprobar la versión nueva.

La vista previa: por qué revisar antes de descargar

La vista previa se monta a partir del .ico generado, no de la imagen original, así que muestra lo que el navegador va a enseñar de verdad. Ves el icono en una "Pestaña clara" y una "Pestaña oscura" (la entrada más pequeña a 16 píxeles), en la "Pantalla 2×", que usa el 32, y como "48 reducido a 16, como en Google". Debajo, una franja a cuadros muestra cada entrada a tamaño real: lo que se ve de los cuadros es transparente. Los logotipos con trazos finos desaparecen a 16 píxeles; si pasa, simplifica el dibujo y genera de nuevo.

El formato ICO solo representa hasta 256 píxeles por lado, y las entradas se guardan como PNG dentro del archivo, con transparencia de 32 bits. El nombre de salida es siempre "favicon.ico"; renómbralo después si necesitas otro.