Generador de favicons online
Crea todos los favicons que necesita tu web a partir de una sola imagen.
Informar de un problema con esta herramienta
Cómo usar Generador de favicon
Añade tu logo o imagen
Suelta un PNG, JPG, WebP, GIF o SVG en la página. Funciona mejor una imagen cuadrada con una forma sencilla.
Ajusta el aspecto
Recorta a cuadrado o encaja la imagen completa, elige un fondo transparente o de color, añade margen y redondea las esquinas. La vista previa muestra cada tamaño y una pestaña del navegador.
Descarga y añade el código
Descarga el ZIP, sube los archivos a la carpeta raíz de tu sitio y pega las líneas HTML en el head de tus páginas.
Por qué usar Utils365
El set completo
favicon.ico con 16, 32 y 48 px dentro, favicons PNG, el icono Apple touch, iconos de Android y site.webmanifest, todos con los nombres que esperan los navegadores.
Míralo antes de descargar
Comprueba cómo se ve el icono a sus tamaños reales y en pestañas claras y oscuras, para que no se pierdan los detalles pequeños.
Privado por diseño
Todo ocurre en tu navegador, así que tu logo nunca se sube a un servidor.
Preguntas frecuentes
¿Qué tamaños de favicon necesito?
Un favicon.ico (16, 32 y 48 px) cubre las pestañas y los marcadores, un icono Apple touch de 180 px cubre las pantallas de inicio de iPhone y iPad, y los PNG de 192 y 512 px cubren Android y las apps web instaladas. Esta herramienta los crea todos desde una imagen.
ICO, PNG o SVG: ¿qué formato de favicon uso?
Los tres. favicon.ico funciona en todas partes, incluidos navegadores antiguos y herramientas que lo buscan automáticamente. Los favicons PNG se ven nítidos a tamaños fijos. Un favicon SVG se ve nítido a cualquier tamaño; obtienes uno si partes de un SVG.
¿Qué es un apple-touch-icon?
Es el icono que usan el iPhone y el iPad cuando alguien añade tu sitio a la pantalla de inicio. Mide 180 × 180 px y no puede ser transparente, así que se guarda con un fondo sólido (blanco si elegiste transparente). iOS redondea las esquinas por su cuenta.
¿Dónde pongo los archivos del favicon?
Descomprímelos en la carpeta raíz de tu sitio web, junto a tu página de inicio, para que favicon.ico esté en tusitio.com/favicon.ico. Después pega las líneas HTML que se muestran en esta página en la sección head de cada página o en la plantilla de tu sitio.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons mucho tiempo. Abre directamente la dirección del favicon, haz una recarga forzada o prueba en una ventana privada para ver el nuevo.