Estilo
Manifiesto de la aplicación web
Aquí verás tu favicon en todos los tamaños, con los archivos para descargar.
Todo se dibuja en tu navegador con canvas. Tu imagen no se sube a ningún sitio.
Sobre el generador de favicon
Un favicon es el pequeño icono que los navegadores muestran en las pestañas, los marcadores y el historial, y los teléfonos usan una versión más grande cuando alguien añade tu web a la pantalla de inicio. Parte de tu logo, una letra o un emoji, elige el fondo, la forma y el margen, y el generador dibuja en tu navegador todos los archivos que necesita una web, listos para descargar en un ZIP.
Cómo usar el generador de favicon
-
Elige el origen
Suelta una imagen en la pestaña Imagen, escribe de 1 a 3 caracteres en la pestaña Texto y elige fuente y grosor, o escoge un emoji en la pestaña Emoji.
-
Ajusta el estilo
Elige un color de fondo o hazlo transparente, escoge una forma cuadrada, redondeada o circular y ajusta el margen. La vista previa muestra todos los tamaños y cómo queda el icono en una pestaña del navegador.
-
Descárgalo y añádelo a tu web
Pulsa Descargar todo (.zip), sube los archivos a la raíz de tu web y pega el fragmento HTML en el <head> de tus páginas.
Casos de uso
Un favicon para una web nueva
Convierte tu logo en favicon.ico, los tamaños PNG y el icono de Apple de una vez, en lugar de exportar cada tamaño a mano.
Un icono rápido sin logo
Los proyectos personales, la documentación y las herramientas internas también necesitan un icono de pestaña. Tus iniciales o un emoji sobre un fondo de color se leen bien a 16 px.
Aplicaciones web que se pueden instalar
Los iconos de 192 y 512 px y el site.webmanifest son los iconos y colores que usan Android y Chrome cuando alguien instala tu web o la añade a la pantalla de inicio.
Preguntas frecuentes
¿Qué archivos de favicon necesito de verdad?
favicon.ico funciona en todos los navegadores, también en los antiguos, y es el archivo que piden en /favicon.ico cuando una página no enlaza ningún icono. Añade apple-touch-icon.png (180 px) para la pantalla de inicio de iPhone y iPad, y site.webmanifest con los iconos de 192 y 512 px para Android. Los PNG de 16 y 32 px y favicon.svg son extras que los navegadores actuales pueden preferir.
¿Por qué el icono de Apple nunca es transparente ni redondo?
iOS redondea por su cuenta las esquinas de los iconos de la pantalla de inicio y rellena de negro las zonas transparentes, así que el generador siempre dibuja apple-touch-icon.png como un cuadrado opaco: con tu color de fondo, o en blanco si el fondo es transparente.
¿Por qué no hay favicon.svg cuando uso una imagen?
El favicon SVG solo se genera para texto y emoji, que puede describir como texto vectorial. Una imagen se dibuja en los archivos PNG e ICO. Si tu logo ya es un SVG, puedes subir ese archivo como favicon.svg por tu cuenta.
¿Mi favicon se verá igual en todas partes?
Los archivos PNG e ICO son píxeles, así que se ven igual en todas partes. favicon.svg lo dibuja el navegador de cada visitante con las fuentes y los emoji de su dispositivo, así que una letra o un emoji pueden verse algo distintos, y los navegadores que no admiten favicon SVG usan los archivos ICO o PNG.
¿Se sube mi imagen?
No. La imagen se lee y se dibuja con canvas en tu navegador, y los archivos ICO y ZIP también se crean ahí. Solo tus ajustes, no la imagen, se recuerdan en este navegador para tu próxima visita.
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.