El SVG mantiene los contornos nítidos a cualquier densidad y puede adaptar sus colores al tema. Esta flexibilidad tiene una condición: el archivo debe ser autónomo, sencillo y legible en un espacio diminuto.
Construir un cuadrado con viewBox
Usa un viewBox cuadrado, por ejemplo 0 0 64 64, y deja un margen alrededor del símbolo. viewBox define el sistema de coordenadas sin imponer una dimensión física al resultado.
Reduce el dibujo a sus formas distintivas. Los detalles finos, los pequeños espacios interiores y las palabras completas suelen desaparecer a 16 píxeles, aunque el archivo vectorial siga siendo técnicamente nítido.
| Punto | Motivo | Prueba |
|---|---|---|
| viewBox cuadrado | Recorte previsible | Vista previa de 16×16 |
| Trazados sencillos | Legibilidad | Pestaña clara y oscura |
| Sin dependencias | Carga autónoma | Red sin conexión |
| Alternativa ICO | Clientes antiguos | URL desde la raíz |
Hacer que el archivo sea autónomo
Integra los estilos necesarios en el SVG. Convierte el texto en trazados si el símbolo depende de una tipografía, porque una fuente web externa no es una dependencia fiable en este contexto.
Elimina scripts, enlaces remotos y metadatos innecesarios del editor. Las formas y los estilos sencillos también facilitan la revisión de seguridad y reducen el peso del archivo.
Por último, abre el archivo solo en el navegador y pruébalo sin conexión. Si el dibujo cambia o desaparece, aún depende de un recurso externo que debes integrar o sustituir.
Declarar el SVG con una alternativa
Añade link rel icon con type image/svg+xml y una URL desde la raíz. Conserva también favicon.ico en la raíz para los clientes que no seleccionen el SVG o que soliciten el ICO directamente.
El SVG no sustituye al icono Apple Touch ni a los iconos del manifiesto. Exporta PNG opacos o maskable adaptados a esas interfaces.
Adaptar los colores al tema
Una regla prefers-color-scheme dentro de una etiqueta style puede modificar fill o stroke en modo oscuro. Define primero un color predeterminado sólido y añade después la variante como mejora progresiva.
Prueba el archivo en pestañas reales y con varios niveles de zoom. Comprueba también la alternativa cuando no se elige el SVG: un ICO invisible sobre fondo oscuro sigue siendo un problema para esos clientes.
Fuentes primarias
Preguntas frecuentes
¿Necesita un SVG anchura y altura?
Un viewBox cuadrado es el elemento esencial para el redimensionado. Puedes añadir anchura y altura explícitas, pero el navegador ajusta el tamaño del icono según su contexto.
¿Se puede cargar una fuente externa?
No cuentes con ello. Convierte las letras en trazados para obtener un archivo autónomo y previsible.
¿Basta el SVG para iOS?
No. Proporciona por separado un icono Apple Touch PNG opaco para la pantalla de inicio.