Favicon Nedir ve Web Siteniz İçin Neden Önemlidir?

Favicon ("favorite icon", yani favori simge ifadesinin kısaltması), bir web sitesini tarayıcı sekmelerinde, yer imlerinde, geçmiş listelerinde, Google arama sonuçlarında, telefon ana ekranlarında ve yüklü web uygulamalarında temsil eden küçük kare görseldir. Önemlidir, çünkü sitenize bir bakışta tanınabilen bir yüz kazandırır, açık çok sayıda sekme arasında sitenizi bulmayı kolaylaştırır, sitenin profesyonel ve güvenilir olduğunu gösterir ve artık Google sonuçlarında site adınızın yanında gösterilmektedir. Favicon yoksa ziyaretçiler genel bir dünya simgesi ya da boş sayfa simgesi görür, sunucunuz da günlüklerini 404 hatalarıyla doldurur. MakeFav favicon oluşturucu ile eksiksiz bir favicon setini ücretsiz oluşturabilirsiniz.

Favicon nedir?

Favicon, genellikle bir logonun sadeleştirilmiş hali ya da tek bir harf veya sembol olan, tarayıcıların ve diğer yazılımların web sitenizden alıp kompakt bir görsel kimlik gerektiren her yerde gösterdiği küçük markalı bir grafiktir. Masaüstü tarayıcıda genellikle 16 x 16 CSS pikseli olarak çizilir; ancak yüksek yoğunluklu ekranlarda net görünmesi için dosyanın kendisi daha büyük olmalıdır.

Teknik olarak favicon, HTML'nizden referans verilen (veya varsayılan bir konumda bulunan) ve kullanıcı aracılarının sayfa içeriğinden ayrı olarak indirdiği bir görsel dosyadır. Bugün "favicon" nadiren tek bir dosyadan oluşur. Modern bir site genellikle aynı simgenin birkaç sürümünü sunar; böylece tarayıcılar, arama motorları, iOS ve Android kendilerine uygun bir format ve boyut alır.

Faviconun kısa tarihçesi

Favicon, Microsoft'un Internet Explorer 5'i yayınladığı Mart 1999 tarihine dayanır. Tarayıcı, kullanıcıların sayfaları bir "Favoriler" listesine kaydetmesine izin veriyordu ve kaydedilen her girişin yanında göstermek için sitenin kök dizininde favicon.ico adlı küçük bir simge dosyası arıyordu. Fikir basitti: bir site /favicon.ico sunarsa simge yer iminin yanında görünürdü.

Diğer tarayıcılar da kısa sürede bu özelliği benimsedi ve sekmeli gezinme onu çok daha yararlı hale getirdi. Sekmeler gezinmenin ana yolu haline geldikçe favicon, yer imi süsünden temel bir gezinme yardımcısına dönüştü. Yıllar içinde yaklaşım şöyle gelişti:

• 2000'lerin başı: <link rel="icon"> öğesi, sitelerin yalnızca kök dizin yerine herhangi bir URL'deki simgeyi göstermesine olanak tanıdı; PNG ve GIF dosyaları da IE dışındaki tarayıcılarda kabul edilmeye başladı.
• 2010'lar: Apple, iOS ana ekranları için apple-touch-icon özelliğini getirdi; Android ve Windows da manifest simgeleri ve döşeme görselleri gibi kendi kurallarını ekledi.
• Bugün: SVG faviconlar, web uygulaması manifestleri, karanlık modu tanıyan simgeler ve Google'ın arama sonucu favicon gereksinimleri, faviconu bir sitenin teknik kurulumunun küçük ama gerçek bir parçası haline getirdi.

Faviconlar bugün nerelerde görünür?

Faviconunuz tarayıcı sekmesinden çok daha fazla yerde gösterilir. Başlıca yerler şunlardır:

