Como crear un favicon para tu sitio web: tamanos, formatos y generador gratis
Guia completa para crear favicons. Tamanos necesarios, formato ICO vs PNG vs SVG, dark mode, y generador online gratuito.
Que es un favicon y por que toda web necesita uno
Un favicon (favorite icon) es el pequeno icono que aparece en la pestana del navegador, la barra de marcadores, el historial y los resultados de busqueda moviles. Es uno de los elementos mas visibles de la identidad de tu sitio web.
Donde aparece tu favicon:
- Pestana del navegador (16x16 o 32x32 px)
- Barra de marcadores/favoritos
- Pantalla de inicio movil (cuando agregan tu web, 180x180 px)
- Resultados de Google en movil (se muestra junto al titulo)
- PWA (Progressive Web App) icons (192x192, 512x512 px)
Sin favicon: El navegador muestra un icono generico gris de "pagina". Esto grita "sitio no profesional" y reduce la confianza del usuario.
Crea tu favicon al instante con el generador de favicon de NexTools.
Tamanos y formatos necesarios en 2026
| Tamano | Formato | Uso |
|---|---|---|
| 16x16 | PNG/ICO | Pestana del navegador (legacy) |
| 32x32 | PNG/ICO | Pestana del navegador (retina) |
| 48x48 | PNG | Windows site pinning |
| 180x180 | PNG | Apple Touch Icon (iOS home screen) |
| 192x192 | PNG | Android Chrome, PWA |
| 512x512 | PNG | PWA splash screen, Google search |
| SVG | SVG | Moderno, escala a cualquier tamano, dark mode |
Recomendacion minima 2026: Un SVG (para navegadores modernos) + un PNG de 32x32 (fallback) + Apple Touch Icon de 180x180. El generador de NexTools crea todos los tamanos necesarios.
Favicon SVG: el formato moderno con dark mode
SVG es el formato ideal para favicons en 2026:
Ventajas:
- Escala perfecta a cualquier tamano (vectorial)
- Soporta dark mode con CSS media query
- Tamano de archivo minimo (~500 bytes vs 5-15 KB para multiples PNGs)
- Un solo archivo en vez de 6+ PNGs
Dark mode en SVG favicon:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="..."/>
</svg>
Soporte: Chrome, Firefox, Edge, Safari 15+. Solo IE y Safari viejo necesitan PNG fallback.
Como implementar el favicon en HTML
Implementacion minima moderna:
<!-- Favicon SVG (moderno, dark mode) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback PNG -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest (PWA) -->
<link rel="manifest" href="/manifest.webmanifest">
En Next.js: Coloca favicon.ico y icon.svg en la carpeta app/. Next.js los sirve automaticamente sin configuracion adicional.
Si necesitas generar meta tags completos para tu sitio, usa el generador de meta tags de NexTools.
Diseno de favicons: como hacer que se vea bien a 16px
Disenar para 16x16 pixeles es un reto unico:
1. Simplicidad extrema. Solo las formas mas simples son reconocibles: una letra, un simbolo geometrico, un icono abstracto. No intentes meter un logo completo.
2. Alto contraste. A 16px, los detalles sutiles desaparecen. Usa colores solidos y bordes definidos.
3. Prueba en diferentes fondos. La pestana puede ser clara (Chrome light), oscura (Chrome dark), o con color (Firefox). Tu favicon debe funcionar en todos.
4. Evita texto largo. Una sola letra o dos (como "NT" para NexTools) funcionan. "NexTools" completo es ilegible a 16px.
5. Usa pixel-hinting a tamanos pequenos. Ajusta los bordes a la cuadricula de pixeles para evitar borrosidad.
Verifica los colores de tu favicon con el conversor de colores de NexTools.
Generador de favicon de NexTools: como usarlo
Paso 1: Sube tu imagen o logo (PNG, JPG, SVG).
Paso 2: Ajusta el recorte y el fondo si es necesario.
Paso 3: Descarga todos los tamanos necesarios (16x16, 32x32, 180x180, 192x192, 512x512).
Paso 4: Copia el codigo HTML generado para tu <head>.
Todo se procesa en tu navegador — tu logo no sale de tu computadora.
Favicon en diferentes plataformas y dispositivos
iOS (Apple Touch Icon): 180x180 PNG sin transparencia. iOS agrega esquinas redondeadas automaticamente. NO agregues efecto de brillo — iOS dejo de hacerlo en iOS 7 (2013).
Android: 192x192 y 512x512 en manifest.json. Puede ser con transparencia.
Windows: Usa browserconfig.xml para tile icons (150x150, 310x310). Poco usado desde que Windows abandono Live Tiles.
MacOS Safari: Soporta SVG favicons con dark mode y "pinned tab" SVG monocromatico.
Google Search Results: Google muestra favicon en resultados moviles. Tamano minimo: 48x48. Recomendado: multiplo de 48px.
Errores comunes con favicons
1. Solo tener favicon.ico. ICO es legacy. Los navegadores modernos prefieren SVG y PNG. ICO como unico formato se ve borroso en pantallas retina.
2. Favicon con fondo transparente en iOS. iOS pone fondo negro si tu Apple Touch Icon tiene transparencia. Siempre usa fondo solido para el touch icon.
3. No cachear correctamente. Los favicons se cachean agresivamente. Si cambias el favicon, usuarios pueden ver el viejo durante semanas. Solucion: agrega query string al link: favicon.svg?v=2.
4. Tamano incorrecto. Un PNG de 512x512 como favicon de pestana desperdicia ancho de banda. Genera cada tamano por separado.
5. Favicon sin relacion con la marca. Tu favicon debe ser reconocible como tu marca incluso a 16px. Idealmente derivado del logo.
Para comprimir imagenes de favicon, usa el compresor de imagenes de NexTools.
Prueba esta herramienta:
Abrir herramienta→Preguntas frecuentes
Que tamano debe tener un favicon
El minimo util es 32x32 para pestanas de navegador. Para cobertura completa necesitas: 32x32 (pestana), 180x180 (Apple Touch Icon), 192x192 y 512x512 (PWA/Android). Un SVG cubre todos los tamanos en navegadores modernos.
ICO o PNG para favicon
PNG y SVG son preferibles en 2026. ICO es legacy (soporta multiples tamanos en un archivo pero es menos eficiente). SVG es ideal (vectorial, dark mode, un solo archivo). PNG como fallback universal. Solo necesitas ICO para IE11, que ya no tiene soporte.
Como hago un favicon que funcione en dark mode
Usa SVG con CSS media query: @media (prefers-color-scheme: dark) { path { fill: white; } }. Esto cambia el color automaticamente cuando el usuario activa dark mode. Solo SVG soporta esto — PNG siempre se ve igual.
Por que mi nuevo favicon no aparece despues de cambiarlo
Cache agresivo del navegador. Soluciones: (1) Ctrl+Shift+R para forzar recarga. (2) Limpiar cache. (3) Agregar version al URL: favicon.svg?v=2. (4) Esperar — algunos navegadores cachean favicons por semanas.
El favicon aparece en los resultados de Google
Si, en movil. Google muestra el favicon junto al nombre del sitio en resultados de busqueda moviles. Tamano minimo: 48x48 px, multiplo de 48, sin padding excesivo. Un favicon profesional mejora la confianza y el CTR.
Puedo usar un emoji como favicon
Si, con SVG: <svg xmlns='http://www.w3.org/2000/svg'><text y='32' font-size='32'>🔧</text></svg>. Funciona en navegadores modernos pero puede verse inconsistente entre plataformas (cada OS renderiza emojis diferente).