Crea favicons para todos los navegadores y dispositivos
Este generador de favicon convierte una sola imagen en todos los archivos de favicon que un sitio web necesita: el favicon.ico multitamaño, PNG individuales desde 16×16 hasta 512×512, un Apple Touch Icon y un manifiesto PWA. Sube un logo o una imagen, ajusta la apariencia y descarga un paquete listo para usar.
Está pensado para cualquiera que publique un sitio: desarrolladores, diseñadores, blogueros y dueños de pequeños negocios que quieren un icono nítido en la pestaña sin redimensionar y convertir cada tamaño a mano. Acepta imágenes en PNG, JPG, SVG, WebP y GIF, y puedes darle forma, margen y color al icono antes de exportarlo.
Cómo crear un favicon
Sube tu imagen
Haz clic en el área de carga o arrastra un archivo. Se admiten PNG, JPG, SVG, WebP y GIF. Para el resultado más nítido, usa una imagen cuadrada de al menos 512×512 píxeles.
Personaliza la apariencia
Elige una Forma — Cuadrado, Redondeado o Círculo —, opta por un fondo Transparente o un Color sólido y arrastra el control de Margen interno (0–40%) para darle aire al icono.
Previsualiza cada tamaño
La cuadrícula de vista previa muestra tu favicon en cada tamaño estándar, y una simulación de pestaña del navegador muestra exactamente cómo se verá en una pestaña real. Todo se actualiza al instante a medida que ajustas la configuración.
Descarga lo que necesites
Obtén el favicon.ico (16/32/48), un único PNG de 32×32, el icono Apple Touch de 180×180, o usa Descargar todo para un ZIP con cada tamaño más el HTML y un manifiesto.
Funciones
Carga arrastrando y soltando
Suelta una imagen o usa el selector de archivos. Acepta archivos PNG, JPG, SVG, WebP y GIF como origen.
Opciones de forma
Elige Cuadrado para el favicon clásico, Redondeado para esquinas suaves o Círculo para un icono estilo app.
Fondo y margen interno
Mantén un fondo transparente o define un color sólido, y luego ajusta el margen interno de 0% a 40%.
Simulación en vivo de la pestaña
Mira exactamente cómo aparece tu favicon en una pestaña real del navegador, actualizándose al instante con cada ajuste.
Vista previa en 8 tamaños
Revisa el icono en 16, 32, 48, 64, 128, 180, 192 y 512 píxeles antes de descargar.
Salida en ICO y PNG
Exporta favicon.ico con 16/32/48 incrustados, un único PNG de 32×32 o el icono Apple Touch de 180×180.
Paquete ZIP completo
Descargar todo reúne favicon.ico, los 8 tamaños PNG, HTML listo para pegar y un site.webmanifest.
Listo para Apple y PWA
Incluye el apple-touch-icon y un manifiesto con iconos de 192 y 512 para soporte de Android y PWA.
Privado y sin conexión
Cada redimensión y conversión ocurre en tu navegador — las imágenes nunca se suben y nada se registra.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
Parte de una imagen cuadrada de al menos 512×512 píxeles para que incluso la salida más grande quede nítida. El icono de la pestaña del navegador suele ser de 16×16 y 32×32, pero los sitios modernos también usan 48×48, un Apple Touch Icon de 180×180 y 192×192 / 512×512 para Android y PWA. Esta herramienta genera todos ellos a partir de tu única imagen.
¿Cómo genero un favicon.ico?
Sube tu imagen, ajusta la forma, el fondo y el margen interno, y luego haz clic en la descarga ICO. La herramienta crea un único favicon.ico que incrusta las versiones de 16×16, 32×32 y 48×48, que es el formato clásico que los navegadores buscan en la raíz de tu sitio.
¿Puedo crear un favicon desde un PNG o un SVG?
Sí. Puedes subir un PNG, JPG, SVG, WebP o GIF como origen. Un PNG de alta resolución o un SVG vectorial da el resultado más limpio porque se reduce a los tamaños pequeños sin verse borroso. Las imágenes no cuadradas se ajustan y centran manteniendo su proporción.
¿Cuál es la diferencia entre favicons ICO y PNG?
ICO es el formato tradicional de favicon que guarda varios tamaños en un solo archivo y los navegadores lo admiten de forma nativa. Los favicons PNG son archivos individuales referenciados por tamaño con etiquetas link de HTML. Para la mayor compatibilidad, usa ambos: un favicon.ico como respaldo más los PNG para navegadores modernos — el paquete Descargar todo los incluye juntos.
¿Cómo agrego un favicon a mi HTML?
Coloca los archivos de favicon descargados en el directorio raíz de tu sitio web y luego pega las etiquetas link en el <head> de tu página. El ZIP de Descargar todo incluye un archivo favicon-usage.html con las etiquetas <link> exactas para el icono, el Apple Touch Icon y el manifiesto, para que las copies directamente.
¿Qué forma debería elegir?
Cuadrado es el aspecto estándar para la mayoría de los sitios web. Redondeado añade esquinas suaves para un toque moderno y amable, y Círculo va bien con iconos estilo app, en especial para una PWA o la pantalla de inicio de un móvil. La cuadrícula de vista previa te deja comparar cada forma con tu logo antes de exportar.
¿Puedo usar un fondo transparente?
Sí — transparente es la opción predeterminada y funciona bien para logos que se muestran sobre fondos de página distintos. Algunas plataformas, como iOS, colocan un panel blanco o negro detrás de los iconos transparentes, así que si vas a generar un Apple Touch Icon quizá prefieras definir un color de fondo sólido.
Aún no hay comentarios. ¡Sé el primero en comentar!