Favicon (.ico) ve PNG

.ico formatı, birden çok simge boyutunu tek bir ikili kapta tutmak için özel olarak oluşturuldu. İyi oluşturulmuş bir favicon.ico, 16×16, 32×32, 48×48 ve 64×64 piksel boyutlarında çerçeveler içerir. Tarayıcı bir sekme için favicon'a ihtiyaç duyduğunda .ico dosyasını açar, ICO dizinini okur ve gerekli ekran boyutuna en yakın olan çerçeveyi seçer. Bu çok boyutlu yetenek, .ico'nun PNG'e göre belirleyici avantajıdır.

PNG tek görüntülü bir formattır. Bir PNG dosyası tam olarak aynı çözünürlükte tam olarak bir görüntü içerir. Yalnızca PNG ile birden fazla boyutu kapsamak için birden fazla dosyaya ve açık `sizes=` özniteliklerine sahip birden fazla `<link>` etiketine ihtiyacınız vardır. Bu daha ayrıntılıdır ancak her çözünürlükte hangi görüntünün sunulacağı konusunda hassas kontrol sağlar. PNG ayrıca herhangi bir çözünürlükte BMP kodlu ICO karelerden daha iyi kayıpsız sıkıştırmayı da destekler.

Tarayıcı uyumluluğu, .ico'nun kesin bir şekilde kazandığı yerdir. Eski IE, eski Edge, eski Safari sürümleri ve belirsiz niş tarayıcılar dahil her tarayıcı, herhangi bir `<link>` etiketi gerekmeden alan adı kökünden /favicon.ico'i getirir. Bağlantı etiketini tamamen atlasanız bile, tarayıcılar kural olarak GET /favicon.ico'i deneyecektir. PNG, doğru MIME türlerine sahip açık "<link rel='icon' type='image/png'>" etiketleri gerektirir; aksi takdirde bu durum göz ardı edilir.

Şeffaflık desteği .ico ve PNG arasında eşittir. Her iki format da 8 bitlik alfa kanalını destekler (piksel başına tam şeffaflık). Ancak .ico, şeffaflığı yalnızca dahili çerçeveleri BMP yerine PNG sıkıştırması kullandığında korur. Eski ICO kodlayıcılar bazen varsayılan olarak sınırlı (1 bit) şeffaflığa sahip olan BMP'yi kullanır. Her zaman PNG sıkıştırılmış .ico kareleri üreten modern bir oluşturucu kullanın.

Dosya boyutu karşılaştırması bağlama bağlıdır. Tek bir 32×32 PNG, 16, 32, 48 ve 64 piksellik kareleri bir araya getiren çok boyutlu bir .ico dosyasından daha küçüktür. Ancak .ico, dört ayrı PNG dosyasının yanı sıra dört bağlantı etiketinin yerini alır. Toplam yük açısından, iyi sıkıştırılmış çok boyutlu bir .ico neredeyse her zaman eşdeğer bireysel PNG setinin toplamından daha küçüktür.

PNG her boyutta sıkıştırma verimliliğinde kazanır. PNG sıkıştırma algoritması (DEFLATE/zlib), keskin kenarlara ve sınırlı renk paletlerine sahip düz renkli logolar ve simge tarzı resimler için özellikle etkilidir. Optimum sıkıştırmada 32×32 PNG logosu 200 baytın altında olabilir. Bir .ico içindeki eşdeğer BMP çerçevesi, görüntü içeriğinden bağımsız olarak her zaman 4 KB'dir.

Google Arama favicon'unun uygunluğu için hem .ico hem de PNG desteklenir. Google'ın tarayıcısı önce HTML'inizde bağlantılı olan site simgesini getirir veya /favicon.ico'e geri döner. Minimum gereksinim 48×48 piksel ve herkesin erişebileceği bir URL'dir. "<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>" ile bağlantılı, uygun boyuttaki bir PNG, aynı boyuttaki bir .ico paketi kadar bunu da karşılar.

Karanlık mod davranışı formatlar arasında farklılık gösterir. PNG dosyaları kullanıcının renk şemasına uyum sağlayamaz; bağlantı etiketi hrefini dinamik olarak değiştirmek için JavaScript'e ihtiyacınız olacaktır; bu hassas bir işlemdir. .ico formatının hiçbir karanlık mod özelliği yoktur. Karanlık mod favicon uyarlaması için, yerleşik bir `@media (prefers-color-scheme: dark)` stil bloğu aracılığıyla yalnızca SVG bunu yerel olarak destekler. PNG ve .ico, bir SVG katmanıyla eşleştirilmelidir.

Optimum modern kurulum her iki formatı birleştirir. Evrensel yedek olarak `<link rel='icon' href='/favicon.ico'>`, Retina netliği için `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` ve ölçeklenebilir karanlık mod desteği için `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` kullanın. SVG favori simgelerini anlayan tarayıcılar SVG'i seçer; diğerleri PNG'e düşüyor; eski tarayıcılar .ico'yu alır.

Windows İşletim Sistemi entegrasyonu yalnızca .ico alan adındadır. Masaüstü kısayolları, Dosya Gezgini simgeleri ve Windows görev çubuğu pinlerinin tümü .ico biçimini okur. Kullanıcılarınızdan herhangi biri sitenizi Windows görev çubuğuna sabitlerse veya URL'nize bir masaüstü kısayolu oluşturursa kısayol simgesi olarak yalnızca /favicon.ico kullanılır. PNG dosyaları bu bağlamda tamamen göz ardı edilir.

180×180 apple-touch-icon için geçerli tek format PNG'tir. iOS, ana ekran simgeleri için .ico dosyasını okumaz; özellikle "<link rel='apple-touch-icon'>" aracılığıyla bağlanan bir PNG gerektirir. Bu, PNG'in yalnızca tercih edilmekle kalmayıp aynı zamanda gerekli olduğu bir durumdur.

Sunucu yapılandırması gözden kaçırılmamalıdır. Birçok web sunucusu, açıkça yapılandırılmamışsa, .ico'yu yanlış içerik türüyle (`image/x-icon` yerine `text/plain`) sunar. PNG dosyaları, barındırma platformlarında daha geniş MIME türü desteğine sahiptir. favicon.ico'inizin yüklenmediğini görürseniz sunucunuzun ICO istekleri için `Content-Type: image/x-icon` veya `image/vnd.microsoft.icon` döndürüp döndürmediğini kontrol edin.

favicon generator her iki formatın çıktısını aynı anda verir. Seçim yapmanıza gerek yok; indirme paketi favicon.ico, 32×32 ve 180×180 boyutunda bağımsız PNG dosyalarını ve tam modern yığın için SVG'i içerir. Bu paketi kullanmak, ICO ve PNG arasındaki sorunun otomatik olarak yanıtlanacağı anlamına gelir: her ikisini de, her biri üstün olduğu bağlamda kullanın.

SVG'i de kapsayan eksiksiz bir format karşılaştırması için best favicon format guide'e bakın. Bu kılavuz, her kullanım durumu için hangi formata (standart web sitesi, PWA, e-ticaret mağazası ve geliştirici aracı) öncelik verilmesi gerektiğini açıklar ve favicon yığınınızı seçmeniz için bir karar matrisi sağlar.