- Katılım
- 21 May 2023
- Mesajlar
- 602
- Tepki
- 17
- Puan
- 18
Sekme çubuğunda sitenizin adının yanında boş bir kâğıt simgesi duruyorsa, tarayıcı aradığı ikonu bulamamış demektir. Küçük bir ayrıntı gibi görünüyor; oysa açık duran onlarca sekme arasında sitenizi ayırt edilebilir kılan tek işaret çoğu zaman o kare.
Aşağıda favicon'un ne olduğunu, HTML tarafında hangi satırla tanımlandığını, boyut ve tür bilgisinin ne işe yaradığını ve ikon görünmediğinde nereye bakılacağını standardın ve MDN'nin kendi metinlerine dayanarak bulacaksınız.
Favicon nedir?
Favicon, tarayıcının sekmede, yer imlerinde ve geçmiş listesinde sayfayı temsil etmek için gösterdiği küçük simge. HTML Standardı'nın icon bağlantı türü tanımına göre bu bağlantı, geçerli belgeyi temsil edecek bir ikonu içe aktarıyor.
Standart bir noktayı da netleştiriyor: `icon` bağlantı türü yalnız `link` elemanıyla kullanılıyor, `a` ve `area` elemanlarında geçerli değil. Yani favicon bir bağlantı etiketiyle değil, belgenin başındaki `link` satırıyla tanımlanıyor.
Siteye nasıl eklenir?
En yalın hâli tek satır. MDN'nin link elemanı referansında verilen temel örnekte `rel` değeri `icon`, `href` değeri de ikon dosyasının yolu oluyor; klasik kullanım kökteki `favicon.ico` dosyasını gösteriyor.
Dosyayı yerleştirdikten sonra iki şeyi doğrulamak yeterli: adresin tarayıcıda doğrudan açıldığını ve sayfanın kaynağında `link` satırının başlık bölümünde yer aldığını. Tarayıcılar site kökündeki ikon dosyasını kendiliğinden de arıyor, ancak satırı açıkça yazmak varsayılan davranışa bağımlı kalmamanızı sağlıyor.
sizes ve type ne işe yarıyor?
Standart, `sizes` özniteliğini görsel ortamlar için ikon boyutlarını veren bir bilgi olarak tanımlıyor ve değerinin yalnız yol gösterici olduğunu söylüyor. Geçerli değerler ya büyük-küçük harf duyarsız biçimde `any`, ya da baştaki sıfırlar olmadan `x` ile ayrılmış iki tam sayı.
`type` özniteliği ise dosyanın MIME türünü bildiriyor. Standardın ifadesiyle bu, kullanıcı aracılarının desteklemedikleri kaynakları getirmekten kaçınabilmesi için bir ipucu; yine de aracıların gerçek içerik türünü doğrulaması gerekiyor.
- sizes: Hangi ikonun hangi boyut için düşünüldüğünü bildirir, zorlayıcı değildir.
- type: Dosya biçimini önceden haber verir, gereksiz indirmeyi önler.
- href: İkonun adresi; kök dizin ya da alt klasör fark etmez, yol doğru olmalıdır.
Dosya biçimini bildirmek
MDN'nin öznitelik tablosunda `type` değerinin MIME türünü gösterdiği, örnek olarak da `image/png` verildiği görülüyor. Kullandığınız dosya PNG ise türü bildirmek, desteklemeyen bir aracının dosyayı boşuna indirmesini önlüyor.
Belgeyi XHTML olarak sunuyorsanız küçük bir sözdizimi ayrıntısı daha var: MDN, boş elemanların kapanış eğik çizgisiyle yazılması gerektiğini hatırlatıyor. Sıradan HTML sayfalarında bu zorunluluk bulunmuyor.
Birden fazla ikon tanımlamak
Tek bir kare her yere yetmiyor: sekme çubuğu küçük bir sürüm isterken, ana ekrana eklenen kısayol çok daha büyüğünü kullanıyor. Standart birden fazla ikon tanımlanmasına izin veriyor ve birden çok ikon mevcutsa kullanıcı aracısının hangisini kullanacağına `sizes` değerine bakarak karar verebileceğini söylüyor; zorunlu bir seçim algoritması tanımlanmış değil.
MDN'nin örneklerinde Apple cihazları için ayrı satırlar veriliyor: farklı `sizes` değerleriyle tanımlanmış kısayol ikonları ve yanında kökteki temel ikon. Aynı yaklaşımı kendi sitenizde de kullanabilir, en azından bir küçük bir de büyük sürüm tanımlayabilirsiniz.
Kontrol noktası' Alıntı:
Görünmüyorsa nereye bakmalı?
Sıra basit: önce ikon adresini tarayıcıda tek başına açın, dosya geliyor mu görün. Geliyorsa `link` satırının doğru yerde ve doğru yolu gösterdiğini denetleyin. İkisi de tamamsa güvenlik politikası başlıklarını kontrol edin.
Site genelinde küçük ama görünür ayrıntıları toparlıyorsanız, sayfanın klavyeyle kullanımını tab sırası ve odak testini anlattığımız yazıdaki yöntemle sınamak iyi bir ikinci adım. Tasarım kararlarının bütününe web tasarımını tanıttığımız yazıdan bakabilir, sayfa ağırlığı ve istek sayısı tarafını da web performans optimizasyonunu derlediğimiz yazıyla birlikte ele alabilirsiniz.
Sık Sorulan Sorular
Favicon nedir, ne işe yarar?
Tarayıcının sekmede ve yer imlerinde sayfayı temsil etmek için gösterdiği ikondur. HTML Standardı bunu, geçerli belgeyi temsil eden bir ikonun içe aktarılması olarak tanımlıyor.
Favicon nasıl eklenir?
Belgenin başlık bölümüne `rel` değeri `icon` olan bir `link` satırı yazılır ve `href` ile ikon dosyasının yolu verilir.
sizes özniteliğini yazmak zorunlu mu?
Hayır. Standart `sizes` değerinin yalnız yol gösterici olduğunu söylüyor; birden çok ikon varsa tarayıcı seçim yaparken bu değere bakabiliyor.
Birden fazla favicon tanımlanabilir mi?
Evet. Standart birden çok ikon tanımlanmasına izin veriyor; hangisinin kullanılacağına dair zorunlu bir algoritma tanımlanmamış.
Favicon neden görünmüyor?
Önce dosya adresinin doğrudan açılıp açılmadığına, sonra `link` satırının doğru yolu gösterip göstermediğine bakın. İkisi de tamamsa içerik güvenlik politikasının `img-src` yönergesi ikonu engelliyor olabilir.
Özetle
Favicon, belgeyi temsil eden ikonu `link` elemanıyla tanımlamaktan ibaret. `sizes` ve `type` öznitelikleri tarayıcıya yol gösteriyor, zorlayıcı kural koymuyor; birden çok ikon tanımlamak da standardın izin verdiği bir yaklaşım. Görünmeme durumunda sıra dosya adresi, satırın kendisi ve güvenlik politikası şeklinde işliyor.
Sitenizde sekme ikonunun küçük ve büyük sürümleri ayrı ayrı tanımlı mı?
Güncelleme: 26 Ağustos 2026.
Dijital Dünyanıza Yön Veren Pusula