• Tarayıcı sekmeleri: En görünür yerdir; çok sayıda sekme açıkken genellikle görebildiğiniz tek şey simgedir.
• Yer imleri ve favoriler: Simge, yer imi çubuklarında ve menülerinde sayfa başlığının yanında durur.
• Geçmiş ve en çok ziyaret edilen sayfalar: Tarayıcılar faviconları geçmiş listelerinde ve yeni sekme sayfalarında gösterir.
• Google arama sonuçları: Hem mobilde hem masaüstünde Google, sitenin faviconunu site adı ve URL'nin yanında gösterir.
• Ana ekranlar: Bir ziyaretçi sitenizi iOS veya Android ana ekranına eklediğinde, dokunma simgesi ya da manifest simgesi uygulama tarzı kısayol olur.
• Yüklü PWA'lar: Aşamalı web uygulaması (PWA), başlatıcı simgesi, açılış ekranı ve görev değiştirici için web uygulaması manifestindeki simgeleri kullanır.
• Windows döşemeleri ve sabitlenmiş siteler: Eski Windows ve Edge sürümleri, sabitlenmiş siteler için tanımlanan döşeme görsellerini kullanıyordu; modern sürümler çoğunlukla standart simgelerinizi yeniden kullanır.
• Bazı uygulamalardaki bağlantı önizlemeleri: Bazı sohbet ve üretkenlik araçları (Slack iyi bilinen bir örnektir) açılan bir bağlantının yanında sitenin faviconunu gösterir. Çoğu önizleme ağırlıklı olarak Open Graph görsellerine dayanır, ancak küçük marka işaretini çoğunlukla favicon sağlar.

Favicon web siteniz için neden önemlidir?

Marka bilinirliği

İnsanlar renkleri ve şekilleri metni okumaktan daha hızlı tanır. Sekmelerde, yer imlerinde ve arama sonuçlarında tekrar eden tutarlı bir simge, her görüldüğünde aşinalık oluşturur; bu da her ziyarette ücretsiz marka görünürlüğü demektir.

Güven ve itibar

Eksik bir favicon, sitenin yarım kalmış gibi görünmesine neden olur. Temiz ve doğru işlenmiş bir simge, birinin ayrıntılara önem verdiğine dair küçük bir işarettir ve sitenin meşru olduğu algısını destekler. Bir güvenlik özelliği değildir ve oltalama siteleri simgeleri kopyalayabilir; ancak boş bir varsayılan simge, bir işletmenin köklü görünmesine nadiren yardımcı olur.

Arama sonuçlarında tıklama oranı

Google faviconu listelemenizin yanında gösterdiği için, sonucunuzun rakiplerin yanında nasıl göründüğünün bir parçası olur. Google, faviconlar için yayımlanmış bir sıralama etkisi belirtmez ve sıralamanızın yükseleceğini beklememelisiniz. Yarar, görsel tanınırlıkla ilgilidir: simgenizi tanıyan kullanıcıların, özellikle sonuçların kompakt olduğu mobilde, sonucunuzu fark edip seçme olasılığı daha yüksektir.

Çok sayıda açık sekmede kullanılabilirlik

Bir tarayıcıda yirmi sekme açıkken başlıklar kısalıp yok olur ve geriye yalnızca favicon kalır. Ayırt edici bir simge, insanların sekmenizi anında bulup tekrar açmak veya unutmak yerine ona geri dönmesini sağlar.

Profesyonel izlenim

İyi tasarlanmış bir favicon, sitenizin geri kalanındaki ayrıntı özenini gösterir. Ürün sayfaları, dokümantasyon, bloglar ve web uygulamaları için eklenebilecek en ucuz cila öğelerinden biridir.

Sekme bulmada erişilebilirlik

Simgeler, okumak yerine gözle tarayan kullanıcılara, disleksisi veya bilişsel farklılıkları olan kişiler de dahil, ve görevler arasında hızlı geçiş yapan herkese yardımcı olur. Yüksek kontrastlı ve basit şekilli bir simgeyi seçmek daha kolaydır. Ancak unutmayın, favicon bir tamamlayıcıdır: ekran okuyucuların ve yardımcı teknolojilerin dayandığı net bir sayfa başlığının yerini tutmaz.

Favicon olmazsa ne olur?

Tarayıcılar, HTML'nizde bir simgeden söz edilmese bile alan adınızın kökünden otomatik olarak /favicon.ico dosyasını ister. Dosya yoksa birkaç şey olur:

