Generador de Favicon: crea favicon.ico e iconos PNG
Sube cualquier imagen y genera un conjunto completo de favicons, .ico, tamaños PNG y Apple Touch Icon, listo para añadir a tu sitio web.
Arrastra una imagen aquí o haz clic para elegir
JPG, PNG, WebP o SVG. Las imágenes cuadradas funcionan mejor
Tamaño máximo de archivo: 50MB
El favicon es el pequeño icono que aparece en las pestañas del navegador, los marcadores, el historial y los accesos directos de la pantalla de inicio. Un favicon de 16×16 puede parecer trivial, pero aparece en cientos de contextos durante la navegación de cada visitante, y un favicon ausente o genérico hace que un sitio parezca inacabado. Para crear un favicon que funcione en todas partes, un sitio web moderno necesita varios tamaños: 16×16 y 32×32 para las pestañas del navegador, 180×180 para el Apple Touch Icon (acceso directo en la pantalla de inicio del iPhone), 192×192 y 512×512 para el manifest de PWA en Android y un favicon.ico multirresolución para la raíz del dominio. Esta herramienta genera todos los tamaños necesarios a partir de una sola imagen, por completo en tu dispositivo.
Cómo crear un favicon
- Abre tu imagen de origen. Empieza con una imagen cuadrada (mismo ancho y alto) de al menos 512×512 píxeles. El logotipo de tu empresa, el icono de tu app o un símbolo o letra simple funcionan mejor. La imagen de origen se reduce a cada tamaño de favicon, así que parte de la versión más grande y de mayor calidad disponible.
- Previsualiza todos los tamaños. La herramienta muestra vistas previas de cada tamaño (16×16, 32×32, 48×48, 180×180, 192×192, 512×512), para que veas cómo queda tu imagen en tamaños pequeños antes de descargar. Los detalles visibles a 512×512 suelen volverse invisibles o confusos a 16×16.
- Descarga el paquete de favicons. Haz clic en Descargar todo para obtener un archivo ZIP con todos los favicons generados, más las etiquetas HTML
<link>recomendadas para añadir a la sección<head>de tu sitio. - Añádelo a tu sitio web. Coloca los archivos de favicon en el directorio raíz de tu sitio (o en la ruta indicada en las etiquetas de enlace) y añade el fragmento de HTML proporcionado a tu sección
<head>. Prueba en varios navegadores para confirmar que el favicon se muestra correctamente.
Consejos para un mejor resultado
- Empieza con un SVG o una imagen de alta resolución. El generador reduce tu imagen de origen a tamaños diminutos. Parte de un SVG (independiente de la resolución) o al menos de un PNG de 512×512 para obtener resultados nítidos en todos los tamaños de salida. Para SVG, usa el convertidor de SVG a PNG para rasterizar a 512×512 primero si hace falta.
- Simplifica para los tamaños pequeños. Los logotipos complejos con detalles finos, líneas delgadas o texto pequeño se ven sucios a 16×16 píxeles. Considera crear una versión simplificada de tu logotipo, solo el símbolo o una letra, para usar como favicon en lugar de la marca completa.
- Prueba en modo oscuro. Los navegadores muestran los favicons en barras de pestañas claras y oscuras según el tema del sistema. Un icono oscuro sobre una barra de pestañas oscura se vuelve invisible. Prueba tu favicon sobre fondos claros y oscuros, y considera una versión con fondo contrastante si es necesario. ¿Necesitas un esquema de colores para tu favicon? Explora nuestras Herramientas de Color.
- Actualiza tu manifest.json para PWA. Si tu sitio es una Progressive Web App, los PNG de 192×192 y 512×512 deben referenciarse en tu
manifest.json, junto con los tamaños y propósitos de icono especificados en la especificación del Web App Manifest.
Por qué usar PixMidas
- Todos los tamaños en una sola descarga. Obtén todos los tamaños de favicon necesarios, .ico, 16×16, 32×32, 48×48, 180×180, 192×192 y 512×512, en un único ZIP, en lugar de redimensionar uno a uno.
- 100% privado. Toda la generación de favicons se ejecuta en tu dispositivo usando la API Canvas. Tu logotipo o icono nunca se sube a ningún servidor.
- Sin cuenta y sin registro. Gratis e instantáneo. La generación de favicons se ejecuta localmente en tu dispositivo.
Preguntas frecuentes
¿Qué tamaños de favicon necesito realmente?
El conjunto mínimo para compatibilidad completa es: favicon.ico (con capas de 16×16 y 32×32) en la raíz del dominio, apple-touch-icon.png a 180×180 para los accesos directos de pantalla de inicio de iPhone y iPad, y PNG de 192×192 y 512×512 para el manifest de PWA en Android. Incluir 48×48 mejora la visualización en la barra de tareas de Windows y en extensiones del navegador. El PNG de 512×512 también se usa como icono de pantalla de bienvenida en algunos contextos de PWA.
¿Qué es un archivo favicon.ico?
Un favicon.ico es un formato de icono de Windows que puede contener varias resoluciones en un solo archivo, a diferencia del PNG, que almacena una sola. El favicon.ico de la raíz del dominio lo buscan automáticamente los navegadores y muchos servicios (lectores de RSS, gestores de contraseñas, generadores de vistas previas de enlaces) incluso antes de añadir ninguna etiqueta de enlace, así que incluirlo es importante como cobertura de respaldo. Este generador crea un archivo .ico con capas de 16×16 y 32×32.
¿Por qué mi favicon se ve borroso en tamaños pequeños?
Reducir una imagen compleja a 16×16 píxeles usa 256 píxeles para representar algo renderizado originalmente a 262.144 píxeles (512×512). Los detalles finos, las líneas delgadas, los degradados y el texto se vuelven irreconocibles a esa escala. La solución es diseñar o usar una versión simplificada de tu icono, una sola letra, un símbolo simple o un icono con fondo sólido, que se lea con claridad en tamaños diminutos. Fíjate en cómo Apple, Google y Twitter usan símbolos simplificados como favicon en lugar de sus logotipos completos.
¿Debo poner los archivos de favicon en el directorio raíz?
Los navegadores buscan el favicon.ico en la raíz del dominio por defecto, así que https://tudominio.com/favicon.ico se descarga automáticamente sin ninguna etiqueta de enlace. Para el resto de formatos y tamaños, la ubicación se indica en las etiquetas <link> del head de tu HTML. Puedes guardarlos en cualquier lugar que tu servidor web pueda servir. El fragmento de HTML incluido en la descarga especifica las rutas correctas.
¿Qué es un Apple Touch Icon?
El Apple Touch Icon (180×180 px) lo usan iOS y iPadOS cuando alguien añade tu sitio web a la pantalla de inicio de su iPhone o iPad. Se convierte en el icono de app del acceso directo. Sin él, iOS usa una captura de la página, que queda mal como icono de pantalla de inicio. Android usa el icono de 192×192 del manifest de PWA para el mismo propósito.
¿Mi favicon debe tener fondo transparente o sólido?
Depende del diseño. Los fondos transparentes funcionan bien para símbolos que deben adaptarse a los distintos colores de la pestaña del navegador, tanto en modo claro como oscuro. Los fondos de color sólido garantizan que el icono se vea intencional e idéntico sin importar el color de la pestaña. Para logotipos de marca, un fondo sólido del color principal de la marca suele ser la opción más limpia y la que más se parece a un icono de app nativa en las pantallas de inicio.