Favicon Bulucu ve Denetleyici
Sitenin simgelerini gerçek ölçüleriyle çıkarıyoruz. Tahmini boyut yok: her satır dosyanın kendisinden okunuyor.
Ana sayfa açılır, bildirilen bütün simgeler indirilir ve gerçek ölçüleri okunur. Adresiniz kayda geçmez.
Bulunan simgeler
Google için değerlendirme
Giriş
Favicon, sitenizin sekmede, yer imlerinde ve Google'ın mobil arama sonuçlarında görünen küçük karesi. Küçük olması önemsiz olduğu anlamına gelmiyor: telefonda arama sonucunda her satırın başında o kare duruyor ve markanızı bir anda tanıtan tek görsel o.
Bu araç bir sitenin bildirdiği bütün simgeleri buluyor, hepsini indiriyor ve gerçek ölçüsünü dosyanın kendisinden okuyor. Sonra Google'ın simge göstermek için aradığı şartları tek tek denetliyor.
Aşağıda simgenin nerede bildirildiğini, Google'ın tam olarak ne istediğini, hangi boyutların gerçekten gerektiğini ve simgenin neden görünmediğini anlatıyoruz.
Favicon nedir?
Tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında sitenizin adının yanında görünen küçük simgeye favicon deniyor. Adı "favorite icon" kısaltmasından geliyor; Türkçede "site simgesi" ya da "sekme simgesi" karşılıkları kullanılıyor. Denetimini yapan araçlara İngilizcede favicon checker deniyor.
Bugün tek bir dosya yetmiyor. Tarayıcı sekmesi için küçük bir simge, telefon ana ekranına eklendiğinde için daha büyük bir sürüm, koyu tema için ayrı bir varyant gerekebiliyor. Bunlar sayfanın <head> bölümünde rel="icon" ve rel="apple-touch-icon" etiketleriyle bildiriliyor.
Araç sayfayı açıp bu etiketleri okuyor, dosyaların gerçekten açılıp açılmadığını sınıyor ve boyutlarını indirip ölçerek yazıyor. Etikette yazan boyuta güvenmiyor: orada yazan değer sık sık dosyanın gerçek boyutuyla uyuşmuyor.
Neden arama sonucunda görünüyor?
Google 2019'dan beri mobil arama sonuçlarında site adının yanında favicon gösteriyor. Sonuç listesinde sizi rakiplerinizden ayıran ilk görsel işaret bu; metin okunmadan önce göze çarpıyor.
Google'ın favicon'u gösterebilmesi için birkaç koşul var: dosyanın taranabilir olması, kare olması ve kenarının 8 pikselin katı olması. Bunlardan biri tutmazsa Google yerine varsayılan bir yer tutucu koyuyor.
Küçük bir ayrıntı gibi görünüyor ama tıklanma oranını etkileyen görünür bir farkı var; üstelik bir kez düzeltilip unutuluyor.
Neden "tahmini" boyut göstermiyoruz?
Bu işi yapan araçların çoğu şöyle çalışıyor: sitenin simgesini bir yeniden boyutlandırma servisine gönderiyor ve size "16×16, 32×32, 64×64, 128×128, 256×256 (tahmini)" diye beş altı satır gösteriyor.
O satırların hiçbiri sitenin gerçeğini anlatmıyor. Servis elindeki tek dosyayı istediğiniz boyuta ölçekliyor; sitede 256 piksellik bir simge olmasa da size "256×256" satırı gösteriliyor. Yani liste ne kadar uzun olursa olsun, sitenin kaç simgesi olduğu hakkında hiçbir bilgi vermiyor.
Burada listelenen her satır sitenin gerçekten bildirdiği bir dosya. Ölçüler de sizes özniteliğinden okunan beyan değil, dosyanın kendi başlığından okunan gerçek en-boy. İkisi tutmadığında bunu da söylüyoruz; sizes="32x32" yazan bir etiketin arkasında 16 piksellik dosya bulunması sık görülen ve fark edilmeyen bir hata.
ICO dosyaları özel bir durum: tek dosyanın içinde birden çok boyut olabiliyor. Araç dizini okuyup içindeki bütün boyutları gösteriyor.
Google simgeyi ne zaman gösteriyor?
Google'ın şartları belgelenmiş ve sanılandan az. İnternette dolaşan "48'in katı olmalı" kuralı Google'ın güncel belgesinde yok.
Kare olmalı. En ve boy eşit değilse Google simgeyi hiç göstermiyor.
En az 8 piksel. Alt sınır bu; ama Google 48 pikselin üstünü öneriyor, çünkü simge farklı yüzeylerde farklı boyutlarda gösteriliyor ve küçük dosya büyütüldüğünde bulanıklaşıyor.
Ana sayfada bildirilmeli. Google simgeyi sitenin ana sayfasından okuyor, iç sayfalardan değil. Bu yüzden araç, hangi adresi girerseniz girin kökten bakıyor.
rel değeri üçünden biri olmalı: icon, apple-touch-icon ya da apple-touch-icon-precomposed. mask-icon ve manifest içindeki simgeler tarayıcılar için geçerli ama Google onları okumuyor.
Taranabilir olmalı. Googlebot ana sayfayı, Googlebot-Image de simge dosyasını tarayabilmeli. robots.txt ile kapatılmış bir simge görünmüyor; bunu robots.txt test ediciyle sınayabilirsiniz.
Adres kalıcı olmalı. Her yayında değişen bir dosya adı (favicon.a3f9c1.png gibi) Google'ın simgeyi tanımasını zorlaştırıyor.
Gerçekte kaç dosya gerekiyor?
Eskiden favicon kurulumu on beş satırlık bir etiket yığınıydı: her cihaz için ayrı boyut, ayrı dosya. Bugün gerek yok.
Modern ve yeterli kurulum üç dosya: bir SVG (vektör, her boyutta keskin), bir 180 piksellik PNG (Apple cihazlarda ana ekrana eklendiğinde kullanılıyor) ve bir favicon.ico (eski tarayıcılar ve /favicon.ico yolunu doğrudan isteyen istemciler için).
SVG desteklenmeyen yerlerde ICO devreye giriyor; ICO dosyasının içine 32 ve 48 piksellik iki kare koymak yeterli. Üçünden fazlası bakım yükü, faydası yok.
Etiketlerin kendisi de üç satır: rel="icon" ile SVG, rel="apple-touch-icon" ile PNG, ve favicon.ico zaten kökten okunuyor. Araç bu üçünden hangisinin eksik olduğunu size söylüyor.
Bir de karanlık tema ayrıntısı var: SVG içinde prefers-color-scheme kullanarak simgeyi koyu sekmede farklı gösterebiliyorsunuz. Küçük bir detay ama sekmede kaybolmayan bir logo, kaybolan bir logodan iyi.
Simgem neden görünmüyor?
En sık dört sebep var ve dördü de bu araçla görülebiliyor.
Simge kare değil. Google kare olmayan simgeyi hiç göstermiyor. Araç ölçüyü dosyadan okuduğu için bunu doğrudan söylüyor.
rel değeri Google'ın okuduğu üçünden biri değil. Yalnız mask-icon ya da yalnız manifest içinde simge bildiren siteler bu duruma düşüyor. ikas.com bunun canlı bir örneği: hiç link rel="icon" etiketi yok, simge yalnız geleneksel /favicon.ico yolundan bulunuyor.
Dosya açılmıyor. Etiket duruyor ama adres 404 dönüyor ya da robots.txt ile kapatılmış. Araç her simgeyi gerçekten indirdiği için açılmayanları ayrıca işaretliyor.
Henüz taranmadı. Simgeyi yeni koyduysanız sabır gerekiyor: Google ana sayfayı yeniden tarayıp işleyene kadar birkaç gün ile birkaç hafta geçebiliyor.
Bir de beşinci ve nadir sebep var: Google uygunsuz bulduğu simgeleri göstermiyor ve yerine varsayılan bir ikon koyuyor.
Sık sorulanlar
Simge kurulumu bir kez yapılıp unutulan işlerden ama birkaç ayrıntısı sonradan sorun çıkarıyor. Aşağıdaki dört soru en sık gelenler; cevaplarda ne zaman uğraşmaya değmediğini de yazdık.
Favicon sıralamamı etkiler mi?
Hayır. Favicon bir sıralama sinyali değil; Google sıralamayı belirlerken simgeye bakmıyor.
Etkilediği şey tıklanma. Mobil arama sonuçlarında her satırın başında simge duruyor ve simgesi olan bir sonuç, boş kare gösteren bir sonuçtan daha kurumsal görünüyor. Aynı sırada duran iki sonuçtan hangisinin tıklandığını bu tür küçük şeyler belirliyor.
Yani favicon'a harcanacak yarım saat, sıralama için değil, aynı sırada daha çok tıklanmak için harcanmış oluyor. Arama sonucundaki diğer görünür alanlar için başlık ve açıklama üreticisine bakabilirsiniz.
SVG favicon kullanabilir miyim?
Kullanabilirsiniz ve çoğu durumda en iyi seçenek. Vektör olduğu için her boyutta keskin çıkıyor ve tek dosya bütün ekranları karşılıyor.
Bütün modern tarayıcılar destekliyor. Desteklemeyen eski istemciler için yanına bir favicon.ico koymak yeterli; tarayıcı SVG'yi okuyamadığında ona düşüyor.
Google tarafında da sorun yok: belge "geçerli herhangi bir favicon biçimi" diyor. Yine de simgenizin aramada göründüğünü kendi aramanızla doğrulamakta fayda var.
Simgeyi değiştirdim, Google ne zaman görür?
Ana sayfanın yeniden taranmasına bağlı; Google birkaç gün ile birkaç hafta arası bir süre söylüyor.
Hızlandırmanın yolu Search Console'daki "URL denetimi" aracıyla ana sayfa için yeniden tarama istemek. Bu bir garanti değil, sıraya girme talebi.
Bir uyarı: dosya adını değiştirdiyseniz süreç uzuyor. Aynı adreste dosyanın içeriğini değiştirmek, yeni bir adrese geçmekten daha hızlı sonuç veriyor. Google'ın "adres kalıcı olmalı" önerisinin sebebi de bu.
Girdiğim adres kaydediliyor mu?
Hayır. Ana sayfa ve simge dosyaları sunucumuz üzerinden bir kez indiriliyor; sayfa da simgeler de saklanmıyor, kaydedilmiyor.
Simgelerin sunucudan geçmesinin iki sebebi var. Birincisi ölçü: dosyanın gerçek en-boyunu okumanın başka yolu yok. İkincisi görünürlük: bazı sunucular Cross-Origin-Resource-Policy başlığıyla dışarıdan gömülmeyi engelliyor ve simge tarayıcınızda sessizce boş çıkıyordu.
Sorguladığınız şey zaten herkese açık: bir sitenin faviconu, o siteyi ziyaret eden herkesin gördüğü dosyadır.
Aracı beğendiniz mi?
Bu aracı ve altındaki açıklamayı, işini kendi yürüten bir işletme sahibine yetecek açıklıkta yazmaya çalıştık.
Teşekkür ederiz. Bundan sonraki çalışmaları da aynı açıklıkta yazmayı sürdüreceğiz.
Teşekkür ederiz. Eksik bulduğunuz noktayı info (at) kobiseo (nokta) com adresine iletirseniz sayfayı gözden geçirir ve düzeltmeyi geçmişe işleriz.
Kaynaklar ve güncelleme geçmişi
Kaynaklar
- Google Search Central: Arama sonuçlarında favicon, Google (developers.google.com)Resmî kaynak
- MDN: link rel değerleri (icon), Mozilla (developer.mozilla.org)
- W3C: Web App Manifest, icons alanı, W3C (w3.org)Resmî kaynak