Crni logotip na prozirnoj pozadini izgleda savršeno u svijetloj kartici, a nestaje u tamnoj. ICO se ne može prilagoditi, ali SVG favicon može: sadrži CSS pravilo koje mijenja boje ovisno o temi preglednika.
Problem: jedna datoteka, dvije pozadine
Budući da preglednici prate temu sustava, traka kartica na istoj stranici jednom posjetitelju može biti gotovo bijela, a drugom gotovo crna. Jednobojni favicon oblikovan za jednu postaje nečitljiv na drugoj.
Mnoge stranice to zaobilaze dodavanjem neprozirne pozadine u boji. Rješenje radi, ali ikona postaje teška mrlja, dok velike marke zadržavaju sam izdvojeni simbol.
Pravo je rješenje prepustiti izbor pregledniku, što je moguće bez JavaScripta i bez otkrivanja teme na poslužitelju.
Kako radi prilagodljivi SVG
SVG datoteka je dokument, a ne plošna slika: može sadržavati oznaku style i time medijske upite. Pravilo prefers-color-scheme: dark u njoj redefinira boju ispune putanja kada preglednik koristi tamnu temu.
U praksi SVG deklarira zadanu boju za svijetlu temu, a zatim pravilo koje je zamjenjuje u tamnom načinu. Preglednik primjenjuje odgovarajuću pri iscrtavanju i odmah ažurira karticu kada posjetitelj promijeni temu.
Isti mehanizam omogućuje više od običnog obrata boja: možete prikazati potpuno drukčiji crtež, primjerice izdvojeni simbol u svijetlom načinu i ispunjenu značku u tamnom.
Deklariranje SVG-a uz .ico
Deklarirajte SVG pomoću link rel="icon" type="image/svg+xml" href="/favicon.svg". Preglednici koji ga podržavaju daju mu prednost, a ostali koriste favicon.ico u korijenu.
Ne treba ništa uklanjati: obje datoteke postoje zajedno i nadopunjuju podršku klijentima. To je postupno poboljšavanje primijenjeno na ikonu od 32 piksela.
Jedna napomena: SVG favicon mora biti samostalan. Vanjski font, udaljena slika ili skripta neće se učitati u ovom kontekstu. Tekst treba pretvoriti u krivulje.
Što tamni način ne obuhvaća
Tamna inačica odnosi se na favicon preglednika na računalu. Ne utječe na ikonu Apple Touch, koja je fiksni neprozirni PNG, ni na ikone web manifesta koje Android prikazuje na vlastitoj pozadini.
Podrška nije univerzalna: preglednici temeljeni na Chromiumu i Firefox čitaju prilagodljivi SVG, dok Safari zaostaje ovisno o inačici. To nije prepreka jer se zamjenski .ico koristi automatski.
Zato oblikujte svijetlu ikonu kao zadanu inačicu koju mogu vidjeti svi posjetitelji, a tamnu smatrajte poboljšanjem za preglednike koji je podržavaju.
Primarni izvori
Česta pitanja
Podržava li favicon.ico tamni način?
Ne. ICO pohranjuje fiksne rasterske slike bez informacije o temi. Samo SVG može sadržavati medijski upit, zbog čega suvremeni paket sadrži oba formata.
Trebaju li dvije SVG datoteke, svijetla i tamna?
Ne, dovoljna je jedna. Obje inačice nalaze se u istom SVG-u, odvojene medijskim upitom prefers-color-scheme, pa nema dodatnog zahtjeva ni koda za otkrivanje teme.
Kako testirati prikaz u tamnoj temi?
Promijenite temu operacijskog sustava, a zatim ponovno učitajte karticu. Generator prikazuje svijetlu i tamnu karticu jednu uz drugu pa ne morate mijenjati temu.