Generador de favicon
Herramienta para generar favicons en varios tamaños subiendo una imagen.
💡 ¿Qué es un favicon?
Un pequeño icono que se muestra en las pestañas del navegador o marcadores de un sitio web.
📋 Tamaños generados
- 16x16, 32x32 - Favicon predeterminado del navegador
- 180x180 - Apple Touch Icon (iOS)
- 192x192, 512x512 - Android/PWA
🎨 Recomendaciones
- Use una imagen cuadrada (relación 1:1)
- Diseño simple (considere la visualización pequeña)
- Colores de alto contraste (mejora la legibilidad)
- Se recomienda formato PNG (fondo transparente posible)
📌 Uso de HTML
<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="/favicon-180x180.png">
Tamaños generados
| Tamaño | Uso |
|---|---|
| 16x16 | Favicon básico del navegador |
| 32x32 | Favicon estándar |
| 48x48 | Navegador de alta resolución |
| 64x64 | Mosaico de Windows |
| 128x128 | Icono de aplicación iOS |
| 180x180 | Apple Touch Icon |
| 192x192 | Android/Chrome |
| 512x512 | Splash de PWA |
Uso en HTML
<!-- Favicon básico -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Recomendaciones de diseño
✅ Bueno
- Imagen cuadrada
- Diseño simple
- Colores de alto contraste
- Formato PNG (transparencia posible)
❌ Evitar
- Detalles complejos
- Texto largo
- Colores de bajo contraste
- Imagen alargada horizontalmente
Consejos de uso
💡 Consejo 1: Imagen original
Use una imagen de alta calidad de al menos 512x512px.
💡 Consejo 2: Prueba
Pruébelo en varios navegadores.
💡 Consejo 3: Branding
Use el logotipo de la empresa o el icono de la marca.
Estructura de archivos
Coloque los favicons generados en la raíz del sitio web:
/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png
Preguntas frecuentes
P: ¿También se generan archivos ICO?
R: Actualmente solo se admite PNG. Puede convertir PNG a ICO si es necesario.
P: ¿Es posible el fondo transparente?
R: Sí, ya que es un archivo PNG, el fondo transparente es posible.
P: ¿Son necesarios todos los tamaños?
R: Básicamente, 16x16, 32x32 y 180x180 son suficientes.
Herramientas relacionadas
- Generador de avatares - Crear avatar de perfil
Privacidad
- Procesamiento 100% del lado del cliente
- Las imágenes no se cargan al servidor
- Todos los procesos se realizan en su navegador
- Seguro y privado
💬 ¿Te resultó útil esta herramienta?
¡No dudes en enviarnos tus comentarios o sugerencias en cualquier momento!