Tooooolbox
100% privado
15 de agosto de 2026 · 5 min de lectura
Un favicon es el pequeño icono que aparece en la pestaña de un navegador, junto al título de la página, y en los marcadores. Es diminuto, pero importa: un sitio sin favicon parece inacabado, mientras que un favicon claro hace que tu marca sea reconocible entre una fila de pestañas abiertas. La buena noticia: crear uno a partir de un logo o imagen existente solo lleva un par de minutos.
Como se muestra a unos 16×16 a 32×32 píxeles, un favicon tiene que funcionar siendo muy pequeño. Las formas simples y marcadas se leen bien; los logos detallados con líneas finas o texto pequeño se convierten en un borrón ilegible. Si tu logo es complejo, usa solo su elemento más reconocible — una sola letra, un símbolo, un monograma.
Una imagen de origen cuadrada funciona mejor, ya que el favicon en sí es cuadrado. Asegúrate de que la parte importante esté centrada con un poco de espacio alrededor para que nada se recorte.
El formato clásico de favicon es .ico, que puede contener varios tamaños en un solo archivo (16×16, 32×32, 48×48) para que el navegador elija el adecuado. Los navegadores modernos también aceptan favicons PNG, pero .ico sigue siendo el más compatible universalmente y la opción más segura.
Parte de una imagen de al menos 256×256 píxeles para que el icono se mantenga nítido al generarse en cada tamaño. Trabajar desde un logo cuadrado en alta resolución da el resultado más limpio.
Toma tu logo o imagen cuadrada y conviértelo en un archivo .ico. Suelta la imagen en nuestro conversor, elige ICO como salida y descarga el favicon — se ejecuta por completo en tu navegador, así que tu logo nunca se sube. Si tu origen no es cuadrado, recórtalo primero a cuadrado para que el icono no se distorsione.
Para el mejor resultado en todos los tamaños, genera el .ico a partir de una versión limpia y de alto contraste de tu marca en lugar de una foto a todo color recargada.
Coloca el archivo (normalmente llamado favicon.ico) en la carpeta raíz de tu sitio. La mayoría de los navegadores lo encontrarán automáticamente, pero es buena práctica referenciarlo también en el head del HTML con una etiqueta link: <link rel="icon" href="/favicon.ico">. Si usas un creador de sitios o un CMS, suele haber un campo de «favicon» o «icono del sitio» en los ajustes — solo sube el archivo que creaste.
Una vez en línea, quizá tengas que refrescar o vaciar la caché para ver el nuevo icono en la pestaña. Después, tu sitio se ve un poco más pulido en todos los lugares donde aparece.