Un logotip negre sobre fons transparent queda perfecte en una pestanya clara i desapareix en una de fosca. El format ICO no es pot adaptar, però el favicon SVG sí: inclou una regla CSS que canvia els colors segons el tema del navegador.
El problema: un fitxer, dos fons
Ara que els navegadors segueixen el tema del sistema, la barra de pestanyes pot ser gairebé blanca per a un visitant i gairebé negra per a un altre a la mateixa pàgina. Un favicon monocrom dissenyat per a un d'ells es torna il·legible per a l'altre.
Molts llocs ho resolen donant a la icona un fons opac de color. Funciona, però la icona es converteix en una taca pesada, mentre que les grans marques mantenen un símbol retallat.
La solució adequada és deixar que el navegador triï, i això és possible sense JavaScript ni detecció al servidor.
Com funciona l'SVG adaptable
Un fitxer SVG és un document, no una imatge plana: pot contenir una etiqueta style i, per tant, consultes de mitjans. Incloure-hi una regla prefers-color-scheme: dark redefineix el color de farciment dels traçats quan el navegador fa servir un tema fosc.
A la pràctica, l'SVG declara un color predeterminat per al tema clar i després una regla que el substitueix en mode fosc. El navegador aplica el color adequat en representar-lo i actualitza la pestanya immediatament si el visitant canvia de tema.
El mateix mecanisme va més enllà d'una simple inversió: pots mostrar un dibuix completament diferent, com ara un símbol retallat en mode clar i un distintiu ple en mode fosc.
Declara l'SVG al costat del .ico
Declara l'SVG amb link rel="icon" type="image/svg+xml" href="/favicon.svg". Els navegadors que l'entenen el prefereixen a la resta, i els que no el coneixen recorren al favicon.ico de l'arrel.
Per tant, no cal eliminar res: tots dos fitxers conviuen i cadascun cobreix els clients de l'altre. És la millora progressiva aplicada a una icona de 32 píxels.
Hi ha una condició: un favicon SVG ha de ser autònom. En aquest context no es carregarà cap tipografia externa, imatge remota ni script. El text s'ha de convertir en traçats.
Què no cobreix el mode fosc
La variant fosca s'aplica al favicon del navegador d'escriptori. No afecta la icona Apple Touch, que és un PNG opac fix, ni les icones del manifest web, que Android representa sobre el seu propi fons.
La compatibilitat tampoc no és universal: els navegadors basats en Chromium i Firefox llegeixen l'SVG adaptable; Safari va al darrere segons la versió. No és un problema, perquè el recurs alternatiu .ico és automàtic.
Dissenya, doncs, la icona clara com a cas predeterminat, el que veurà qualsevol visitant, i tracta la variant fosca com un refinament per als navegadors que la saben llegir.
Fonts primàries
Preguntes freqüents
El favicon.ico pot gestionar el mode fosc?
No. El format ICO desa imatges fixes de mapa de bits sense cap noció de tema. Només l'SVG pot incloure una consulta de mitjans; per això el conjunt modern incorpora tots dos formats.
Calen dos fitxers SVG, un de clar i un de fosc?
No, n'hi ha prou amb un. Totes dues variants són dins del mateix SVG, separades per la consulta de mitjans prefers-color-scheme, cosa que evita una petició addicional i qualsevol codi de detecció.
Com es prova la representació del tema fosc?
Canvia el tema del sistema operatiu i torna a carregar la pestanya. Al generador, les previsualitzacions de les pestanyes clara i fosca apareixen una al costat de l'altra, cosa que t'estalvia anar canviant.