Generador de favicon
Crea un paquete de favicon completo a partir de una imagen: 16x16, 32x32, icono de Apple, iconos de Android Chrome, un .ico combinado, el site.webmanifest y el HTML para pegar en <head>, todo en un zip. En tu navegador.
Prueba otra herramienta
Elegidas para acompañar a estaUn generador de favicons gratuito que prepara un paquete de iconos completo a partir de una sola imagen: los PNG sueltos en los tamaños estándar de favicon, el icono táctil de Apple y los de Android Chrome, un favicon.ico combinado para los navegadores antiguos, un archivo site.webmanifest y las etiquetas HTML exactas para pegar en el <head> de tu página, todo en un único zip. Se genera entero en tu navegador con la API de canvas: tu imagen no se sube a ninguna parte.
Cómo usar esta herramienta
- 01Escribe el nombre del sitio y el color del tema (opcional)Se usan para rellenar el archivo site.webmanifest que se genera.
- 02Sube una imagenLo mejor es una imagen cuadrada, a poder ser de al menos 512×512 píxeles, para que todos los tamaños salgan nítidos. Hasta 10 MB.
- 03Descarga el zip y pega el HTMLDescomprime los archivos en la raíz de tu sitio, o donde tengas los favicons, y pega las etiquetas <link> que se te dan en el <head> de la página.
¿Cuándo es útil?
- Montar los favicons de una web nuevaConsigues todos los tamaños estándar y el manifest de una vez, en lugar de redimensionar la misma imagen cinco veces a mano.
- Que el sitio se vea bien al añadirlo a la pantalla de inicioEl icono táctil de Apple y los tamaños de Android Chrome son justo los que usa cada plataforma cuando alguien añade tu sitio a su pantalla de inicio.
- Sustituir un favicon.ico suelto y anticuadoUna web actual se beneficia de un juego de iconos completo, no de un único .ico pequeño. Esto genera el juego moderno entero a partir del logotipo que ya tengas.
Ejemplos
- Qué se generafavicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, un favicon.ico combinado (16, 32 y 48 px) y un site.webmanifest.
- El bloque de HTMLUn bloque de etiquetas <link> listo para pegar que apunta a cada archivo generado, para que funcionen el icono de la pestaña, el de la pantalla de inicio de iOS y el de Android.
- Una imagen de origen que no es cuadradaSi la imagen que subes no es cuadrada, se centra y se escala para que quepa en cada lienzo cuadrado, en lugar de estirarla o deformarla.
Por qué justamente estos tamaños
16×16 y 32×32 son los tamaños de favicon de toda la vida, los que se ven en la pestaña del navegador y en los marcadores. 180×180 es el tamaño que documenta Apple para el icono táctil de la pantalla de inicio de iOS. 192×192 y 512×512 son los que se usan habitualmente en un Web App Manifest para el icono de pantalla de inicio y la pantalla de arranque de Android Chrome. El favicon.ico combinado, que lleva dentro 16, 32 y 48 px, cubre los navegadores antiguos que solo buscan ese archivo.
Todo ocurre en tu navegador
La imagen se redimensiona con la API de canvas dentro de tu dispositivo y no se sube a ningún servidor. El zip, con los PNG generados, el .ico y el manifest, también se construye en el navegador con una librería de compresión, y se te ofrece como descarga directa.
Para qué sirve el site.webmanifest
Un Web App Manifest es un archivo JSON pequeño que le dice al navegador cómo debe comportarse tu sitio cuando alguien lo añade a la pantalla de inicio, incluidos el nombre, los iconos y el color del tema. Esta herramienta genera un manifest mínimo y válido que apunta a los dos tamaños de Android Chrome; puedes ampliarlo si tu sitio necesita más campos.
Preguntas frecuentes
¿Se sube mi imagen a algún sitio?
No. Cada redimensionado ocurre en tu navegador con la API de canvas, y el zip también se monta ahí. Tu imagen no sale de tu dispositivo.
¿Y si mi imagen no es cuadrada?
Se centra y se escala para caber en cada tamaño cuadrado, respetando su proporción, en lugar de estirarse para rellenar el cuadrado.
¿Necesito todos estos archivos?
Para tener compatibilidad completa entre navegadores y dispositivos, incluidos los navegadores antiguos y las pantallas de inicio de iOS y Android, sí. Si solo quieres lo básico, favicon.ico y favicon-32x32.png cubren la mayoría de los navegadores actuales.
¿Se guardan mis datos?
No. Todo se genera en tu navegador y no se envía nada a ningún servidor.