O siglă neagră pe fundal transparent arată perfect într-o filă luminoasă și dispare într-una întunecată. Formatul ICO nu se poate adapta, dar faviconul SVG poate: conține o regulă CSS care schimbă culorile în funcție de tema browserului.
Problema: un fișier, două fundaluri
Acum că browserele urmează tema sistemului, bara de file poate fi aproape albă pentru un vizitator și aproape neagră pentru altul, pe aceeași pagină. Un favicon monocrom desenat pentru una dintre teme devine ilizibil în cealaltă.
Multe site-uri ocolesc problema oferind pictogramei un fundal opac colorat. Funcționează, dar pictograma devine o pată greoaie, în timp ce mărcile mari păstrează un simbol decupat.
Soluția potrivită este să lași browserul să aleagă, iar acest lucru este posibil fără JavaScript și fără detectare pe server.
Cum funcționează SVG-ul adaptiv
Un fișier SVG este un document, nu o imagine plată: poate conține o etichetă style și, prin urmare, interogări media. O regulă prefers-color-scheme: dark inclusă în fișier redefinește culoarea de umplere a traseelor când browserul folosește o temă întunecată.
În practică, SVG-ul declară o culoare implicită pentru tema luminoasă, apoi o regulă care o înlocuiește în modul întunecat. Browserul o aplică pe cea potrivită la afișare și actualizează imediat fila dacă vizitatorul schimbă tema.
Același mecanism permite mai mult decât o simplă inversare: poți afișa un desen complet diferit, de exemplu un simbol decupat în modul luminos și o emblemă plină în modul întunecat.
Declararea SVG-ului alături de .ico
Declară SVG-ul cu link rel="icon" type="image/svg+xml" href="/favicon.svg". Browserele care îl înțeleg îl preferă celorlalte variante, iar cele care nu îl acceptă folosesc favicon.ico de la rădăcină.
Așadar, nu trebuie să elimini nimic: cele două fișiere coexistă, fiecare acoperind clienții celuilalt. Este îmbunătățirea progresivă aplicată unei pictograme de 32 pixeli.
O precizare: un favicon SVG trebuie să fie autonom. Un font extern, o imagine la distanță sau un script nu vor fi încărcate în acest context. Textul trebuie transformat în contururi.
Ce nu acoperă modul întunecat
Varianta întunecată se aplică faviconului browserului desktop. Nu afectează pictograma Apple Touch, care este un PNG opac fix, nici pictogramele manifestului web, pe care Android le afișează pe propriul fundal.
Nici compatibilitatea nu este universală: browserele bazate pe Chromium și Firefox citesc SVG-ul adaptiv, iar Safari rămâne în urmă în funcție de versiune. Nu este o problemă, deoarece revenirea la .ico este automată.
Proiectează deci pictograma pentru tema luminoasă drept varianta implicită, pe care o va vedea orice vizitator, și tratează varianta întunecată ca pe un rafinament pentru browserele care o pot citi.
Surse primare
Întrebări frecvente
Poate favicon.ico să gestioneze modul întunecat?
Nu. Formatul ICO stochează imagini raster fixe, fără noțiunea de temă. Numai SVG-ul poate conține o interogare media, motiv pentru care setul modern le include pe ambele.
Ai nevoie de două fișiere SVG, unul luminos și unul întunecat?
Nu, un singur fișier este suficient. Ambele variante se află în același SVG, separate de interogarea media prefers-color-scheme, evitând o cerere suplimentară și orice cod de detectare.
Cum testezi afișarea temei întunecate?
Schimbă tema sistemului de operare, apoi reîncarcă fila. În generator, previzualizările filelor luminoasă și întunecată sunt alăturate, scutindu-te de această alternare.