• Genel simge: Ziyaretçiler sekmede ve yer imlerinde varsayılan bir dünya, belge ya da boş simge görür; bu da anonim bir izlenim verir.
• Günlüklerinizde 404 hataları: Dosyayı isteyen her tarayıcı başarısız bir istek oluşturur. Yoğun sitelerde bu, erişim günlüklerine, hata izlemeye ve analitiğe gürültü ekler ve gerçek sorunları gizleyebilir.
• Google sonuçlarında simge yok: Geçerli ve taranabilir bir favicon olmadan Google, listelemenizin yanında varsayılan yer tutucusunu gösterir.
• Boşa giden istekler: Tarayıcılar yeniden deneyebilir ve sunucunuza küçük ama anlamsız bir yük bindirebilir.

Çok basit bir simge bile hiç olmamasından iyidir, çünkü 404'leri ortadan kaldırır ve kullanıcılara tanınabilir bir şey sunar.

Favicon formatları açıklandı

Tek bir format her platformu kapsamaz, bu nedenle çoğu site küçük bir dosya seti kullanır.

Eski Windows döşeme görselleri (browserconfig.xml ile yapılandırılan), Internet Explorer 11 ve eski Edge için gerekliydi. Bu ortamları desteklemeniz gerekmiyorsa artık nadiren gereklidir.

Google'ın arama sonuçları için favicon yönergeleri

Simgenizin Google Arama'da görünmesini istiyorsanız Google'ın yayımladığı gereksinimlere uyun:

• Boyut: Görsel kare (1:1) olmalı ve 48 pikselin katı olmalıdır; örneğin 48x48, 96x96 veya 144x144. Google daha sonra görüntülemek için bunu 16x16'ya küçültür. Desteklenen en küçük boyut 8x8'dir, ancak 48x48 veya daha büyüğü önerilir.
• Formatlar: ICO, PNG ve SVG dahil tarayıcıların desteklediği her format çalışır.
• Kararlı URL: Favicon URL'sini sık sık değiştirmeyin. Kararlı bir adres, Google'ın simgenizi güncel tutmasına yardımcı olur.
• Taranabilir: Hem favicon dosyası hem de ana sayfanız Googlebot tarafından erişilebilir olmalıdır. Bunları robots.txt ile veya bir girişin arkasında engellemeyin.
• Site başına tek bildirim: Simge sitenin ana sayfasına bağlıdır, bu nedenle <link> etiketini ana sayfanızın head bölümüne koyun.
• Temsil edici ve uygun: Simge markanızı yansıtmalıdır; Google, saldırgan veya yanıltıcı bir simgeyi varsayılanıyla değiştirebilir.

Bir favicon yayımladıktan veya değiştirdikten sonra Google'ın bunu yeniden tarayıp güncellemesi günler ya da haftalar sürebilir, bu yüzden anında değişiklik beklemeyin.

MakeFav ile hızlıca favicon nasıl oluşturulur?

Tasarım yazılımına ya da komut satırına ihtiyacınız yok. MakeFav oluşturucu, tek bir kaynak görseli yukarıda açıklanan dosyalara dönüştürür.

1. Çalışmanızı hazırlayın. 512 x 512 px veya daha büyük kare bir logo ya da sembol kullanın. Simge 16 px'te görüleceği için basit şekiller en iyi sonucu verir.
2. Yükleyin: MakeFav ana sayfasında yükleyin ya da dışa aktarmadan önce görseli, arka planı ve dolguyu ayarlamak için editörü açın.
3. Önizleyin: Okunabilir kaldığından emin olmak için sonucu küçük boyutlarda ve açık ile koyu arka planlarda önizleyin.
4. Paketi indirin. Paket; ICO, PNG boyutları, Apple touch icon, manifest simgeleri ve yapıştırılacak HTML kod parçasını içerir.
5. Dosyaları yükleyin: Dosyaları web sitenizin köküne yükleyin; böylece /favicon.ico gibi yollardan erişilebilir olurlar.
6. HTML'yi ekleyin: Kodu her sayfanın <head> bölümüne veya ortak düzeninize ya da şablonunuza ekleyin.
7. Doğrulayın: favicon denetleyici ile kontrol edin, ardından yeni simgeyi görmek için tarayıcı önbelleğinizi temizleyip sayfayı yeniden yükleyin.

Örnek HTML kod parçası

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

