Como crear un favicon SVG
Guia rapida
El favicon es el iconito de la pestaña del navegador. Usarlo en SVG da nitidez perfecta en cualquier pantalla y un solo archivo ligero.
Ventajas del favicon SVG
- Nitido en pantallas normales y Retina, sin generar varios PNG.
- Un solo archivo, peso minimo.
- Puede adaptarse al modo oscuro con CSS dentro del propio SVG.
1. Diseña el icono
Hazlo simple y reconocible a tamaño pequeño. Usa un lienzo cuadrado (por ejemplo 64x64) en svgdesk. Pocas formas, buen contraste.
2. Exporta el SVG
Guarda el archivo como favicon.svg en la raiz de tu sitio.
3. Enlazalo en el HTML
<link rel="icon" href="favicon.svg" type="image/svg+xml">
4. Fallback (opcional)
Safari antiguo no soporta favicon SVG. Si necesitas cobertura total, añade un favicon.ico o PNG como respaldo:
<link rel="icon" href="favicon.ico" sizes="any">
Adaptarse al modo oscuro
Dentro del SVG puedes incluir una media query CSS para cambiar el color del icono segun el tema del sistema. Mantenlo simple para que se vea bien en 16px.