Favicon (.ico) ve SVG

SVG bir vektör formatıdır; bu, tek bir SVG favicon'un herhangi bir piksel yoğunluğunda bozulma olmadan işlendiği anlamına gelir. 1x ekranda 16x16 piksel çözünürlükte görüntülenir; 3x Retina ekranda aynı dosyadan 48×48 fiziksel piksel boyutunda oluşturulur. Boyuta özel 4 tarama çerçevesine sahip hiçbir ICO paketi bu otomatik yoğunluk işlemeyle eşleşemez. SVG, modern yüksek DPI ekranlar için ideal formattır.

.ico formatı evrensel temel olmaya devam ediyor. Web simgeleriyle ilgilenen her masaüstü tarayıcı, mobil tarayıcı, işletim sistemi ve üçüncü taraf araç, 1990'ların sonlarından beri favicon.ico'i desteklemektedir. Bu ortamların birçoğu HTML bağlantı etiketlerini hiç kontrol etmez; yalnızca bir kural olarak etki alanı kökünden /favicon.ico'i almaya çalışırlar. Kurulumunuzdan .ico'yu kaldırmak, anlamlı bir kullanıcı ve araç segmentinin favori simgelerini anında bozar.

Karanlık mod desteği, SVG favicon'larının harika özelliğidir. Bir SVG dosyası, bir `<style>` bloğunu bir `@media (prefers-color-scheme: dark)` sorgusu ile gömebilir. Tarayıcı karanlık moddayken sorgu etkinleştirilir ve simgenin dolgusunu, konturunu veya arka plan rengini değiştirebilir. .ico veya PNG ile bu imkansızdır; bu formatlar, çevre bilinci olmayan statik taramalardır.

SVG site simgeleri için tarayıcı desteği önemli ölçüde olgunlaştı. Chrome 80+ (2020'de yayınlandı), Edge 80+, Firefox 41+ ve Safari 15+ (2021'de yayınlandı) tümü `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` özelliğini destekler. 2026 itibariyle, etkin tarayıcı yüklemelerinin büyük çoğunluğu SVG favicon'larını desteklemektedir. Dikkate değer istisna, eski iOS cihazlarda eski Safari'tir (15 öncesi) - bunlar otomatik olarak .ico'ya geri döner.

Dosya boyutu SVG'in başka bir avantajıdır. Basit bir işaret için temiz, tek renkli bir SVG favicon'u genellikle 1 KB'nin altındadır. 16, 32, 48 ve 64 piksellik tarama çerçevelerini iyi kalitede paketleyen bir .ico dosyası genellikle 10-25 KB boyutundadır. Çok hızlı yükleme süresi gereksinimleri olan siteler için, bağımsız bir PNG seti yerine SVG favicon'un gönderilmesi, favicon yükünü önemli ölçüde azaltır; ancak her iki format da ilk yüklemeden sonra önbelleğe alınır.

SVG favicon bağlantı söz dizimi .ico'dan biraz farklıdır. Açık bir tür özelliğine ihtiyacınız var: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Type özelliği olmadan bazı tarayıcılar dosyayı favicon olarak tanımaz. Bunu önce .ico yedek bağlantı etiketiyle eşleştirin: `<link rel='icon' href='/favicon.ico'>`. SVG favicon'larını anlayan tarayıcılar daha spesifik SVG etiketini tercih eder; diğerleri .ico'ya düşüyor.

Bir favicon dağıtmadan önce SVG optimizasyonu yapmaya değer. Tasarım araçları, SVG'i düzenleyici meta verileri, yorumlar, görünmez yollar ve herhangi bir görsel katkı olmadan bayt ekleyen yedek niteliklerle birlikte dışa aktarır. SVG'inizi SVG optimizer üzerinden çalıştırmak, simgeyi görsel olarak aynı tutarken dosya boyutunu %50-80 oranında azaltabilir. Daha küçük SVG'ler de daha hızlı ayrıştırılır; bu, daha yavaş bağlantılarda önemlidir.

.ico formatı, SVG'in yapamadığı Windows işletim sistemi entegrasyonunu yönetir. Tarayıcı sekmelerinden, görev çubuğu pinlerinden ve Windows Dosya Gezgini simgelerinden oluşturulan masaüstü kısayollarının tümü /favicon.ico şeklinde okunur. SVG, bu bağlamlarda tanınan bir Windows simge biçimi değildir. Tarayıcı sekmelerinde öncelikli olarak SVG favicon'unu gören kullanıcılar bile sitenize bir Windows kısayolu oluşturduklarında .ico sürümünü görecektir.

Bir favicon'u SVG ile canlandırmak, `<animate>` öğelerini veya SVG dosyası içindeki SMIL animasyonlarını kullanarak mümkündür. Animasyonlu bir SVG site simgesi titreşebilir, dönebilir veya renk değiştirebilir. Sık kullanılan simgelerdeki SVG animasyonu için tarayıcı desteği sınırlıdır (Chrome ve Edge bunu destekler; Firefox ve Safari desteklemez), ancak sık kullanılan simgesi aracılığıyla durum değişikliklerini (ör. yükleme göstergeleri, yeni bildirim noktaları) göstermek isteyen web uygulamaları için yaratıcı bir seçenektir.

SVG site simgeleri, basit koyu/açık geçişin ötesinde gelişmiş renk modlarını destekler. SVG içindeki CSS özel özelliklerini kullanabilir, yüksek kontrast modu için `forced-colors` medya sorgularına yanıt verebilir ve birden fazla renk şeması kesme noktası kullanabilirsiniz. Bu düzeyde bir tema, raster formatlarda imkansızdır ve SVG'i erişilebilirlik odaklı tasarım sistemleri için en iyi seçim haline getirir.

SVG'in üretimdeki pratik sınırlaması, hala SVG olmayan bir geri dönüşe ihtiyaç duymanızdır. En basit yaklaşım, SVG'i birincil simgeniz olarak korumak ve aynı SVG kaynağından .ico ve apple-touch-icon PNG'yi oluşturmaktır. favicon generator, SVG'i kaynak formatı olarak kabul eder ve vektör verilerinden .ico ve PNG çıktılarını üretir; rasterleştirme nedeniyle kalite kaybı olmaz.

Sosyal medya paylaşım kartları, OG görselleri ve bağlantı açma için favicon kaynak formatının önemi yoktur; sosyal platformlar favicon'u HTML veya /favicon.ico'inizden alır ve dahili olarak dönüştürür. Favicon'unuz ister .ico, ister PNG veya SVG olsun, açılmış bağlantı kartında simge ne olursa olsun görüntülenir. Sosyal paylaşım senaryolarının formatından ziyade simge içeriğinin kalitesine odaklanın.

Önerilen ico+SVG kurulumunun uygulanması yalnızca üç bağlantı etiketini içerir: `.ico` geri dönüş, `image/svg+xml` SVG ve "apple-touch-icon" PNG. Tarayıcılar bunları spesifiklik sırasına göre okur (önce en spesifik format) ve destekledikleri ilk formatı seçer. Bu aşamalı geliştirme yaklaşımı, her kullanıcının, tarayıcısının kullanabileceği en iyi favicon'u alması anlamına gelir. Karar matrisinin tamamı için best favicon format guide'e bakın.