Tek bir simge neden altı dosyaya dönüşür
Favicon, 1999'da Internet Explorer'ın bir sitenin kök klasöründe aradığı tek bir 16×16 favicon.ico dosyası olarak başladı. O zamandan beri site simgesi gösteren her platform kendi boyutunu istedi ve set büyüdü:
- 16 px: standart ekranlarda tarayıcı sekmesi ve yer imi listesi.
- 32 px: yüksek yoğunluklu ekranlardaki sekmeler ve bir site sabitlendiğinde Windows görev çubuğu.
- 48 px: Windows masaüstü kısayolları ve bazı site listeleri.
- 180 px: birisi siteyi iPhone veya iPad'de ana ekrana eklediğinde kullanılan Apple touch simgesi.
- 192 px ve 512 px: web manifest'te bildirilen Android ana ekran simgeleri ve yüklenmiş bir web uygulamasının açılış ekranı.
ZIP, içinde üç küçük boyutun paketlendiği favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png ve iki Android simgesine işaret eden bir site.webmanifest içerir. Arşiv kaynak dosyanızın adını alır; yani logo.svg, logo.favicon.zip verir.
Set nasıl üretilir
Her boyut, doğrudan orijinal dosyanızdan kendi saydam karesine çizilir. Görsel kare değilse sığacak şekilde ölçeklenir ve ortalanır; kısa kenarlarda saydam boşluk kalır. Bir SVG her boyutta yeniden rasterleştirilir, böylece 16 px simge de 512 px olanla aynı vektör hassasiyetini alır; raster bir görsel ise tarayıcının yumuşatmasıyla küçültülür.
ICO dosyası üç görselini ICO kabının içinde PNG verisi olarak saklar; bu, Windows Vista'dan beri ve tüm güncel tarayıcılar tarafından desteklenen bir varyanttır. Tam saydamlığı korur ve genellikle eski bitmap tabanlı ICO formatından çok daha küçüktür.
Tüm çizim tarayıcınızda Canvas API ile yapılır. PNG, JPG, WebP veya SVG formatında 20 MB'a kadar kaynaklar kabul edilir.
16 piksele dayanan bir logo tasarlamak
16×16'da toplam yalnızca 256 piksel vardır. Ayrıntılı bir logo bu boyutta bulanık bir lekeye dönüşür; bu da hiçbir dışa aktarma ayarının çözemeyeceği bir tasarım sorunudur. İşe yarayanlar:
- Logonun tamamını değil, bir işareti kullanın. Tek bir harf, bir monogram veya logonun yazı kısmı olmadan sembolü.
- Kalın şekiller ve az renk. Genişliğin yaklaşık 1/16'sından ince çizgiler en küçük boyutta kaybolur.
- Kareyi doldurun. Oluşturmadan önce kaynaktaki boş kenar boşluklarını kırpın; bol saydam boşlukta yüzen bir logo sekmede minicik kalır.
- Her iki temayı da kontrol edin. Tarayıcı sekme çubukları açık veya koyu olabilir. Saydam arka plan üzerindeki siyah bir simge koyu bir sekme çubuğunda kaybolur; açık bir dış çizgi veya arkasında düz renkli bir şekil yardımcı olur.
16 px sürüm hâlâ bulanık görünüyorsa, ayrı bir sadeleştirilmiş kaynak hazırlamak, seti ondan oluşturmak ve büyük PNG'leri ayrıntılı sürümden almak değerli olabilir.
Bilmeye değer platform tuhaflıkları
Saydam Apple touch simgeleri
iOS ana ekran simgelerinde saydamlık göstermez; saydam alanlar genellikle siyahla doldurulur. Oluşturucu saydamlığı koruduğu için, saydam arka plan üzerindeki bir logo iPhone'da etrafında koyu bir kare verir. Temiz bir sonuç için düz arka plan rengine sahip bir kaynak kullanın veya logonuzu bırakmadan önce arka planıyla birlikte dışa aktarın.
Web manifest'i tamamlamak
Dahil edilen site.webmanifest yalnızca iki simgeyi listeler. Uygulama olarak yüklenebilmesi gereken bir site için onu bir metin düzenleyicide açın ve en azından name, short_name, start_url, display (örneğin standalone) ve theme_color ekleyin. Bunlar olmadan tarayıcılar sayfa başlığına geri döner ve yükleme önermez.
İnatçı önbellek
Tarayıcılar faviconları agresif biçimde, bazen günlerce ve sayfa önbelleğinden bağımsız olarak önbelleğe alır. Yeni dosyaları yükledikten sonra eski simge görünmeye devam ederse, simge URL'sini doğrudan açıp yeniden yükleyin veya HTML'nizdeki simge bağlantılarına ?v=2 gibi bir sürüm sorgusu ekleyin.
Kaynak dosya seçmek
Kare bir SVG en kullanışlı kaynaktır, çünkü orijinal çizim ne kadar küçük olursa olsun 512 px'de keskin çizilir. Başka bir formatta vektör logonuz varsa onu SVG olarak veya en az 512×512 bir PNG olarak dışa aktarın. Yalnızca küçük boyutta var olan raster bir logo için onu önce Yapay zeka ile görsel büyütme ile büyütmek, 512 px simgeye düz germeden daha temiz kenarlar kazandırır. Geniş bir yazı kısmı olan bir logoyu, karenin ortasında ince bir çizgiye küçülmesine izin vermek yerine, oluşturmadan önce Resim kırp ile sembolüne indirmek en iyisidir.