Generador de favicon
Crea todos los tamaños de favicon a partir de una sola imagen.
Suelta tu logo aquí o haz clic para elegirlo
PNG, SVG, JPG, WebP o ICO. Lo mejor es un logo cuadrado de 512 × 512 px o más. Los archivos se procesan en tu navegador y nunca se suben. Se quedan en este navegador hasta que las quites.
Ctrl+OelegirCtrl+Vpegar
Un favicon es el pequeño icono que los navegadores muestran en las pestañas y los marcadores; los móviles usan versiones más grandes cuando alguien añade tu sitio a su pantalla de inicio. Suelta un logo y este generador crea todos los archivos que necesita una web (favicon.ico, favicons PNG, el Apple touch icon, iconos de Android y un manifiesto web) con vistas previas en directo y el HTML para pegar en tu página. Se ejecuta en tu navegador, así que tu logo nunca sale de tu dispositivo; es gratis y no requiere registro.
Cómo crear un favicon
- Suelta tu logo (PNG, SVG, JPG o WebP) en cualquier parte de la página, pégalo con Ctrl+V o haz clic para elegirlo. Una imagen que añadiste en otra herramienta de imagen ya está en la lista, tal como la dejaste allí: haz clic en su miniatura para usarla. El logo de muestra te permite probarlo sin archivo.
- El logo se encuadra solo: el símbolo de un logo ancho, o el logo sin sus bordes vacíos. Arrastra el cuadrado sobre el logo para cambiarlo, o elige Logo completo. Elige un fondo (primero aparecen los colores de tu logo), el margen y la forma; las vistas previas se actualizan al momento.
- Haz clic en Descargar todo (ZIP), coloca los archivos en la carpeta raíz de tu sitio y, después, haz clic en Copiar HTML y pega las etiquetas en el <head> de tu página.
Funciones
- favicon.ico con iconos de 16, 32 y 48 px, además de favicons PNG de 16 y 32 px
- apple-touch-icon.png (180 px) e iconos de Android Chrome (192 y 512 px)
- site.webmanifest con el nombre de tu app y el color del tema, y las etiquetas HTML para tu <head>
- Encuentra automáticamente el símbolo de un logo ancho; arrastra el cuadrado para usar otra parte o encaja el logo completo
- Fondo transparente, con los colores de tu logo o de cualquier color; margen del 0 al 30 %; forma cuadrada, redondeada o circular
- Vistas previas en directo de cada tamaño, de una pestaña del navegador y de una pantalla de inicio, en modo claro y oscuro
- Parte de PNG, SVG, JPG, WebP o ICO; todos los archivos en un único ZIP
¿Es privado?
Sí. Los iconos se crean en tu navegador con un motor de imagen de WebAssembly; tu logo y los archivos nunca salen de tu dispositivo. El logo se queda en este navegador hasta que lo quitas de la lista.
Preguntas frecuentes
¿Qué tamaños de favicon necesito?
Cuatro archivos cubren casi todo: favicon.ico con 16, 32 y 48 px para las pestañas del navegador, los marcadores y los accesos directos de Windows; un apple-touch-icon.png de 180 px para la pantalla de inicio del iPhone y el iPad; y PNG de 192 y 512 px, declarados en site.webmanifest, para Android y las aplicaciones web instalables. El ZIP los contiene todos, además de PNG de 16 y 32 px para los navegadores que prefieren PNG.
¿Cómo añado el favicon a mi HTML?
Coloca los archivos en la carpeta raíz de tu sitio, de modo que /favicon.ico se abra, y después haz clic en Copiar HTML y pega las etiquetas en el <head> de cada página. Los navegadores buscan /favicon.ico incluso sin ninguna etiqueta; las etiquetas añaden los tamaños PNG, el icono de Apple y el manifiesto.
¿Por qué apple-touch-icon.png tiene fondo?
Porque el iPhone y el iPad muestran en negro los píxeles transparentes y redondean ellos mismos las esquinas, así que el icono de Apple es siempre un cuadrado completo y opaco: con tu color de fondo, o blanco si el fondo es transparente. Los demás iconos conservan su transparencia y su forma.
¿Puedo usar un logo SVG?
Sí. Tu navegador dibuja el SVG a su propio tamaño, o a 1024 px si es más pequeño, y todos los iconos se crean a partir de ahí. Un SVG que enlaza otros archivos (imágenes, fuentes u hojas de estilo) no se puede dibujar completo como imagen, así que la herramienta te lo indica en lugar de crear iconos incompletos; antes, expórtalo como PNG o incrusta sus imágenes.
He cambiado mi favicon, pero el navegador sigue mostrando el antiguo. ¿Por qué?
Porque los navegadores guardan los favicons en caché durante mucho tiempo. Recarga la página con Ctrl+F5 (Cmd+Mayús+R en Mac) o abre el sitio en una ventana privada para ver el icono nuevo.