Hala bir favicon.ico'ya ihtiyacım var mı, yoksa PNG yeter mi?
ICO, 16, 32 ve 48'i tek bir 4.6 KB dosyasında paketleyen bir dizin formatıdır. İçinde ne var, neden PNG bunu değiştirmiyor ve gönderilecek yedi dosya.
Her birkaç yılda birisi favicon.ico'nun öldüğünü ilan eder. Sonra bir besleme okuyucu veya eski bir Windows kısayolu /favicon.ico'yu ister, 404 alır ve boş bir sayfa simgesi gösterir. ICO'yu göndermek 4.6 KB'ye mal oluyor. Bu, tüm argüman ve ikon oluşturucumuz hala bir tane yazıyor.
alpha.png'yi, şeffaflığa sahip 900x606 boyutunda bir görüntü ile besleyin ve yedi dosya çıkar: 4.6 KB boyutunda favicon.ico, 521 B boyutunda favicon-16x16.png, 1.4 KB boyutunda favicon-32x32.png, 28.4 KB boyutunda apple-touch-icon.png ve 31.9 KB ile 196 KB boyutunda iki android-chrome PNG, artı 371 B boyutunda site.webmanifest. Kendi tarayıcınız tüm yediyi yazar. Bunu böyle inşa ettik çünkü bu uygulamanın hiç API rotası yok, bu da her sunucu tarafı favicon sitesinin kendisi hakkında söyleyemeyeceği bir cümledir.
.ico dosyasında aslında ne var?
ICO bir dizin formatıdır. Dosya altı baytla açılır: 0'a ayarlanmış bir ayrılmış kelime, simgeler için 1'e ayarlanmış bir tür kelime ve ardından kaç tane görüntü olduğunu belirten bir sayı. Sonrasında her görüntü için bir 16 baytlık giriş gelir; genişlik, yükseklik, renk sayısı, ayrılmış bir bayt, renk düzlemleri, piksel başına bit, görüntü verisinin bayt uzunluğu ve dosyanın başlangıcından itibaren ofset taşır. Ardından yükler, birleştirilmiş olarak gelir. Microsoft'un arşivlenmiş İkonlar makalesi 1995'te bu iki yapıyı ICONDIR ve ICONDIRENTRY olarak belgeler ve bunlar değişmemiştir.
Genişlik ve yükseklik her biri bir bayt alır, bu yüzden 256x256'nın 0 olarak saklanması gerekir ve 256'dan daha büyük hiçbir şey dizine sığmaz. Kodlayıcımız her giriş için 1 renk düzlemi ve piksel başına 32 bit yazar ve her yük, düz bir PNG'dir. 1995 spesifikasyonu, şeffaflık için 1 bitlik AND maskesi ile takip edilen bir DIB tanımlar, bu yüzden eski simgelerin sert keskin kenarları vardı. Üç görüntü, 6 baytlık başlık artı 48 baytlık dizin anlamına gelir. Bu, 54 baytlık bir muhasebe ve 4.6 KB'deki her şey PNG verisidir.
Neden bir favicon.ico 16, 32 ve 48 tutar?
Bunlar bizim paketlediğimiz üç boyut ve keyfi değildir. Aynı Microsoft belgesi geliştiricilere her simge kaynağında 16x16, 32x32 ve 48x48 eklemelerini söyler, ardından seçim kuralını açıklar: istenen boyuta en yakın olan görüntü kazanır. Sekme çubuğu 16 ister. 2x bir ekranda o aynı 16 CSS piksel alanı 32 gerçek piksel ister ve bir Windows masaüstü kısayolu 48 ister. Eğer ICO'nuz sadece 16'yı tutuyorsa, bir kısayol 48'e uzatılmış 16 px görüntüsü alır ve tam olarak böyle görünür.
Eğer tarayıcılar PNG okuyorsa, neden ICO'yu göndereyim?
Çünkü ikisi farklı yollarla keşfedilir. Araçlarımızın size verdiği dört satırlık kesit, PNG dosyalarını açık tür ve boyut ipuçlarıyla adlandırır ve `<head>`'i ayrıştıran herhangi bir istemci bunları alır. MDN'nin `<link>` referansı aynı şekli gösterir, tarayıcının seçmesine izin veren birkaç simge bağlantısı ile. HTML Standardı ayrıca bir simge bağlantısı belirtilmediğinde kullanıcı aracının /favicon.ico'yu yol ile aramasına izin verir ve URL'nizi alan birçok şey, işaretlemenizi okumaz. SVG faviconlar burada cazip, ve caniuse bunları %90.49 küresel destekle gösteriyor, Safari sadece 26.0 sürümünde bunları alıyor. Bu gerçek bir kuyruk bırakıyor.
Yedi dosya nedir ve ne kadar yer kaplar?
| Dosya | Pikseller | Boyut | Kim okur |
|---|---|---|---|
| favicon.ico | 16, 32 ve 48 paketlenmiş | 4.6 KB | /favicon.ico yolu yedekleme, Windows kısayolları |
| favicon-16x16.png | 16x16 | 521 B | 1x'te sekme çubuğu, bir bağlantı etiketi aracılığıyla |
| favicon-32x32.png | 32x32 | 1.4 KB | 2x'te sekme çubuğu, bir bağlantı etiketi aracılığıyla |
| apple-touch-icon.png | 180x180 | 28.4 KB | iOS ana ekranı, bir bağlantı etiketi aracılığıyla |
| android-chrome-192x192.png | 192x192 | 31.9 KB | manifest simgeleri dizisi |
| android-chrome-512x512.png | 512x512 | 196 KB | manifest simgeleri dizisi |
| site.webmanifest | n/a | 371 B | kurulum istemi |
512 baskındır. ICO'yu, her iki küçük PNG'yi, apple-touch-icon'ı ve 192'yi bir araya ekleyin ve toplamda 67 KB'nın altında kalırsınız, o tek dosya için 196 KB'ye karşı. Bir sayfa görüntülemede hangisinin gerçekten size bir maliyeti olduğunu bilmek önemlidir, çünkü yalnızca ICO ve iki küçük PNG burada devrededir.
Neden şeffaf logom beyaz bir kare üzerinde duruyor?
Çünkü oluşturucu, sanat eserini çizmeye başlamadan önce tuvali boyar ve varsayılan dolgu #ffffff'tir. O kontrol bir renk girişi, bu yüzden her zaman altında bir renk vardır. Bunu marka hex'inize ayarlayın ve tüm set sitenizle eşleşir. alpha.png, bir alfa kanalıyla girdi ve yedi görüntünün her biri opak çıktı, bu da şeffaf bir favicon bekleyen insanları şaşırtır.
Kenar boşluğu kaydırıcısı %0'dan %30'a kadar çalışır ve her simgenin kenarının o payı kadar sanat eserini içe alır, bu nedenle %10'da 32 px simge her tarafta 3 px kenar tutar. Bu ölçekle görünür bir miktardır. Kare olmayan kaynaklar, harf kutusuna alınır: 900x606 boyutundaki bir logo en boy oranını korur ve yukarıda ve aşağıda arka plan çubukları alır. Bu sizi rahatsız ediyorsa önce kare yapın. Kesici 1:1 ön ayarına sahiptir, 10 MB'a kadar bir dosyayı bir seferde alır ve kaydedilmiş kalitede 92 ile kayıplı formatları yeniden kodlar. Kırpmak yerine yeniden boyutlandırmak isterseniz, yeniden boyutlandırıcı %25, %50 ve %75'te kaplama, içeri alma ve uzatma uyum modları ile yüzde ön ayarlarına sahiptir.
ICO'yu tekrar PNG'ye nasıl dönüştürebilirim?
ICO'dan PNG'ye kullanın. Konteyneri ayrıştırır, dizin girişlerini dolaşır ve en büyük genişliğe sahip olanı saklar, ardından bunu PNG olarak yazar. Yukarıdaki 4.6 KB dosyasına işaret edin ve 48x48 boyutunda bir görüntü alırsınız, çünkü 48 orada paketlenmiş en büyük şeydir. Dosyada asla olmayan detayları geri kazanamaz. Daha büyük bir şeye ihtiyacınız varsa, büyütücü tarayıcınızda Real-ESRGAN çalıştırır ve her zaman PNG çıktısı verir; 400x269 boyutundaki küçük.png testimiz 2x ayarında 800x538 olarak geri döndü. Yeniden yapılandırma veya düz interpolasyonun doğru araç olup olmadığı simgenin ne için olduğuna bağlıdır. Bilmekte fayda var: model yalnızca 4x üretir, bu nedenle 2x, sonrasında uygulanan bir küçültmedir. Dönüştürücümüz 11 formatta 24 çift kapsar ve bunlardan hiçbiri için ICO yazmaz. Simgeler ikon oluşturucudan gelir.
196 KB'lık bir simge çok mu büyük?
Bu android-chrome-512x512.png ve setin en ağır parçasıdır. Birisi sitenizi bir uygulama olarak yüklediğinde alınır, bu da W3C Web Uygulama Manifestosu spesifikasyonunun yönettiği bir durumdur, bu nedenle sıradan bir sayfa yüklemesinin kritik yolunda yer almaz. Yine de onu küçültebilirsiniz. Sıkıştırıcımız birbirinden tamamen farklı iki PNG modu sunar: "PNG sıkıştırma yok" oxipng'yi seviye 3'te çalıştırır ve kayıpsız kalır, "PNG daha küçük dosya boyutu" 256 renk paletine kuantize eder. alpha.png üzerinde, kaynakta 942.4 KB, kayıpsız geçiş 383.9 KB ve palet geçişi 98.3 KB verdi. Düz bir logo genellikle 256 rengi kimsenin fark etmeden aşar. Sıkıştırma ayrıca her türlü meta veriyi, EXIF ve ICC dahil, temizler; bu da bir simge için tam olarak istediğiniz şeydir.
İşte somut bir sonraki adım. İkon oluşturucuyu açın, elinizdeki en büyük kare kaynağı bırakın (JPEG, PNG, WebP, AVIF, GIF ve SVG'yi 10 MB'a kadar kabul eder, bir dosya), arka plan rengini marka hex'inize ayarlayın, kenar boşluğunu 0 bırakın ve oluşturun. Dört bağlantı etiketini `<head>`'e kopyalayın, favicon.ico'yu web kökünüze yükleyin ve işiniz bitti. Hiçbir şeyin makinenizden çıkmadığını doğrulamak isterseniz, çalışırken ağ sekmesine bakın veya gizlilik sayfamızı okuyun. Yedi dosyanın sunucunuzda nerede bulunduğu tamamen ayrı olarak yazılmıştır.