Ir al contenido
WoowTools

Generador de favicon a partir de cualquier imagen

Convierte un logo en favicons PNG de 16×16 a 512×512, iconos de Apple y Android, con manifest.json y código HTML en un ZIP.

Gratis Funciona en tu navegador Sin registro

Cargando Generador de favicon…

Tus archivos nunca salen de tu dispositivo

Cómo usar Generador de favicon

  1. 1

    Abre Generador de favicon en esta página. Se carga directamente en tu navegador.

  2. 2

    Añade tu archivo, texto o valores y ajusta la configuración.

  3. 3

    Copia o descarga el resultado. No se sube ni se guarda nada.

Cómo crear un favicon para tu página web

El generador de favicon de WoowTools convierte un solo logotipo o imagen en el conjunto completo de iconos que necesita una web moderna: los pequeños favicons PNG de las pestañas del navegador, los iconos Apple touch para la pantalla de inicio del iPhone y el iPad, y los iconos de Android Chrome para aplicaciones web progresivas (PWA). Descarga cada icono por separado o todos a la vez en un ZIP que además incluye un manifest.json listo y un fragmento HTML con las etiquetas link para pegar en el head de tus páginas. Todo funciona en tu navegador, así que tu logo nunca se sube.

Tamaños de favicon disponibles

  • 16×16 y 32×32: pestañas, marcadores e historial (estándar y Retina).
  • 48×48 y 64×64: iconos de sitio y barra de tareas de Windows.
  • 96×96: Google TV; 128×128: Chrome Web Store.
  • 152×152, 167×167 y 180×180: iconos Apple touch para iPad, iPad Pro y iPhone.
  • 192×192 y 512×512: iconos de Android Chrome y de instalación PWA.

Hay siete tamaños preseleccionados (16, 32, 48, 152, 180, 192 y 512), que cubren prácticamente cualquier web. Marca o desmarca los que quieras, o usa Select All y Deselect All.

Cómo crear un favicon

  1. Sube tu logotipo en PNG, JPG, SVG, WebP u otro formato de imagen (hasta 10 MB). Una imagen cuadrada de al menos 512×512 píxeles da el resultado más nítido.
  2. Elige un color de fondo. Rellena las zonas transparentes y el espacio vacío alrededor de un logo que no sea cuadrado. Blanco, negro, azul, verde, ámbar o rojo con un clic, o cualquier color.
  3. Selecciona los tamaños y genera los iconos. Cada uno aparece con vista previa para comprobar si se lee bien en pequeño.
  4. Descarga los PNG uno a uno o todos juntos en favicons.zip.
  5. Sube los archivos a la raíz de tu web y pega las líneas de html-snippet.html dentro del <head> de tus páginas.

Qué contiene el ZIP

El ZIP incluye todos los PNG generados con nombres convencionales (por ejemplo favicon-32x32.png, apple-touch-icon-180x180.png o android-chrome-512x512.png), un manifest.json que enumera los iconos de Android y usa tu color de fondo como color de tema, y un fragmento HTML con etiquetas link para los iconos de 16, 32, 180, 192 y 512 píxeles, el manifest y una meta theme-color. Cambia el nombre de la app en el manifest.json antes de publicarlo.

Consejos para un buen favicon

  • Simplifica. Un logo completo con eslogan se vuelve ilegible a 16 px. Usa solo el símbolo o la inicial y revisa las vistas previas de 16 y 32 px.
  • Parte de un cuadrado. La imagen se ajusta dentro del cuadrado y se centra, sin deformarse. Recorta antes un logo alargado con el recortador de imágenes para que llene el icono.
  • ¿Logo vectorial? Expórtalo a un PNG grande con el conversor de SVG a PNG o diseña un símbolo sencillo con el creador de logotipos.
  • Elige bien el fondo. Los iconos generados tienen fondo sólido, así que usa un color de tu marca o uno que se vea bien en temas claros y oscuros.

Por qué usar este generador

Es gratis, no necesita cuenta y no añade ninguna marca a tus iconos. Como cada tamaño se dibuja en un lienzo dentro de tu navegador, tu logo aún no publicado se queda en tu equipo y el conjunto completo está listo en un segundo.

Funciones

  • 11 tamaños de icono de 16×16 a 512×512 px
  • Iconos Apple touch (152, 167, 180) y Android Chrome (192, 512)
  • ZIP con manifest.json y fragmento HTML de etiquetas link
  • Color de fondo para zonas transparentes o vacías
  • Mantiene las proporciones del logo y lo centra
  • Funciona en tu navegador, el logo nunca se sube

Preguntas frecuentes

¿Cómo hago un favicon para mi web?

Sube un logo cuadrado, elige el color de fondo y los tamaños, genera y descarga el ZIP. Sube los PNG a tu web y pega el fragmento HTML incluido en el head de la página.

¿Qué tamaño debe tener un favicon?

Los navegadores usan 16×16 y 32×32 px en las pestañas, iOS una apple-touch-icon de 180×180 px y Android iconos de 192×192 y 512×512 px. Esta herramienta los genera todos a partir de una imagen.

¿La herramienta crea un archivo favicon.ico?

No. Genera favicons PNG, compatibles con todos los navegadores modernos mediante las etiquetas link del fragmento HTML incluido.

¿Incluye un manifest.json?

Sí. El ZIP contiene un manifest.json con los iconos de Android y tu color de fondo como color de tema. Cambia el nombre de la app antes de publicarlo.

¿Puede el favicon tener fondo transparente?

El generador rellena las zonas transparentes con el color de fondo elegido, así que los iconos siempre tienen un fondo sólido visible en temas claros y oscuros.

¿Qué imagen funciona mejor?

Un logo o símbolo sencillo y cuadrado de al menos 512×512 píxeles. Los textos finos y las líneas delgadas desaparecen a 16 píxeles.

¿Se sube mi logo a un servidor?

No. Todos los iconos se crean en tu navegador y el archivo no sale de tu dispositivo.