ICO bağlantısındaki sizes="48x48" özniteliği, tarayıcıların destekledikleri durumda SVG'yi tercih etmesine yardımcı olurken ICO'yu yedek olarak tutar. 96 px'lik PNG, Google'ın 48'in katı kuralını karşılar.

Örnek web uygulaması manifesti

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Derleme süreçleriyle çalışıyorsanız veya simge oluşturmayı otomatikleştirmek istiyorsanız geliştirici kaynaklarına göz atın.

İşe yarayan bir favicon için tasarım ipuçları

• Basit tutun. Tek bir şekil, tek bir harf veya kalın bir monogram, 16 px'te bulamaca dönüşen ayrıntılı bir logodan daha iyidir.
• Güçlü kontrast kullanın. Simgenin hem açık hem koyu tarayıcı temalarında görünür olduğundan emin olun. Renkli bir arka plan karosu yardımcı olur.
• Metinden kaçının. Tek bir baş harf uygundur; kelimeler bu boyutta okunamaz.
• Biraz boşluk bırakın: Maskelenebilir ve yuvarlak köşeli simgelerde önemli hiçbir şey kırpılmasın diye dolgu bırakın.
• Tutarlı kalın: Favicon tanınırlığı pekiştirsin diye logonuzla ve marka renklerinizle uyumlu olsun.
• Gerçek cihazlarda test edin ve bir sekmede, bir yer iminde ve bir Google sonucunda nasıl göründüğünü kontrol edin.

Sık karşılaşılan favicon sorunları

Simgeniz görünmüyorsa olağan nedenler önbellekleme, yanlış yollar ve engellenmiş dosyalardır. Tarayıcılar faviconları agresif biçimde önbelleğe alır, bu nedenle güncellemeleri görmek için çoğu zaman sert yenileme veya yeni bir gizli pencere yeterlidir. Dosya URL'sinin 200 durumu ve doğru içerik türü döndürdüğünü, <link> etiketinin <head> içinde olduğunu kontrol edin. Arama için robots.txt dosyasının simgeyi veya ana sayfayı engellemediğinden emin olun. MakeFav denetleyici, bu sorunları hızla tespit etmenize yardımcı olabilir.

Sık sorulan sorular

Favicon ne anlama gelir?

Favicon, "favorite icon" (favori simge) ifadesinin kısaltmasıdır. Ad, 1999'da tarayıcının Favoriler listesindeki girişleri süslemek için ilk kez küçük bir simge dosyası kullanan Internet Explorer 5'ten gelir. Simge artık pek çok başka yerde görünse de terim yerleşmiştir.

Favicon SEO'ya yardımcı olur mu?

Favicon doğrudan bir sıralama faktörü değildir. Ancak mobil ve masaüstünde Google sonuçlarında site adınızın yanında göründüğü için marka tanınırlığını ve listelemenizin görsel çekiciliğini artırabilir; bu da dolaylı olarak tıklamaları destekleyebilir. Simgenin gösterilmeye uygun olmasını sağlayan şey Google'ın yönergelerine uymaktır.

Favicon boyutu ne olmalı?

Google Arama için 48 pikselin katı olan kare bir görsel kullanın; örneğin 48x48 veya 96x96. Daha geniş kapsama için ayrıca bir ICO dosyası, 180x180 Apple touch icon ile 192x192 ve 512x512 manifest simgeleri sağlayın. Ölçeklenebilirlik için SVG iyi bir ektir.

PNG veya SVG kullanıyorsam hâlâ favicon.ico'ya ihtiyacım var mı?

Hâlâ iyi bir fikirdir. Tarayıcılar ve bazı araçlar varsayılan olarak /favicon.ico ister ve eski yazılımlar buna dayanır. Site kökünde bir ICO dosyası bulundurmak 404 hatalarını önler ve SVG veya PNG desteklenmediğinde size güvenli bir yedek sağlar.

Faviconum neden güncellenmiyor?

Tarayıcılar ve arama motorları faviconları uzun süre önbellekte tutar. Sert yenileme yapmayı, gizli pencere kullanmayı veya önbelleği temizlemeyi deneyin. Dosya yolunun doğru olduğundan ve yeni dosyanın sunulduğundan emin olun. Google Arama'da değişen bir simgenin yeniden taranıp güncellenmesi günler ya da haftalar alabilir.