Tienes un logo, y tu web necesita un favicon: esa imagen minúscula de la pestaña del navegador. Fácil, hasta que descubres que los navegadores, el iPhone, los móviles Android y Windows quieren cada uno su propio tamaño y su propio archivo. El generador de favicons de GetPlugzz lo hace todo con una sola imagen. Sueltas tu logo, pulsas un botón y obtienes favicon.ico, un icono de Apple, iconos de Android, un mosaico de Windows, un archivo manifest y el código para pegar en tu web. Funciona en tu navegador, así que no hay cuenta, ni marca de agua, y no se sube nada.
¿Cómo se crea un favicon en todos los tamaños a partir de una sola imagen?
Abre el generador de favicons y haz esto:
- Añade una imagen. Suelta tu logo en el recuadro o haz clic para elegirlo. Lo mejor es una imagen cuadrada de al menos 512 × 512 píxeles. Cualquier otra se recorta a un cuadrado desde el centro.
- Revisa la vista previa. Si tu imagen tiene fondo transparente, se conserva, lo que es perfecto para logos. Verás todos los tamaños que se van a crear.
- Descarga. Pulsa Descargar todo (ZIP) para obtener todos los tamaños, y pega el código que se muestra en el head de tu web. Hay un botón Copiar para el código.
No hay nada que redimensionar a mano ni nada que instalar. Si el navegador bloquea la descarga, haz clic en Permitir junto a la barra de direcciones y sigue adelante.
¿Por qué un favicon necesita tantos tamaños?
Piensa en una cabina de fotos que imprime la misma imagen como una pegatina diminuta, una foto de pasaporte y un póster. Es la misma cara, pero cada sitio tiene su propio marco. Un favicon funciona igual. Tu logo aparece en sitios distintos, y cada uno pide un tamaño diferente:
- 16 × 16 y 32 × 32: la pestaña del navegador. La de 32 mantiene la nitidez en pantallas de alta resolución (retina).
- 48 × 48: los accesos directos de Windows.
- 150 × 150: el mosaico de Windows.
- 180 × 180: el icono de Apple (touch icon), que usan los iPhone y iPad cuando alguien añade tu web a la pantalla de inicio.
- 192 × 192 y 512 × 512: Android, para la pantalla de inicio y la pantalla de bienvenida (también se usan para aplicaciones web).
¿Qué hay dentro del archivo ZIP?
La herramienta crea todo esto por ti y lo empaqueta en un solo archivo:
- favicon.ico: el icono clásico de las pestañas del navegador. Es un archivo real de varios tamaños, con las versiones de 16, 32 y 48 dentro.
- favicon-16x16.png, favicon-32x32.png y favicon-48x48.png: los tamaños pequeños.
- apple-touch-icon.png: el icono para iPhone y iPad.
- android-chrome-192x192.png y android-chrome-512x512.png: los iconos para Android.
- mstile-150x150.png: el mosaico de Windows.
- site.webmanifest: le dice a los navegadores qué iconos usar.
- head-snippet.html: el código para pegar, guardado como archivo.
¿Dónde van los archivos?
Sube los archivos a la carpeta principal de tu web y pega el código de la herramienta en el head de tus páginas. Ese código es el que le dice al navegador dónde encontrar cada icono. Dos consejos pequeños: abre site.webmanifest y añade el nombre de tu web, porque queda vacío, y cambia el color del tema si quieres algo distinto del blanco.
¿Todavía no tienes una web donde subirlos? Nuestra guía para lanzar tu primera página web cubre el dominio, el hosting y las páginas. Si prefieres no empezar desde una página en blanco, un AI website builder (enlace patrocinado) de Bluehost incluye hosting, así que tendrías dónde poner los archivos.
¿Qué imagen funciona mejor?
- Cuadrada y grande. Empieza con al menos 512 × 512 píxeles. La herramienta la reduce a todos los tamaños, así que nunca tienes que redimensionar nada tú mismo.
- Centrada. Una imagen que no es cuadrada se recorta a un cuadrado desde el centro, así que deja lo importante en medio.
- La transparencia va bien. Si tu logo tiene fondo transparente, los iconos lo conservan.
- Lo simple gana. Con 16 píxeles hay muy poco espacio, así que una forma marcada o una sola letra se lee mejor que un dibujo con detalles.
Una cosa que conviene saber: una imagen cada vez
El generador crea todos los tamaños a partir de una imagen de una vez. No procesa muchos logos distintos de golpe. Si tienes otra web, pulsa Elegir otra imagen y vuelve a empezar, lo que lleva unos segundos.
Conviene saber antes de empezar
- Una imagen que no es cuadrada se recorta desde el centro. Usa una imagen cuadrada para que no se corte nada.
- Dale al icono de Apple un fondo sólido: los iPhone rellenan de negro las zonas transparentes.
- A 16×16 píxeles los detalles finos desaparecen, así que una forma sencilla funciona mejor.
- Los navegadores y Google guardan los favicons antiguos un tiempo; uno nuevo puede tardar días en aparecer.
- Escribe el nombre de tu sitio en site.webmanifest y sube todos los archivos a la carpeta principal de tu sitio.
Preguntas frecuentes
Sí. No hay cuenta y no hay marca de agua.
No. Los iconos se crean en tu navegador y tu imagen nunca sale de tu dispositivo.
Empieza con una imagen cuadrada de al menos 512 × 512 píxeles. La herramienta la reduce a todos los tamaños que necesitas, así que no tienes que redimensionar nada tú mismo.
Sí. Si tu logo tiene fondo transparente, se mantiene transparente en los iconos.
Súbelos a la carpeta principal de tu web y pega el código de la herramienta en el head de tus páginas.
Generador de Favicons gratis — todos los tamaños, una imagen
Una imagen dentro, todos los tamaños de icono fuera: ico, Apple, Android, Windows y el código para pegar. Creado por GetPlugzz, hecho por completo en tu navegador.
