Saydam arka plan üzerindeki siyah logo açık sekmede kusursuz görünürken koyu sekmede kaybolur. ICO biçimi uyarlanamaz, ancak SVG favicon uyarlanabilir: tarayıcı temasına göre renkleri değiştiren bir CSS kuralı içerir.
Sorun: tek dosya, iki arka plan
Tarayıcılar artık sistem temasını izlediğinden, aynı sayfada sekme şeridi bir ziyaretçi için beyaza, diğeri için siyaha yakın olabilir. Biri için çizilmiş tek renkli favicon, diğerinde okunamaz hâle gelir.
Birçok site bunu simgeye opak renkli arka plan vererek aşar. İşe yarar, ancak büyük markalar arka plansız bir sembol kullanırken simge ağır bir lekeye dönüşür.
Doğru çözüm, seçimi tarayıcıya bırakmaktır; bu, JavaScript ve sunucu tarafında algılama olmadan mümkündür.
Uyarlanabilir SVG nasıl çalışır?
SVG dosyası düz bir görsel değil, bir belgedir: style etiketi ve dolayısıyla medya sorguları içerebilir. İçine prefers-color-scheme: dark kuralı koymak, tarayıcı koyu tema kullandığında yolların dolgu rengini yeniden tanımlar.
Uygulamada SVG, açık tema için varsayılan rengi, ardından koyu modda onu değiştiren kuralı tanımlar. Tarayıcı çizim sırasında doğru olanı uygular ve ziyaretçi tema değiştirirse sekmeyi hemen günceller.
Aynı mekanizma basit renk ters çevirmeden daha fazlasını yapabilir: örneğin açık modda arka plansız sembol, koyu modda dolu rozet gibi tamamen farklı bir çizim sunabilirsiniz.
SVG'yi .ico ile birlikte tanımlamak
SVG'yi link rel="icon" type="image/svg+xml" href="/favicon.svg" ile tanımlayın. Onu anlayan tarayıcılar diğerlerine tercih eder; anlamayanlar kökteki favicon.ico dosyasına geri döner.
Bu yüzden kaldırılacak bir şey yoktur: iki dosya birlikte bulunur ve her biri diğerinin kapsamadığı istemcilere hizmet eder. Bu, 32 piksellik bir simgeye uygulanan aşamalı iyileştirmedir.
Bir uyarı: favicon SVG'si bağımsız olmalıdır. Bu bağlamda harici yazı tipi, uzak görsel veya betik yüklenmez. Metin vektörel yollara dönüştürülmelidir.
Koyu modun kapsamadığı alanlar
Koyu sürüm, masaüstü tarayıcısının favicon'una uygulanır. Sabit opak PNG olan Apple Touch simgesini veya Android'in kendi arka planında gösterdiği web manifesti simgelerini etkilemez.
Destek de evrensel değildir: Chromium tabanlı tarayıcılar ve Firefox uyarlanabilir SVG'yi okur, Safari ise sürüme göre geriden gelir. Bu sorun değildir; çünkü .ico dosyasına dönüş otomatiktir.
Bu nedenle açık tema simgenizi her ziyaretçinin göreceği varsayılan durum olarak tasarlayın; koyu sürümü, okuyabilen tarayıcılar için bir iyileştirme olarak değerlendirin.
Birincil kaynaklar
Sık sorulan sorular
favicon.ico koyu modu destekler mi?
Hayır. ICO biçimi, tema kavramı olmayan sabit raster görseller saklar. Medya sorgusu yalnızca SVG'de bulunabilir; modern paketin ikisini birden içermesinin nedeni budur.
Açık ve koyu için iki ayrı SVG dosyası gerekir mi?
Hayır, tek dosya yeterlidir. Her iki sürüm de aynı SVG içinde, prefers-color-scheme medya sorgusuyla ayrılır; böylece ek istek ve algılama kodu gerekmez.
Koyu temadaki görünüm nasıl test edilir?
İşletim sistemi temasını değiştirin, ardından sekmeyi yeniden yükleyin. Oluşturucuda açık ve koyu sekme önizlemeleri yan yana bulunur; böylece gidip gelmeniz gerekmez.