Crear un favicon online: generadores gratis y código para tu web
Para crear un favicon online basta con subir tu logo o una imagen cuadrada a un generador gratuito, descargar el paquete de iconos que te da y copiar en la cabecera de tu web las líneas de código que acompañan a los archivos. Es cuestión de minutos. Lo que conviene cuidar es la imagen de partida y el código, porque de eso depende que el icono se vea bien en las pestañas, en el móvil y en los resultados de Google.
El favicon es el icono pequeño que aparece en la pestaña del navegador, en los marcadores y al lado del nombre de tu web en los resultados de búsqueda de Google.
Generadores de favicon online
Los tres siguen la misma idea. Subes la imagen, la recortas si hace falta y descargas los archivos con todos los tamaños.
- Genfavicon, el que recomendaba esta entrada en 2012, sigue funcionando y está en español. Acepta JPG, PNG, WebP y SVG de hasta 4 MB y genera el favicon.ico, PNG desde 16×16 hasta 512×512 e iconos para Apple.
- favicon.io crea el favicon a partir de una imagen, de un texto o iniciales, o de un emoji. El paquete trae favicon.ico, PNG de 16 y 32 píxeles, el icono de Apple de 180, los de Android de 192 y 512 y el archivo site.webmanifest.
- RealFaviconGenerator es el más completo. Genera también el favicon en SVG, te enseña cómo quedará el icono en iOS, Android y Google, y te da el código HTML con instrucciones. Tiene un comprobador para revisar el favicon una vez publicado.
Los tres te piden subir la imagen a su web. Con un logo que ya es público no suele haber problema, pero si prefieres no subir nada, el favicon.ico también se puede hacer en el ordenador con GIMP, que es gratuito. Abres la imagen cuadrada, eliges Archivo > Exportar como (Ctrl + Mayús + E), escribes un nombre acabado en .ico y pulsas Exportar. Los PNG del código de más abajo se exportan igual, a su tamaño y con la extensión .png.
Qué imagen usar
Parte de una imagen cuadrada y grande, por ejemplo de 512×512 píxeles, porque reducir siempre queda mejor que ampliar. Y piensa que se va a ver a 16 o 32 píxeles: un logo con texto pequeño o muchos detalles se convierte en una mancha. Suele funcionar mejor el símbolo de la marca, o una inicial, con buen contraste.
Si quieres que salga en Google, la guía de Google sobre iconos de página pide que sea cuadrado (proporción 1:1), de al menos 8×8 píxeles, y recomienda 48×48 o más. Admite BMP, GIF, ICO, PNG, JPEG, PPM y TIFF.
El código para la cabecera de tu web
Sube los archivos a la raíz de tu web y añade en el <head> de la página algo así, con los nombres de archivo que te haya dado el generador:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Esta entrada recomendaba antes rel="shortcut icon". Hoy la documentación de MDN dice que shortcut no cumple los estándares y que no se debe usar más. El valor correcto es icon. Google sigue aceptando el antiguo, pero no hay motivo para escribirlo en una web nueva.
Si pones varios rel="icon", el navegador elige el más adecuado según los atributos type, sizes y media. Por eso los generadores dan varias líneas.
Si no aparece en Google
Google tarda en recogerlo, porque tiene que volver a rastrear tu página principal, y eso puede ir de unos días a varias semanas. Si pasa el tiempo y no sale, revisa lo que pide su guía:
- El código tiene que estar en la página principal de tu dominio o subdominio. Google solo admite un favicon por nombre de host, y no en subdirectorios.
- Google tiene que poder rastrear la página principal y el archivo del icono, así que no lo bloquees en el robots.txt.
- La URL del favicon tiene que ser estable, sin cambiarla a menudo.
Para acelerarlo puedes pedir la indexación de tu página principal con la herramienta de inspección de URLs de Search Console. Aun así, Google no garantiza que el icono aparezca aunque cumplas todo.
Si tu web es un WordPress con un tema que use el personalizador, no hace falta tocar código. En la sección Identidad del sitio del personalizador está el ajuste Icono del sitio, que pide una imagen cuadrada de al menos 512 píxeles de ancho y alto.
Revisado y actualizado en octubre de 2026.
Deja un comentario