Favicon için en az üç dosya hazırlayın: klasik bir .ico, 32 piksellik bir PNG ve 180 piksellik bir apple-touch-icon. Google arama sonuçlarında kullanacağı simge için ise kare ve 48 pikselin katı olan bir dosya ister. Bunları sitenin head bölümüne doğru satırlarla bağlarsanız simge tarayıcıda, telefonda ve aramada düzgün çıkar. Tasarım tarafı, yani logonun hangi parçasının seçileceği ayrı bir konu; o kısım için logo ile favicon ilişkisi yazısına bakın.
Tarayıcı sekmesindeki simge, aynı anda on beş sekme açıkken kullanıcının sizi bulmasını sağlayan şeydir. Teknik kurulum yanlışsa simge hiç görünmez ya da bulanık görünür.
Gereken dosyalar
Her tarayıcı aynı dosyayı istemez. Pratik bir set şöyle:
- favicon.ico: eski tarayıcılar ve bazı araçlar için; içinde 16, 32 ve 48 pikselli sürümler olabilir
- favicon-32x32.png: modern tarayıcılar için
- apple-touch-icon.png: 180x180 piksel, iPhone ana ekran kısayolu için
- icon-192.png ve icon-512.png: Android ve web uygulama manifest dosyası için
- favicon.svg: isteğe bağlı; modern tarayıcılarda her boyutta keskin görünür
Küçük bir sitenin hepsine ihtiyacı yok. Ama ico, 32 piksellik PNG ve apple-touch-icon pratikte minimumdur.
Google’ın arama sonuçları için istediği
Google, sitenin favicon’unu mobil ve masaüstü arama sonuçlarında gösterir. Yönergeleri kısaca şöyle: dosya kare olmalı, boyutu 48 pikselin katı olmalı (48, 96, 144 gibi), her sayfada aynı adres kullanılmalı ve robots.txt bu dosyanın taranmasını engellememeli. Ana sayfanın head bölümünde simgeye bağlantı bulunmalı.
Simge uygunsuz içerik taşıyorsa ya da sitenizi yanlış temsil ediyorsa Google onu göstermeyebilir. Yeni yüklediğiniz favicon arama sonuçlarında günler hatta haftalar sonra güncellenebilir. Hızlandırmak için Search Console’dan ana sayfayı yeniden dizine eklemesini isteyebilirsiniz.
HTML satırları
Sitenizin her sayfasında, head bölümünde şu satırlar yer almalı:
<link rel='icon' href='/favicon.ico' sizes='48x48'>
<link rel='icon' href='/favicon-32x32.png' type='image/png' sizes='32x32'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
SVG kullanıyorsanız ek bir satırla ekleyebilirsiniz. WordPress kullanıyorsanız çoğu temada Özelleştir ekranında “Site simgesi” alanı vardır; oraya 512 piksellik kare bir PNG yüklemek yeterli olur ve WordPress diğer boyutları kendisi türetir.
Tasarımda küçük ölçeğe uyum
Dosya setini hazırlamadan önce görsel kararı verin. İnce çizgi, gradyan ve gölge 16-32 pikselde bulanıklaşır. Düz, yüksek kontrastlı renkler ve kalın formlar kullanın. Koyu temalı tarayıcılarda koyu bir simge kaybolacağı için düz bir zemin ya da açık renkli bir kenar düşünün. Küçük boyut mantığı için logo küçük boyutta okunabilir mi yazısı da yardımcı olur.
Apple touch icon’da dikkat edilecek bir fark var: iPhone simgenin köşelerini kendisi yuvarlar. Saydam zeminli bir dosya yüklerseniz arka plan siyah olur. Bu yüzden apple-touch-icon’u düz renkli zeminle, köşeleri yuvarlatmadan hazırlayın.
SVG favicon ile karanlık mod uyumu
SVG favicon, tarayıcının renk temasına göre kendini ayarlayabilen tek biçimdir. Dosyanın içine küçük bir stil kuralı yazarak açık temada koyu, koyu temada açık renk gösterebilirsiniz. Böylece koyu sekme çubuğunda kaybolan lacivert bir amblem sorununu tek dosyayla çözersiniz. Her tarayıcı bu özelliği desteklemez, bu yüzden ico ve PNG yedeklerini kaldırmayın; SVG yalnızca desteklenen tarayıcılarda öne geçer. Dosyayı yayına almadan önce hem açık hem koyu temada gerçekten çalıştığını iki ayrı tarayıcıda deneyin, çünkü SVG içindeki küçük bir yazım hatası simgeyi tamamen boş gösterebilir.
Önbellek sorunu
Favicon’u değiştirdiniz ama tarayıcıda hâlâ eski simge çıkıyor. Tarayıcılar bu dosyayı agresif biçimde önbelleğe alır. Birkaç çözüm var. Dosya adını değiştirin ya da bağlantıya sürüm eki ekleyin: favicon.ico?v=2 gibi. Kendi tarayıcınızda test için sayfayı sert yenileyin (Ctrl+Shift+R) ve önbelleği temizleyin. Gizli pencerede açmak da hızlı bir kontroldür.
Ziyaretçilerinizin önbelleği sizin kontrolünüzde değildir. Yeni simgeyi yayına aldıktan sonra birkaç gün eski simgeyi görenler olabilir. Bu normaldir.
Next.js, Astro gibi çerçevelerde simge dosyaları genellikle public klasörüne konur ve kök dizinden sunulur. Bu klasöre koyduğunuz favicon.ico dosyası ek ayar olmadan bulunur; yine de head bölümündeki satırları açıkça yazmak hata ayıklamayı kolaylaştırır. Yapı hangisi olursa olsun, simge adresini kökten verin, göreli adres alt sayfalarda kırılır.
Sosyal medya ve paylaşım görselleriyle farkı
Favicon, bir sayfa linki sosyal medyada paylaşıldığında çıkan görselin yerine geçmez. Paylaşım önizlemesi için ayrı bir görsel (og:image) tanımlanır ve ölçüsü çok daha büyüktür. İkisini karıştırmayın. Favicon markayı tanıtır, paylaşım görseli içeriği tanıtır. Profil fotoğrafı da ayrı bir dosyadır; hepsi aynı amblemden türeyebilir ama her biri kendi bağlamına göre hazırlanır.
Kurulum sonrası kontrol
- Ana sayfayı farklı tarayıcılarda açıp sekmedeki simgeye bakın
- Telefonda ana ekrana ekleyip kısayol simgesini görün
- Adresin sonuna /favicon.ico yazıp dosyanın açıldığını doğrulayın
- robots.txt dosyasının simgeyi engellemediğinden emin olun
- Search Console’da ana sayfa taramasını isteyin
Web sitesi çalışmalarında favicon setini logodan ayrı hazırlayıp kuruyoruz. Web tasarım hizmetimizin kapsamını ve paket bedellerini fiyatlar sayfasında görebilirsiniz. Mevcut sitenizin simgesi sorunluysa iletişim sayfasından yazın.