Tienes un logo, una captura de pantalla o una marca SVG. La arrastras a un conversor de favicon online y obtienes un ZIP lleno de iconos. Luego lo despliegas y la pestaña del navegador sigue mostrando un cuadrado en blanco. La conversión funcionó. La implementación no.
Esta guía repasa qué hace realmente un conversor, cómo usarlo sin romper tu stack de iconos y dónde se esconden los puntos de fallo habituales.
Qué produce realmente un conversor de favicon online
Un buen conversor no es solo un redimensionador. Toma una imagen de origen y genera un conjunto de archivos que encajan en los huecos de iconos que esperan los navegadores y los sistemas operativos.
La salida típica incluye:
- favicon.ico — un contenedor multirresolución, normalmente 16×16, 32×32 y 48×48. La especificación HTML de WHATWG define el tipo de enlace
rel='icon'en html.spec.whatwg.org, y los navegadores antiguos siguen solicitando/favicon.icopor convención. - Variantes PNG — 16×16, 32×32, 96×96, 180×180, 192×192, 512×512. Cada tamaño se asigna a una superficie diferente: barra de pestañas, barra de marcadores, pantalla de inicio de iOS, pantalla de inicio de Android.
- Apple Touch Icon — un PNG de 180×180 con fondo opaco. iOS lo compone sobre un cuadrado redondeado, por lo que la transparencia se convierte en negro o blanco.
- site.webmanifest — JSON que apunta las instalaciones de Android y PWA a los PNG correctos.
- Fragmento HTML — las etiquetas
<link>que pegas en<head>.
Si un conversor solo te da un único ICO, no está haciendo el trabajo. Acabarás editando el resto a mano.
Primeros pasos: elige el archivo de origen adecuado
La imagen de origen importa más que el conversor. Un JPG de 200×200 con fondo blanco producirá un icono borroso y encajonado. Un PNG de 1024×1024 con fondo transparente le da al conversor espacio para reducir la escala limpiamente.
Para fuentes vectoriales, SVG es la mejor entrada cuando el conversor lo admite. SVG escala a cualquier tamaño de salida sin artefactos de interpolación. Si solo tienes un logo raster, exporta la versión limpia más grande que puedas antes de subirlo.
Tres reglas para el origen:
- Lienzo cuadrado. Rellena el logo hasta una relación de aspecto 1:1. Las entradas no cuadradas se estiran o se les añaden barras.
- Fondo transparente. A menos que quieras específicamente un mosaico sólido, elimina el fondo. Consulta cómo crear un fondo transparente para favicon si partes de un JPG plano.
- Marca simple. Un logotipo con texto completo será ilegible a 16×16. Extrae primero el símbolo o el monograma.
Una vez que el origen está limpio, el paso de conversión es la parte fácil.
Características clave que debes buscar
No todos los conversores online están construidos igual. Las diferencias se notan después de descargar el ZIP.
Salida ICO multtamaño
El formato ICO es un contenedor, no una imagen única. Un conversor adecuado empaqueta fotogramas de 16, 32 y 48 píxeles en un solo archivo para que la barra de tareas de Windows, las pestañas del navegador y las barras de marcadores elijan cada una la resolución correcta. Un ICO de un solo fotograma obliga al navegador a reducir la escala, lo que produce bordes suaves.
Generación de manifest y HTML
El conversor debería generar un bloque <head> listo para pegar y un site.webmanifest. Escribir esto a mano es donde la mayoría de los desarrolladores introducen errores tipográficos. La especificación de rel='icon' es corta, pero las etiquetas circundantes (Apple Touch, maskable, theme-color) son fáciles de equivocar.
Conciencia del modo oscuro
Algunos conversores ahora generan un SVG con una consulta de medios prefers-color-scheme, de modo que el icono se invierte cuando el navegador está en modo oscuro. Esto es opcional pero útil si tu marca es oscura sobre claro. Sin ello, un icono negro desaparece en una barra de pestañas oscura.
Sin ida y vuelta al servidor para logos sensibles
Si estás convirtiendo una marca no publicada, comprueba si la herramienta procesa la imagen en el lado del cliente o la sube. La conversión en el lado del cliente mantiene el origen en tu máquina.
Consejos profesionales para un stack de iconos limpio
Después de que el conversor te entregue los archivos, unos pequeños hábitos evitan la mayoría de los errores de favicon.
- Mantén el ICO en la raíz del sitio. Los navegadores solicitan
/favicon.icoincluso cuando has declarado un icono diferente. Servir un 404 allí añade ruido en la consola. - Ordena tus etiquetas link deliberadamente. Los navegadores eligen el último icono coincidente en algunos casos y el primero en otros. Pon el SVG primero, luego los fallbacks PNG, luego el ICO. Consulta orden de las etiquetas link de favicon para las reglas exactas de apilamiento.
- Rompe la caché en las actualizaciones. Añade una cadena de consulta de versión a la URL del icono cuando cambies el archivo. Los navegadores cachean los favicons de forma agresiva.
- Prueba en una pestaña real, no solo en una vista previa. La vista previa de un conversor muestra la imagen, no el renderizado del navegador. Abre la página desplegada en Chrome, Firefox y Safari.
- Comprueba la ruta del manifest. Un
site.webmanifestreferenciado con una ruta relativa se rompe cuando la página se sirve desde un subdirectorio.
Aquí está el bloque <head> mínimo que debería producir un conversor, ajustado para un nombre de archivo versionado:
<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=3'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png?v=3'>
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16.png?v=3'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png?v=3'>
<link rel='manifest' href='/site.webmanifest'>Si tu conversor genera algo cercano a esto, estás en buena forma. Si solo genera una línea, tendrás que rellenar los huecos tú mismo.
Cuándo un conversor es la herramienta equivocada
Un conversor online es la elección correcta para un conjunto de iconos puntual. Es la elección equivocada cuando necesitas que los iconos se regeneren automáticamente en cada despliegue, o cuando el origen es un token de diseño vivo que cambia con frecuencia.
Para esos casos, una herramienta de paso de compilación o un script que ejecute la misma conversión localmente es más fiable. La salida es idéntica; la diferencia es la reproducibilidad.
Para un proyecto puntual, sin embargo, un conversor de favicon online elimina la parte tediosa —redimensionar, empaquetar el contenedor ICO y escribir el manifest— y te deja con la parte que realmente necesita a un humano: elegir una marca que se lea a 16 píxeles.