SVG ve ICO Simgeleri

SVG favicon'ler, fazladan bayt gerektirmeden herhangi bir sekme boyutuna ölçeklenen tek XML belgeleridir. ICO dosyaları, bir veya daha fazla önceden rasterleştirilmiş çerçeveyi tutan ikili kaplardır. Simge kümenizi oluşturmak ve doğrulamak için favicon oluşturucumuzu, PNG - ICO dönüştürücüsünü, SVG - ICO dönüştürücüsünü ve canlı favicon test cihazını kullanın ve [tamamlayıcıyı okuyun] kısa bir açıklama için kılavuz](kılavuz:favicon-vs-svg).

Modern Chromium, Firefox ve Safari, SVG'i sekmelerde oluşturabilir. Windows kabuğu, eski yerleştirmeler ve örtülü /favicon.ico getirmeleri hâlâ taramalı ICO verilerini bekliyor.

Soru SVG veya ICO değil; SVG artı ICO'tir; yetenekli tarayıcılar için SVG ve güvenlik ağı olarak ICO listelenmiştir.

Bir dosya 16×16 ile 256×256 arasındaki mantıksal pikselleri kapsar. Korunacak mipmap ayarı yok.

Basit işaretler için dosya boyutu genellikle 2 KB'nin altındadır; altı kareli .ico'ten çok daha küçüktür.

Gömülü CSS, @media (prefers-color-scheme: koyu) altındaki dolguları tersine çevirebilir ve ayrı gece öğelerini dışa aktarmanıza gerek kalmadan size uyarlanabilir sekmeler sunar.

SVG metindir. Git'teki favicon değişikliklerini diğer kaynak varlıklar gibi farklılaştırabilirsiniz.

Tarayıcılar, HTML'ten çıkarsanız bile /favicon.ico'i ister. Bu isteğin, .ico olarak yeniden adlandırılan bir SVG değil, geçerli bir simge kapsayıcısı döndürmesi gerekir.

Windows pinleri, Outlook bağlantısının açılması ve bazı RSS okuyucuları SVG'i tamamen görmezden geliyor. Gösterimlerin yaklaşık %5'inin yalnızca ICO yollarını kullanmasını bekleyin.

ICO ayrıca size tahmin edilebilir pikseller sunar. Karmaşık SVG filtreleri motorlar arasında farklı şekilde oluşturulabilir; raster geri dönüşleri görünümü dengeler.

Maksimum uyumluluk için önce ICO'i, ardından geliştirme için SVG'i bildirin:

<link rel = "icon" href = "/favicon.ico" size = "herhangi biri">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Yetenekli tarayıcılar, tür ve MIME doğru olduğunda SVG'i tercih eder. Diğerleri, bozuk bir görüntü glifi olmadan ICO'e geri döner.

iOS ana ekran simgeleri için SVG kullanmadığından 180×180 PNG apple-touch simgesiyle eşleştirin.

Tek renkli harf işareti: Tek bir <yol> ve karanlık mod dolgu değişimiyle SVG. ICO, Windows kısayolları için aynı şekilden oluşturuldu.

Degrade logo: SVG için basitleştirin (yalnızca düz dolgular). Pazarlama eğimini 16×16 sekmesinde değil web sitesinde tutun.

Eski IE gereksinimlerine sahip devlet veya kurumsal site: ICO'e öncelik verin; SVG'i yalnızca analizler ihmal edilebilir IE trafiğini gösterdikten sonra ekleyin.

Katı marka renklerine sahip tasarım sistemi: SVG'i repoda saklayın, her sürüm etiketinde .ico'i yeniden oluşturmak için CI işini çalıştırın.

Yalnızca SVG kullanabilir miyim? Windows kısayollarını ve örtülü .ico getirme işlemlerini önemsiyorsanız hayır.

Safari, SVG favicon'leri destekliyor mu? Safari 15+ masaüstünde bunu sağlar. iOS ana ekranının hâlâ PNG'e ihtiyacı var.

SVG ilk boyamayı yavaşlatır mı? 1–2 KB SVG, kahraman görsellerle karşılaştırıldığında ihmal edilebilir düzeydedir.

SVG'in içine bir bitmap yerleştirebilir miyim? Yapabilirsiniz ancak ölçeklenebilirliği kaybedersiniz; bunun yerine ICO kullanın.

SVG favicon karanlık modda görünmez: dolgu, sekme arka planıyla eşleşir. Açık dolgular veya prefers-color-scheme kuralları ekleyin.

Chrome, SVG'i değil ICO'i kullanır: type="image/svg+xml" seçeneğini kontrol edin ve sunucu İçerik Türünün image/svg+xml olduğunu doğrulayın.

SVG pürüzlü görünüyor: karmaşık filtreleri rasterleştirmişsiniz. Yolları basitleştirin veya sekme için ICO'e güvenin.

Büyük SVG dosyası: SVGO ile dışa aktarın; Illustrator meta verilerini ve kullanılmayan tanımları kaldırın.

