Cómo usar: Generador de favicons
- Elige «Texto / emoji» y escribe una letra o selecciona un emoji, o bien cambia a «Imagen» y arrastra tu logotipo (lo mejor es usar un archivo SVG o un PNG cuadrado de 512 píxeles o más).
- Ajusta los colores, el tamaño del texto, el relleno y el redondeo de las esquinas mientras ves la vista previa en la pestaña del navegador a un tamaño real de 16 px.
- Introduce el nombre de tu sitio y el color del tema para el manifiesto web.
- Haz clic en «Descargar todo (ZIP)», sube los archivos a la carpeta raíz de tu sitio web y pega el fragmento de código HTML en
<head>. En Webflow, sube el favicon de 32×32 y el webclip de 256×256 en la sección «Configuración del sitio».
¿Qué es un favicon?
Un favicon es ese pequeño icono que los navegadores muestran en las pestañas, los marcadores y el historial, y que Google muestra junto al nombre de tu sitio web en los resultados de búsqueda tanto en móvil como en ordenador. Los móviles también usan versiones más grandes cuando alguien añade tu sitio web a su pantalla de inicio. Hoy en día, un conjunto completo es bastante pequeño: un archivo ICO para solicitudes antiguas y predeterminadas /favicon.ico , un PNG para navegadores modernos, un icono táctil de Apple, dos iconos para Android/PWA referenciados desde el manifiesto de una aplicación web y, opcionalmente, un SVG.
Lo que crea este generador
| Archivo | Tamaño | Utilizado por |
|---|---|---|
favicon.ico | 16, 32 y 48 píxeles en un solo archivo | Todos los navegadores, accesos directos de Windows, herramientas que solicitan /favicon.ico directamente |
favicon-32x32.png | 32 × 32 | Pestañas de los navegadores modernos; el tamaño que pide Webflow |
apple-touch-icon.png | 180 × 180 | Pantalla de inicio del iPhone/iPad y Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Pantalla de inicio de Android, instalación de la PWA y pantalla de bienvenida |
webclip-256x256.png | 256 × 256 | Configuración de Webclip en Webflow |
site.webmanifest | JSON | Nombre, colores y lista de iconos para sitios instalables |
El archivo ICO se genera directamente en tu navegador: un pequeño encabezado ICO y un directorio, seguidos de tres imágenes comprimidas en formato PNG, un formato que leen todos los navegadores actuales y todas las versiones de Windows. No se sube nada.
Recomendaciones para el favicon
- Diseña para 16 px. Los detalles finos y las palabras largas desaparecen al tamaño de la pestaña. Una sola letra en negrita, un símbolo sencillo o un emoji se leen mucho mejor que un logotipo completo con eslogan.
- Los iconos táctiles de Apple deben ser opacos. iOS redondea las esquinas por sí mismo y rellena los píxeles transparentes con negro, por lo que esta herramienta siempre exporta el icono de 180 px (y el webclip de Webflow) como un cuadrado completo con fondo sólido.
- Comprueba el modo oscuro. Un logotipo oscuro sobre fondo transparente desaparece en una pestaña oscura del navegador; la vista previa muestra ambos temas. Añade un color de fondo o un relleno si es necesario.
- Google Search requiere un favicon cuadrado que se pueda rastrear y recomienda uno de más de 48×48 px, por eso el fragmento de código también enlaza el PNG de 192 px. Los cambios pueden tardar días en aparecer en los resultados de búsqueda.
- Almacenamiento en caché: los navegadores almacenan los favicons en caché de forma muy intensa. Si sustituyes uno, pruébalo en una ventana privada o añade una consulta de versión como
/favicon.ico?v=2.
Cómo añadir un favicon en Webflow
Ve a Configuración del sitio → General y desplázate hasta Favicon y Webclip. Sube una imagen de 32×32 px como favicon y otra de 256×256 px como webclip (que se usa como icono táctil de Apple), guarda y publica el sitio. Webflow genera las <link> etiquetas automáticamente, así que no necesitas el fragmento de HTML ni el manifiesto a menos que los añadas mediante código personalizado. Para comprobar después qué está activo, el «Meta Tag Checker» muestra las etiquetas del favicon y del icono táctil de Apple.
También se busca como: favicon, favicon.ico, convertidor de ico, de png a ico, icono de apple touch, site.webmanifest, favicon de emoji, webclip.
Herramientas que combinan con: Generador de favicons
- PWA Manifest Generator — Make any website an installable PWA.
- Cambiador de tamaño de imágenes — Cambia el tamaño de una foto a unas dimensiones exactas en píxeles o a un porcentaje, recórtala para que se adapte al tamaño de las redes sociales o encájala en un marco con un color de fondo, todo ello directamente en tu navegador.
- Generador de imágenes OG — Crea en cuestión de segundos una imagen de vista previa del enlace con un acabado impecable para Facebook, LinkedIn, X, Slack y WhatsApp: elige una plantilla, escribe el título, añade un logotipo y, a continuación, descárgate el archivo PNG y las metaetiquetas correspondientes.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
favicon.ico, un PNG de 32×32, un icono táctil de Apple de 180×180 y PNG de 192×192 y 512×512 para Android. Este generador los crea todos a partir de un único archivo original.¿Sigo necesitando un archivo favicon.ico?
/favicon.ico desde la raíz del sitio, incluso sin una <link> , así que tener uno ahí evita los errores 404 y que falten los iconos.¿Qué tamaños de favicon necesita Webflow?
favicon-32x32.png y webclip-256x256.png del archivo ZIP.¿Puedo usar un emoji como favicon?
¿Por qué no se ve mi nuevo favicon?
?v=2) a las URL de los iconos. Puede que Google Search tarde días o semanas en volver a rastrearlo.