Favicon formatları açıklandı: ICO, PNG, SVG ve tarayıcıların neye ihtiyaç duyduğu

Favicon’lar neden hâlâ tuhaf biçimde karmaşık

Bir favicon tek bir küçük görsel gibi görünür, ancak tarayıcı arayüzü, yer imleri, sekmeler, sabitlenmiş kısayollar, arama sonuçları, mobil ana ekranlar ve progressive web app kurulumlarının kesişiminde durur. Her bağlamın biraz farklı beklentileri vardır.

Favicon tavsiyelerinin çoğu zaman dağınık hissettirmesinin nedeni budur. Bazı ekipler yalnızca tek bir favicon.ico sunar, çünkü eskiden bu yeterliydi. Bazıları ise hangilerinin gerçekten kullanıldığını bilmeden bir düzine dosya üretir. Mantıklı orta yol daha küçüktür: ICO, PNG ve SVG’nin her birinin neyi iyi yaptığını anlamak, ardından güncel tarayıcıları ve yaygın cihaz bağlamlarını kapsayan kompakt bir set sunmak.

Favicon’lar, bir görsel işleme hattını sergileme yeri değildir. Sıkıcı, açık ve uyumlu olma yeridir.

ICO: ölmeyi reddeden eski format

ICO, klasik Windows simge kapsayıcısıdır. Farklı boyutlarda birkaç bitmap görseli tutabilir; yaygın olarak 16×16, 32×32 ve 48×48 piksel. Bu önemlidir çünkü bir favicon tarayıcı sekmesinde çok küçük, yer imi listesinde daha büyük ve Windows kısayollarında yine farklı şekilde işlenebilir.

Önemli ayrıntı, ICO’nun yalnızca tek bir görsel değil, bir kapsayıcı olmasıdır. İyi bir favicon.ico genellikle birden fazla raster boyut içerir; böylece tarayıcı veya işletim sistemi tek bir minicik bitmap’i ölçeklemek yerine en yakın eşleşmeyi seçebilir.

ICO hâlâ üç nedenle kullanışlıdır:

• Tarayıcılar, HTML içinde bağlantı vermeseniz bile otomatik olarak /favicon.ico isteyebilir.
• Bazı eski tarayıcılar ve entegrasyonlar bunu bekler.
• Daha yeni simge bildirimleri yok sayıldığında güvenli bir geri dönüş sağlar.

Bu, ICO’nun tek simgeniz olması gerektiği anlamına gelmez. Düzenlemesi zahmetlidir, modern iş akışlarına pek dost değildir ve bir marka işaretinin doğruluk kaynağı olarak zayıftır. Onu uyumluluk geri dönüşü olarak düşünün.

Pratikte, site köküne gerçek bir /favicon.ico yerleştirin. Gürültülü loglardan ve gereksiz tarayıcı yeniden denemelerinden hoşlanmıyorsanız orada 404 sunmayın.

PNG: güvenilir emekçi

PNG, favicon’lar ve touch icon’lar için hâlâ en öngörülebilir raster formattır. Şeffaflığı destekler, yaygın olarak desteklenir ve tarayıcılar ile platformlar arasında tutarlı davranır.

Favicon’lar için PNG, 32×32 veya 48×48 gibi açık piksel boyutlu simgeler istediğinizde kullanışlıdır. Mobil ana ekran simgeleri için PNG bazı ortamlarda fiilen zorunludur. Örneğin Apple touch icon’lar normal üretim kullanımında PNG tabanlıdır.

Birkaç pratik kural yardımcı olur:

• Zaten küçük olan bir bitmap’ten değil, vektör kaynaktan dışa aktarın.
• Daha büyük boyutları düşünmeden önce simgenin 16×16’da okunaklı olduğundan emin olun.
• İşaretin yuvarlatılmış veya maskelenmiş bağlamlarda kırpılmış hissi vermemesi için yeterli boşluk ekleyin.
• İnce metinlerden, ince çizgilerden ve ayrıntılı illüstrasyonlardan kaçının.

