PNG es el formato de imagen más común, pero los navegadores no aceptan un PNG en crudo como favicon sin la configuración adecuada. Esta guía explica cómo funciona la conversión de PNG a favicon, qué contiene un paquete completo y cómo evitar los resultados borrosos que provienen de un escalado ingenuo.
Qué significa realmente “convertir PNG a favicon”
Un favicon como es debido no es un solo archivo — es un paquete. Cuando conviertes un PNG, el resultado debería incluir:
- Un archivo
.icoque agrupa 16×16, 32×32 y 48×48 en uno solo - PNG individuales de 16, 32, 180, 192 y 512 píxeles
- Un
apple-touch-icon.pngde 180×180 - Un
site.webmanifestque enlaza los iconos
Puedes usar un solo PNG como favicon con <link rel="icon" type="image/png" href="/icon.png">, pero perderás compatibilidad con los navegadores antiguos y te faltará soporte para iOS/Android.
Cómo convertir PNG a favicon (gratis)
- Abre el generador de Favicon.one y sube tu PNG.
- La herramienta lo escala a todos los tamaños necesarios — enteramente en tu navegador.
- Descarga el ZIP, que contiene el .ico, todos los PNG y el manifest.
- Extráelo en la raíz de tu sitio y añade las etiquetas link de HTML.
Todo se ejecuta en el lado del cliente. Tu PNG nunca se sube a un servidor, así que los logos sensibles permanecen privados.
Por qué importa la transparencia
PNG admite transparencia; JPEG no. Un favicon PNG transparente deja ver el fondo de la pestaña del navegador, lo que parece mucho más profesional que un cuadrado blanco. Si partes de un JPEG, conviértelo primero a PNG y elimina el fondo.
Cómo evitar favicons borrosos
La queja número 1 sobre los favicons autogenerados es la borrosidad a 16×16. Causas y soluciones:
- Demasiado detalle. Un logo complejo reducido a 16px se vuelve papilla. Usa una versión simplificada — una sola letra o forma funciona mejor.
- Líneas finas. Los trazos hairline desaparecen a tamaños pequeños. Usa formas gruesas y de alto contraste.
- Origen de baja resolución. Parte de al menos 512×512 (mejor 1024×1024). Nunca hagas upscale.
- Proporciona también un SVG. Los favicons vectoriales se mantienen nítidos a cualquier tamaño — consulta nuestra guía de SVG vs PNG.
¿Qué hay dentro del archivo .ico?
El formato ICO es especial: un solo .ico puede incrustar múltiples imágenes PNG/BMP a distintos tamaños. Cuando un navegador solicita favicon.ico, recibe todos los tamaños y elige el mejor para la pantalla actual. Por eso un buen .ico es el formato de favicon más compatible — todos los navegadores desde Internet Explorer lo admiten.
El HTML completo tras la conversión
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Omite el trabajo manual — convierte tu PNG en un paquete completo de favicon en segundos, gratis.