Sube una imagen cuadrada, haz clic en Generar paquete de favicon y descarga el ZIP. El generador crea favicon.ico, tamaños PNG de favicon, icono Apple Touch, iconos Android Chrome, manifiesto y código HTML desde una sola imagen de origen. Para mejores resultados, empieza con un logo de 512x512 px o más.
Generador de favicon gratuito para iconos ICO, PNG y SVG
Convierte una imagen en un paquete completo de favicon. Obtén favicon.ico, iconos PNG, iconos Apple Touch, iconos Android Chrome, un manifiesto web y código HTML.
También podrías necesitar:Generador de iconos de aplicación·PNG a ICO·Redimensionar imagen·Comprimir Imagen
Qué crea este generador de favicon
Un favicon ya no es solo una imagen diminuta. Los navegadores, pestañas fijadas, marcadores, pantallas de inicio móviles y lanzadores de Android pueden pedir archivos distintos. Este generador de favicon crea el conjunto común de producción desde una sola imagen de origen, para que no tengas que exportar cada tamaño manualmente.
| Archivo de salida | Tamaño o contenido | Dónde se usa |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | Respaldo clásico del navegador y detección automática de /favicon.ico en la raíz |
| favicon-16x16.png | 16x16 | Pestañas del navegador e interfaces compactas |
| favicon-32x32.png | 32x32 | Pestañas de alta densidad y marcadores |
| apple-touch-icon.png | 180x180 | Accesos directos en la pantalla de inicio de iPhone y iPad |
| android-chrome-192x192.png | 192x192 | Android Chrome y manifiestos de aplicaciones web |
| android-chrome-512x512.png | 512x512 | Iconos de alta resolución para Android y PWA |
| manifest.json | Metadatos de la aplicación web | Referencias de iconos para aplicaciones web progresivas |
| Fragmento HTML | Etiquetas <link> | Copiar en el <head> de tu página |
La herramienta acepta archivos PNG, JPG, SVG, WebP y GIF. Para obtener el resultado más limpio, empieza con una imagen cuadrada de 512x512 px o más. Un logo con fondo transparente suele funcionar mejor que una fotografía completa, porque los favicons a menudo se muestran a solo 16x16 o 32x32 píxeles.
Los archivos subidos se procesan en el servidor y se eliminan en un plazo de 24 horas.
Cómo hacer un favicon paso a paso
1
Paso 1: Prepara una imagen de origen simple
Usa un logo, marca, letra o símbolo cuadrado. Si tu imagen de origen no es cuadrada, recórtala primero para que la forma importante quede centrada. Una imagen de 512x512 px o 1024x1024 px le da al generador suficiente detalle para crear tamaños de favicon más pequeños sin ampliar.
2
Paso 2: Sube tu imagen
Arrastra tu archivo al área de carga o haz clic en Elegir imagen. Puedes crear archivos favicon desde PNG, JPG, SVG, WebP o GIF. PNG y SVG suelen ser las mejores opciones para logos porque mantienen los bordes nítidos y pueden conservar la transparencia.
3
Paso 3: Genera el paquete de favicon
Haz clic en Generar paquete de favicon. La herramienta crea un ZIP con el archivo favicon.ico, tamaños de icono PNG, icono Apple Touch, iconos Android Chrome, manifiesto y fragmento HTML.
4
Paso 4: Descarga e instala
Descarga el ZIP, sube los archivos generados a tu sitio web y copia el fragmento HTML en el <head> de tu página. Si tu sitio ya tiene un favicon antiguo, borra la caché del navegador o añade una consulta de versión como ?v=2 para forzar a los navegadores a cargar el archivo nuevo.
PNG a favicon, SVG a favicon y salida ICO
Los distintos formatos de origen crean resultados ligeramente distintos. La mejor opción depende del tipo de arte con el que empieces.
| Formato de origen | Ideal para | Notas |
|---|---|---|
| PNG | Logos con transparencia | La mejor fuente general para un favicon desde PNG |
| SVG | Logos vectoriales y marcas simples | Bueno para bordes nítidos; el generador exporta tamaños de favicon rasterizados |
| JPG | Fotos o arte sin transparencia | Funciona, pero los fondos pasan a formar parte del icono |
| WebP | Imágenes web optimizadas | Útil si tu recurso original ya está en WebP |
| GIF | Recursos animados simples o heredados | El paquete de favicon generado está diseñado para archivos favicon estáticos y prácticos |
SVG a favicon
Muchos diseñadores empiezan con arte vectorial. SVG es ideal cuando tu logo usa trazados limpios, colores planos y geometría simple. Una vez subido, el generador de favicon exporta los archivos rasterizados que tu sitio realmente necesita, incluyendo favicon.ico y tamaños PNG.
PNG a favicon
PNG es el formato fuente más común para propietarios de sitios. Usa un PNG transparente si quieres que la forma del favicon se vea limpia sobre interfaces claras y oscuras del navegador. Si solo necesitas un archivo ICO estilo Windows en lugar del paquete completo para sitio web, también puedes usar PNG a ICO.
Generador de favicon.ico
El favicon.ico generado contiene imágenes de 16x16, 32x32 y 48x48 en un solo archivo. Eso importa porque los navegadores antiguos y muchos servidores web todavía buscan /favicon.ico automáticamente, incluso cuando también ofreces enlaces modernos a PNG y al manifiesto.
Cómo añadir favicon en HTML
Después de generar tu paquete de favicon, sube los archivos a la raíz pública de tu sitio o a la carpeta de recursos estáticos. Luego coloca el fragmento HTML generado dentro de la sección <head> de tu documento.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Si tu sitio web usa un framework, coloca estos archivos en la carpeta que sirve recursos públicos estáticos:
| Plataforma | Ubicación común |
|---|---|
| Sitio HTML simple | Raíz del sitio, junto a index.html |
| Next.js | public/ |
| Vite o React | public/ |
| WordPress | Carpeta de recursos del tema o raíz del sitio, según la configuración |
| Shopify | Recursos del tema y luego referencia a la URL del recurso |
Las rutas exactas pueden variar según el proyecto, así que haz coincidir los valores href con el lugar donde realmente están alojados los archivos. Un 404 en cualquier archivo favicon normalmente significa que la ruta es incorrecta, no que el paquete de iconos esté roto.
Consejos para un favicon web nítido
🔍
Mantén el diseño legible a 16x16
Al tamaño de una pestaña del navegador, el texto fino, los degradados, los trazos delgados y las fotos detalladas suelen desaparecer. Una forma simple, una letra o una marca de logo de alto contraste será más fácil de reconocer que un logotipo completo.
◐
Usa la transparencia con intención
Un fondo transparente ayuda a que tu favicon encaje de forma natural en pestañas del navegador, marcadores y vistas de accesos directos móviles. Si tu imagen de origen tiene un cuadrado blanco detrás, ese cuadrado normalmente seguirá visible en los archivos generados.
◑
Prueba temas claros y oscuros del navegador
Los favicons aparecen sobre muchos colores de interfaz. Un icono oscuro puede desaparecer en una barra de pestañas oscura; un icono pálido puede verse débil sobre fondos claros. Si tu logo depende de un color, considera añadir un contorno sutil o usar una versión más marcada para favicon.
↙
No juzgues solo a tamaño ampliado
Previsualiza siempre el icono a tamaños reales de 16x16 y 32x32. Un diseño que se ve pulido a 512x512 puede convertirse en ruido visual al reducirse. Si la versión pequeña no es clara, simplifica la imagen de origen antes de generar el paquete final.
Casos de uso comunes
Lanzamiento de un sitio nuevo
Genera el paquete completo y añade el fragmento HTML antes de publicar
Cambio de marca
Reemplaza todos los archivos favicon antiguos y luego actualiza las versiones para renovar la caché
Blog o portafolio
Usa un monograma simple o una marca de logo en lugar de un logotipo completo
PWA o sitio instalable
Conserva el manifiesto y los iconos Android Chrome del ZIP
Icono de pantalla de inicio de iPhone
Usa el icono Apple Touch de 180x180
Proyecto de icono de aplicación
Usa el generador de iconos de aplicaciones si necesitas conjuntos completos de iconos para tiendas de iOS y Android
Esta página es ideal cuando necesitas un paquete de favicon para sitio web. Para proyectos de aplicaciones nativas con carpetas de Xcode o Android Studio, el generador de iconos de aplicaciones es una mejor opción.
Preguntas frecuentes
Para crear archivos favicon para un sitio web, prepara una imagen cuadrada simple, genera el paquete de favicon, sube los archivos a la carpeta pública de tu sitio y coloca las etiquetas <link> generadas en el <head> de tu página. Prueba el sitio en una pestaña del navegador después de borrar la caché.
Este es un generador de favicon gratuito para crear archivos comunes de iconos web desde una sola imagen. Admite cargas PNG, JPG, SVG, WebP y GIF, y entrega un paquete ZIP en lugar de solo un icono pequeño.
PNG es uno de los mejores formatos de origen para generar favicons porque admite transparencia y bordes nítidos. Sube un logo PNG transparente para generar favicon.ico, PNG de 16x16, PNG de 32x32, icono Apple Touch, iconos Android Chrome y un manifiesto.
Sí. Sube un logo SVG y la herramienta exporta archivos favicon prácticos para navegadores y dispositivos. El paquete generado incluye tamaños PNG rasterizados más favicon.ico, algo útil porque no todos los contextos de favicon deberían depender solo de SVG.
La herramienta genera un archivo favicon.ico con tamaños 16x16, 32x32 y 48x48. Incluir favicon.ico sigue siendo útil porque navegadores, rastreadores y sistemas heredados suelen solicitar /favicon.ico automáticamente.
Sube los archivos generados a la carpeta pública de tu sitio web y luego copia el fragmento HTML de favicon en el <head> de tu página. Como mínimo, incluye enlaces a favicon.ico, PNG de 16x16, PNG de 32x32, icono Apple Touch y manifest.json si esos archivos están presentes.
Usa <link rel="icon" href="/favicon.ico"> como respaldo ICO y luego añade enlaces PNG y Apple Touch para dispositivos modernos. Asegúrate de que cada ruta href coincida con la ubicación real del archivo en tu servidor.
Una configuración HTML completa de favicon normalmente incluye enlaces para favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png y manifest.json. El generador proporciona un fragmento listo para copiar para que no tengas que escribir esas etiquetas manualmente.
Usa varios tamaños. El paquete incluye archivos PNG de 16x16 y 32x32 para la interfaz del navegador, un favicon.ico de varios tamaños con 16x16, 32x32 y 48x48, un icono Apple Touch de 180x180, además de iconos Android de 192x192 y 512x512. Empezar con una imagen de origen de 512x512 px o más da los resultados reducidos más limpios.