PNG sıkıştırması, dosyalar çok küçük olduğu için favicon’larda genellikle takıntı yapmaya değmez. Yine de bir tasarım dışa aktarımından doğrudan geldi diye 500 KB’lık bir touch icon sunmayın. Daha geniş görsel seçimlerini zaten gözden geçiriyorsanız, modern web’de görsel formatı kararları konusundaki aynı disiplinli düşünme burada da geçerlidir: formatı moda olduğu için değil, iş için seçin.

SVG: modern, esnek seçenek

SVG favicon’lar çekicidir çünkü çözünürlükten bağımsızdır. Tek bir küçük dosya birçok boyutta temiz biçimde işlenebilir ve doğrudan kod içinde düzenlenebilir ya da tasarım yazılımından dışa aktarılabilir.

Modern Chromium, Firefox ve Safari sürümleri SVG favicon’ları destekler. Bu, özellikle simge basit bir logo, glif veya geometrik işaret olduğunda SVG’yi birçok site için iyi bir birincil favicon formatı yapar.

Ancak SVG favicon’ların bazı uyarıları vardır.

İlk olarak, SVG kendi kendine yeterli olmalıdır. Harici fontlara, uzak görsellere veya script’lere güvenmeyin. Tarayıcılar, görsel olarak kullanılan SVG’ye kısıtlamalar uygular; bir şey bir tarayıcıda çalışsa bile başka birinde başarısız olabilir.

İkinci olarak, görsel olarak basit tutun. SVG, 16 piksel sorununu sihirli biçimde çözmez. Ayrıntılı bir vektör illüstrasyon, sekmeye sıkıştırıldığında hâlâ bulanıktır.

Üçüncü olarak, dinamik stillendirme konusunda dikkatli olun. Bazı ekipler, simgenin koyu ve açık tarayıcı temalarına uyum sağlaması için SVG favicon içinde prefers-color-scheme kullanır. Bu çalışabilir, ancak tarayıcı davranışı ve önbellekleme düzensiz olabilir. Marka tanınırlığı önemliyse, tek bir sağlam simge çoğu zaman zekice uyarlanan bir simgeden daha iyidir.

SVG iyi bir kaynak ve iyi bir modern teslim formatıdır. Geri dönüş dosyalarını atlamak için bir neden değildir.

Tarayıcılar gerçekte ne arar

Tarayıcılar favicon’ları iki ana yolla keşfeder: açık HTML bağlantıları ve örtük kök istekleri.

Örtük davranış eski olandır: tarayıcı bir simge ister ve bir tane bulamamışsa /favicon.ico isteyebilir. Kök ICO dosyasının modern sitelerde bile kullanışlı kalmasının nedeni budur.

Açık davranış, belge head bölümündeki <link> öğelerini kullanır. Kompakt ve modern bir kurulum şöyle görünür:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest daha sonra kurulabilir web uygulamaları için kullanılan daha büyük PNG simgelerine işaret edebilir:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Bu tek geçerli kurulum değildir, ancak iyi bir başlangıç çizgisidir. Modern tarayıcılara bir SVG verir, geleneksel bir ICO geri dönüşü sağlar, iOS ana ekran kayıtlarını kapsar ve uygulama kurulumu bağlamlarını destekler.

Çoğu sitenin sunması gereken favicon seti

Normal bir pazarlama sitesi, dokümantasyon sitesi, SaaS uygulaması veya yayın için bu set yeterlidir:

• 16×16 ve 32×32, isteğe bağlı olarak 48×48 içeren /favicon.ico.
• Modern ölçeklenebilir favicon olarak /icon.svg.
• 180×180 boyutunda /apple-touch-icon.png.
• Web app manifest’iniz varsa /icon-192.png ve /icon-512.png.

