Trae tu identidad.
Sube tu logo o crea un icono a partir de una letra. Formas simples, contraste audaz y un lienzo cuadrado son tu mejor punto de partida.
Generador de Favicons Real en Línea Gratis
Generador de favicons gratuito en línea. Sube una imagen y descarga un kit completo de iconos: favicon.ico, iconos PNG, icono de Apple touch y manifest web, listos para pestañas del navegador, marcadores y pantallas de inicio de Android e iOS.
Una imagen cuadrada de 512 x 512 px o más funciona mejor.
Mantenlo simple. Una sola letra destaca en tamaños pequeños.
- Andale Mono
- Arial
- Arial Black
- Arial Narrow
- Baskerville
- Bookman
- Bradley Hand
- Brush Script
- Calibri
- Candara
- Century Gothic
- Chalkboard
- Comic Sans
- Consolas
- Copperplate
- Courier New
- Didot
- Franklin Gothic
- Futura
- Garamond
- Georgia
- Gill Sans
- Helvetica Neue
- Impact
- Inter
- JetBrains Mono
- Marker Felt
- Menlo
- Nunito
- Optima
- Palatino
- Papyrus
- Rockwell
- Segoe UI
- System UI
- Tahoma
- Times New Roman
- Trattatello
- Trebuchet MS
- Verdana
La disponibilidad de la fuente depende de tu dispositivo.
De borde a bordeEspacio para respirar
CuadradoCírculo
Ajustes de app e instalación
Ruta relativa a la raíz, como / o /icons/.
#FFFFFF
512 PX
PESTAÑA DEL NAVEGADOR
Mi sitio web
tu-web.com
PANTALLA DE INICIO
Mi sitio web
¿PÍXEL PERFECTO?
Compara tamaños pequeños.
16px
32px
48px
64px
Dentro de tu descarga
9 archivosfavicon.icoClassic browser support
16, 32, 48 pxfavicon-16x16.pngBrowser tabs
16 x 16favicon-32x32.pngHigh-density tabs
32 x 32favicon-48x48.pngSearch & shortcuts
48 x 48apple-touch-icon.pngiPhone & iPad
180 x 180android-chrome-192x192.pngAndroid home screen
192 x 192android-chrome-512x512.pngLarge app icon
512 x 512site.webmanifestWeb app metadata
JSONINSTALL.txtInstallation guide
TXTCódigo HTML
HTMLSube tus archivos y luego agrega esto dentro del <head> de tu sitio web. Las rutas se actualizan con tus ajustes.
DE LA SUBIDA A TODAS PARTES
Cómo funciona
Omite el redimensionado manual y las suposiciones de formato.
Ve de tu idea a un sitio web reconocible en tres pasos.
Perfecciona los detalles.
Elige un fondo, ajusta el espaciado y revisa las vistas previas en vivo. Asegúrate de que tu marca sea reconocible incluso en una pestaña diminuta del navegador.
Dale un hogar a cada pestaña.
Descarga tu kit completo, sube los archivos y pega el HTML. Tu marca está lista para pestañas del navegador, marcadores y pantallas de inicio.
HECHO PARA LOS PEQUEÑOS DETALLES
Funciona en navegadores y dispositivos
Un favicon suele ser la parte más pequeña de tu marca. Aun así debe sentirse intencional. Genera los tamaños correctos para los lugares donde la gente encuentra, guarda y vuelve a visitar tu sitio.
Crea tu faviconNavegadores cotidianosICO + PNG para pestañas, marcadores y accesos directos16-48 PX
Dispositivos AppleUn icono dedicado y opaco para la pantalla de inicio180 PX
Android y apps webIconos de alta resolución con un manifest web192 / 512
LA GUÍA DE DOS MINUTOS
Instalación
Sin configuración complicada.
Solo unos archivos en el lugar correcto.
Descarga y extrae tu kit de iconos
Elige tu origen y ajusta la vista previa, luego selecciona Descargar kit de favicons. Extrae el ZIP para obtener los siete archivos de icono, site.webmanifest y una guía de instalación en texto plano.
Coloca los archivos donde tu sitio web pueda servirlos
Sube los iconos y el manifest a la raíz pública de tu sitio. Si prefieres una subcarpeta, establece Directorio de iconos en los ajustes de la app antes de descargar. Por ejemplo, /icons/ significa que tus archivos deben estar disponibles en tu-sitio.com/icons/.
Agrega el HTML y verifica tu trabajo
Copia el código generado dentro del <head> de cada página o de tu diseño compartido. Elimina las etiquetas antiguas de iconos en conflicto. Abre las URL de los iconos directamente para verificar que carguen y luego vuelve a visitar tu sitio en una ventana privada para evitar iconos en caché obsoletos.
UN MEJOR ICONO EMPIEZA AQUÍ
Consejos de diseño de favicons
Menos detalle. Más carácter.
Las líneas finas y las palabras largas desaparecen en tamaños pequeños. Usa un símbolo distintivo, un monograma o una sola letra en lugar de apretar todo tu logo en un cuadrado.
Dale un poco de espacio.
Usa relleno para mantener tu marca alejada de los bordes. Previsualiza una pestaña del navegador y una pantalla de inicio: la misma imagen puede sentirse muy diferente en cada escala.
Haz que el contraste cuente.
Los iconos transparentes pueden desaparecer contra un tema de navegador claro u oscuro. Un fondo sólido te da un contraste predecible. Revisa ambos temas antes de lanzar.
Empieza con un origen nítido.
Una imagen grande y limpia le da al generador más detalle con el que trabajar. Ampliar una imagen diminuta no puede recuperar información faltante. Usa un SVG o un origen de 512 px cuando sea posible.
LOS DETALLES MÁS FINOS
Preguntas frecuentes
Todo lo demás que quizá quieras saber sobre tu nuevo favicon.
¿Qué es un favicon y por qué necesito uno?
Un favicon es el icono pequeño que representa tu sitio web en pestañas del navegador, marcadores, historial y, a veces, resultados de búsqueda. Un icono claro y consistente ayuda a los visitantes a reconocer tu sitio entre muchas pestañas abiertas. Los iconos de la pantalla de inicio cumplen un propósito similar cuando alguien guarda tu sitio en un teléfono.
¿Qué imagen debería subir?
Empieza con un PNG, SVG, JPEG o WebP cuadrado, idealmente de al menos 512 x 512 píxeles. Los PNG transparentes y los SVG autocontenidos funcionan especialmente bien. Mantén el diseño simple: un símbolo o inicial suele ser más legible que una wordmark completa a 16 píxeles. Se admiten archivos de hasta 10 MB e imágenes de hasta 4096 píxeles por lado.
¿Esta herramienta es gratis? ¿Se suben mis imágenes?
El generador es gratuito, sin cuenta ni marca de agua. La decodificación de imágenes, las vistas previas y la creación del ZIP ocurren en tu navegador. Tu imagen de origen no se sube a ningún servidor. Tu navegador puede descargar los recursos del sitio cuando lo visitas por primera vez, pero el generador no envía tu imagen a ningún lugar.
¿Por qué los iconos de Apple y Android tienen un fondo?
Los iconos de la pantalla de inicio se ven mejor sobre un lienzo cuadrado sólido. Esta herramienta aplana esas exportaciones sobre el color de fondo que elijas, incluso cuando los iconos transparentes del navegador están habilitados. El dispositivo aplica su propio tratamiento de esquinas. Las exportaciones de Android usan el propósito estándar "cualquiera"; no son iconos maskable certificados.
¿Por qué sigue apareciendo mi favicon antiguo?
Los navegadores almacenan en caché los favicons de forma agresiva. Primero verifica que cada URL generada se abra directamente y que tu página tenga solo un conjunto previsto de enlaces de icono. Luego prueba con una ventana privada o limpia la caché del sitio. Para una actualización confiable, usa una carpeta nueva como /icons-v2/ y actualiza los enlaces HTML. Los motores de búsqueda pueden tardar más en volver a rastrear el icono.
¿El manifest web convierte mi sitio web en una PWA?
No. El manifest proporciona un nombre de app, colores e iconos, pero no agrega funcionalidad sin conexión ni un service worker. La instalabilidad depende de tu navegador y de la configuración del sitio, incluido HTTPS. El manifest generado usa / como su URL de inicio; edítalo si tu app vive en una subdirectorio.
¿Puedo usar estos archivos con WordPress, Shopify o Astro?
Sí. Los archivos son imágenes PNG e ICO estándar. En Astro, colócalos en public/ y agrega las etiquetas generadas al head de tu diseño compartido. Para WordPress o Shopify, usa el ajuste de icono del sitio de la plataforma cuando sea posible, o sube los archivos y ajusta el head de tu tema. Las plataformas alojadas pueden controlar los nombres de archivo y las URL, así que adapta las rutas para que coincidan.