Melns logotips uz caurspīdīga fona gaišā cilnē izskatās lieliski, bet tumšā pazūd. ICO formāts nevar pielāgoties, taču SVG favicon to spēj: tajā ir CSS noteikums, kas maina krāsas atbilstoši pārlūka motīvam.
Problēma: viens fails, divi foni
Tā kā pārlūki seko sistēmas motīvam, vienam apmeklētājam tās pašas lapas cilņu josla var būt gandrīz balta, bet citam gandrīz melna. Vienkrāsains favicon, kas veidots vienam fonam, otrā kļūst nesalasāms.
Daudzas vietnes to risina, ikonai pievienojot necaurspīdīgu krāsainu fonu. Tas darbojas, taču ikona kļūst par smagnēju laukumu, kamēr lieli zīmoli saglabā simbolu bez fona.
Pareizais risinājums ir ļaut izvēlēties pārlūkam, un to var izdarīt bez JavaScript un bez motīva noteikšanas serverī.
Kā darbojas pielāgojams SVG
SVG fails ir dokuments, nevis plakans attēls: tajā var būt style tags un līdz ar to arī multivides vaicājumi. Ievietojot prefers-color-scheme: dark noteikumu, ceļu aizpildījuma krāsa mainās, kad pārlūks izmanto tumšu motīvu.
Praksē SVG norāda noklusējuma krāsu gaišajam motīvam un pēc tam noteikumu, kas to aizstāj tumšajā režīmā. Pārlūks attēlošanas brīdī izmanto pareizo variantu un uzreiz atjaunina cilni, ja apmeklētājs nomaina motīvu.
Tas nav tikai vienkāršs krāsu apvērsums: var parādīt pilnīgi citu zīmējumu, piemēram, simbolu bez fona gaišajā režīmā un aizpildītu emblēmu tumšajā režīmā.
SVG norādīšana līdzās .ico
Norādiet SVG ar link rel="icon" type="image/svg+xml" href="/favicon.svg". Pārlūki, kas to saprot, dod tam priekšroku, bet pārējie izmanto saknē esošo favicon.ico kā rezerves variantu.
Tātad nekas nav jānoņem: abi faili pastāv līdzās un katrs aptver savus klientus. Tā ir pakāpeniska iespēju uzlabošana, kas piemērota 32 pikseļu ikonai.
Viena piebilde: favicon SVG jābūt patstāvīgam. Ārējs fonts, attāls attēls vai skripts šajā vidē netiks ielādēts. Teksts jāpārvērš vektoru kontūrās.
Ko tumšais režīms neaptver
Tumšais variants attiecas uz datora pārlūka favicon. Tas neietekmē Apple Touch ikonu, kas ir nemainīgs necaurspīdīgs PNG, vai tīmekļa manifesta ikonas, kuras Android parāda uz sava fona.
Arī atbalsts nav universāls: Chromium pārlūki un Firefox lasa pielāgojamo SVG, bet Safari atbalsts atkarīgs no versijas. Tas netraucē, jo pāreja uz .ico rezerves variantu notiek automātiski.
Tādēļ gaišo ikonu veidojiet kā noklusējuma variantu, ko var redzēt ikviens apmeklētājs, bet tumšo variantu uztveriet kā uzlabojumu pārlūkiem, kuri to atbalsta.
Pirmavoti
Bieži uzdotie jautājumi
Vai favicon.ico atbalsta tumšo režīmu?
Nē. ICO glabā nemainīgus rastra attēlus un nezina par motīviem. Tikai SVG var saturēt multivides vaicājumu, tādēļ mūsdienu komplektā ir abi formāti.
Vai nepieciešami divi SVG faili: gaišs un tumšs?
Nē, pietiek ar vienu failu. Abi varianti atrodas vienā SVG un ir nodalīti ar prefers-color-scheme vaicājumu, tādēļ nevajag papildu pieprasījumu vai motīva noteikšanas kodu.
Kā pārbaudīt tumšā motīva attēlojumu?
Pārslēdziet operētājsistēmas motīvu un pārlādējiet cilni. Ģeneratorā gaišās un tumšās cilnes priekšskatījumi ir blakus, tādēļ pārslēgšana nav nepieciešama.