viewBox karesini ve ortalanmış tutun. Kare olmayan viewBoxes posta kutusu, dairesel veya kare sekmeli ürünlerde öngörülemeyen bir şekilde işaretinizi oluşturur.

Filtreler, maskeler ve yabancıObject yerleştirmeleri yerine basit doldurmaları tercih edin. Favicon oluşturma bağlamları şerit özellikleri tam sayfa SVG'e izin verir.

Tüm stilleri satır içi. Yalnızca favicon istekleri için harici stil sayfaları yüklenmeyebilir.

Dağıtımdan önce prefers-color-scheme kurallarını aynı makinede hem açık hem de koyu işletim sistemi ayarlarında test edin.

Dosya boyutunu küçültmek için SVGO'yu koruyucu eklentilerle çalıştırın, ancak viewBox'i ve kritik yol verilerini olduğu gibi koruyun.

Sürüm kontrolü favicon.svg uygulama kodu gibi. Farklı XML, çekme isteklerinde ikili ICO'i karşılaştırmanın önüne geçer.

SVG ayrıştırma maliyeti, kahraman görsellerle karşılaştırıldığında çok küçük, ancak Illustrator'dan (100 KB+) muazzam miktarda SVG dışa aktarma işlemi hâlâ her sekmede bayt israfına neden oluyor.

Tarayıcılar favicon'leri HTML'teki HTTP önbellek kontrolünden ayrı olarak önbelleğe alır. favicon.svg'i favicon-v2.svg olarak yeniden adlandırmak, pazarlama gerektirdiğinde yenilemeyi zorlar.

HTML'i önbelleğe alan hizmet çalışanları, simge yanıtlarını sonsuza kadar eskimiş yeniden doğrulamayla önbelleğe almamalı; yeniden markalamada önbellek anahtarlarını artırmalıdır.

HTTP/2 çoğullaması, üç küçük simge dosyasının şelale sorunu olmadığı anlamına gelir. Doğru formatları gönderin; SVG ve ICO'i tek bir dosyada birleştirmeyin.

Favicon'lar sekmelerde dekoratiftir; HTML'te alternatif metne ihtiyaç duymazlar. Anlamlı site adı hala <title>'a ait.

Düşük kontrastlı SVG işaretleri, sayfa içeriğinde olduğu gibi kullanıcı arayüzü kromu için WCAG'de başarısız oluyor. Kontrastı hem #fff hem de #323232 arka planlarında test edin.

Yalnızca renkli marka işaretleri, renk görme bozukluğuyla kullanıcıların kafasını karıştırıyor. 16x16 siluete yalnızca renk değişimi değil, farklı bir şekil ekleyin.

favicon.svg'i Git'te saklayın. Sürüm etiketinde, favicon.ico üretmek ve ikili dosyaları işlemek veya yapıyı dağıtmak için eklemek için başsız bir komut dosyası veya manuel oluşturucu adımı çalıştırın.

favicon.ico, favicon.svg mtime'dan daha eskiyse CI'da başarısız olun — logo ayarlamasından sonra unutulan yenilenmeyi yakalar.

Önizleme ortamları, birleştirme öncesinde 404'leri yakalamak için üretimle aynı simge yollarını kullanmalıdır.

Stil kılavuzunuzdaki belge: SVG kaynaktır, ICO oluşturulmuş yapıdır, PNG boyutları dışa aktarma hedefleridir.

Harici kuruluşların marka dışı işaretler göndermemesi için minimum kontur ağırlığını ve dolguyu 16x16 olarak belirtin.

Marka PDF'sine açık ve koyu ekran görüntülerini ekleyin. Pazarlama ekipleri, antetli kağıtlar kadar sıklıkta sekmelere de başvurur.

Simgeler özellik lansmanlarıyla değiştiğinde, ürün sürümleriyle eşleşen semver etiketlerine sahip Sürüm favicon varlıkları.

Üç ayda bir denetimler yapın: analizler hedef kitlenizde SVG desteğini %98'in üzerinde gösterirse, kurumsal kurulumlar için uzun kuyruk önemli olan ICO'i kullanmaya devam edin.

Önce favicon.ico'i dağıtın ve örtülü /favicon.ico isteklerinin 200 döndürdüğünü doğrulayın.

Aşamaya doğru MIME ile favicon.svg ekleyin; İçerik Türünün image/svg+xml olup olmadığını otomatik olarak kontrol edin.

Üretime gönderin, CDN'yi temizleyin, üç tarayıcıyı donanımla yenileyin, Chromium'teki SVG sekmesini ve beklendiği yerde ICO geri dönüşünü onaylayın.

Bir hafta boyunca destek bildirimlerini izleyin; QA'nın Windows kısayollarını atlaması durumunda simge sorunları yeniden markalamadan hemen sonra kümelenir.

Kod incelemesi sırasında gelecekteki gerilemelerin açıkça görülebilmesi için sürüm biletinize temel ekran görüntülerini kaydedin.