Bir platformun belirli bir gereksinimi varsa daha fazla boyut ekleyebilirsiniz, ancak alışkanlık gereği on dosya üretmeyin. Her ek dosya, önbelleğe alınacak, unutulacak, yanlış adlandırılacak veya yeniden markalaşmadan sonra bayat kalacak başka bir şeydir.

Siteniz kurulabilir değilse ve manifest’i yoksa 192 ve 512 piksellik simgelere ihtiyacınız olmayabilir. Siteniz bir uygulama gibi davranıyorsa büyük olasılıkla ihtiyacınız vardır.

Yaygın hata biçimleri

En yaygın favicon hataları sanatsal değildir. Bunlar teslimat sorunlarıdır.

Bunlardan biri agresif önbelleklemedir. Tarayıcılar favicon’lara inatla tutunur. Test sırasında değişen bir simge, sert yenileme yapana, site verilerini temizleyene, yeni bir dosya adı kullanana veya temiz bir profilde test edene kadar görünmeyebilir. Üretim ortamındaki yeniden markalaşmalarda HTML içinde /icon.svg?v=2 olarak değiştirmek yardımcı olabilir, ancak kök /favicon.ico daha zordur çünkü tarayıcılar onu doğrudan ister. Dosyayı değiştirmek ve önbelleklerin süresini doldurmasını beklemek çoğu zaman işin bir parçasıdır.

Bir başka yaygın sorun yanlış MIME türüdür. SVG image/svg+xml, PNG image/png, ICO ise genellikle image/x-icon veya image/vnd.microsoft.icon olarak sunulmalıdır. Birçok tarayıcı hoşgörülüdür, ancak tüm bağlamlar değildir. Bir şey yalnızca tek bir tarayıcıda başarısız oluyorsa, simgeyi yeniden çizmeden önce ağ yanıtını inceleyin. Üretimde yönlendirmeleri ve HTTP başlıklarını hata ayıklarken kullanılan aynı alışkanlıklar burada da geçerlidir: CMS’in ne sunduğunu iddia ettiğine değil, gerçek yanıta bakın.

Üçüncü konu tasarım yoğunluğudur. Bir web sitesi başlığında harika çalışan logolar, favicon olarak çoğu zaman başarısız olur. Sekme simgesi acımasız bir testtir. Kelimeleri çıkarın, şekilleri sadeleştirin, kontrastı artırın ve gerçek boyutlarda test edin. Simge sayfa içinde anlamlı bir içerikse alt text gibi erişilebilirlik konuları önemlidir; favicon’un kendisi içinse bu, sayfa içeriği değil tarayıcı arayüzü dekorasyonudur. Bu ayrım için image alt text konusunda pragmatik rehberimize bakın.

<!-- tool-cta:start -->

💡 Bunu deneyin: Modern tarayıcıların beklediği ICO, PNG ve SVG varyantlarını tek seferde Ultimate Favicon Generator ile oluşturun.

<!-- tool-cta:end -->

Basit bir uygulama kontrol listesi

Yayına almadan önce bu kontrol listesini kullanın:

1. Temiz bir vektör ana dosyadan başlayın.
2. İşareti 16×16 ve 32×32’de test edin.
3. Kendi kendine yeterli bir SVG favicon dışa aktarın.
4. Çok boyutlu bir ICO geri dönüşü üretin.
5. 180×180 Apple touch icon dışa aktarın.
6. Manifest kullanıyorsanız 192×192 ve 512×512 PNG’ler ekleyin.
7. /favicon.ico dosyasını site köküne koyun.
8. Durum kodlarını, MIME türlerini ve önbellekleme başlıklarını doğrulayın.
9. Kitleniz Apple cihazları içeriyorsa en az bir Chromium tarayıcıda, Firefox’ta ve Safari’de test edin.

Favicon’lar küçüktür, ancak aynı zamanda son derece görünürdür. Bozuk bir favicon, sitenin yarım kalmış hissettirmesine neden olur. İyi yapılmış bir favicon arayüzün içinde kaybolur; zaten tam olarak amaç da budur.