Favicon nedir, nasıl hazırlanır?

Tarayıcınızda birkaç sekme açıkken hangisinin hangi site olduğunu çoğu zaman sekmedeki küçük simgeden anlarsınız. Bu simgenin adı favicon’dur. Küçük bir dosyadır, ama mağazanızın tarayıcıda, yer imlerinde ve arama sonuçlarında nasıl görüneceğini etkiler.

Bu yazıda favicon’un ne olduğunu, nerelerde göründüğünü, logonuzdan nasıl türetileceğini ve hangi boyut ve formatlarda hazırlanacağını anlatıyoruz. Teknik bilgileri Google, Apple, MDN Web Docs ve web.dev belgelerine dayandırdık; kaynağını metinde belirttik.

Favicon nedir?

Favicon, bir internet sitesini temsil eden küçük, kare simgedir. Adı İngilizcedeki “favorite icon”, yani “sık kullanılanlar simgesi” ifadesinden gelir. Çoğu zaman sitenin logosundan türetilir ve logonun en küçük ölçüde kullanılan hâlidir.

Teknik olarak favicon, sayfanın kodunda tanımlanan ayrı bir görsel dosyasıdır. MDN Web Docs’taki link öğesi sayfasına göre tarayıcılar sitenin /favicon.ico adresini kendiliğinden de ister.

Favicon nerelerde görünür?

Favicon’u en çok tarayıcı sekmesinde görürsünüz, ama tek yeri orası değildir:

• Tarayıcı sekmesi: Sayfa başlığının yanında durur. Açık sekme sayısı arttıkça başlıklar kısalır ve sekmeyi tanıtan şey giderek simgenin kendisi olur.
• Yer imleri: Kaydedilen sitenin adının yanında görünür.
• Tarayıcı geçmişi: Ziyaret edilen sayfaların listesinde, sayfa başlığıyla birlikte yer alır.
• Google arama sonuçları: Google Search Central’daki “Google Arama’da favicon” yönergesine göre Google, sitenin favicon’unu arama sonuçlarında gösterebilir. Simge, sonuçta site adınızın yanında görünebilir.
• Telefonun ana ekranı: Ziyaretçi sitenizi telefonunun ana ekranına eklediğinde bir uygulama simgesi gibi görünür. Bunun için favicon’dan büyük, ayrı simge dosyaları kullanılır.

Favicon neden önemli?

Favicon küçük bir dosyadır, ama müşterinin mağazanızla sık karşılaştığı yerlerde görünür:

• Açık sekmeler arasında tanınmak: Ürün karşılaştıran bir müşteri birkaç mağazayı aynı anda açık tutabilir. Başlıklar kısaldığında sekmenizi simgesinden bulur. Kendi favicon’unuzu yüklemediyseniz sekmede markanıza ait olmayan varsayılan bir simge görünür.
• Arama sonuçlarındaki görünüm: Google favicon’u arama sonuçlarında gösterebildiği için simge, sonucunuzun markanızla ilişkilendirilmesine yardım eder. Google’ın yönergesi de favicon’un sitenin markasını görsel olarak temsil etmesini ister.
• Tutarlılık: Sekmedeki simge, sitenin üst kısmındaki logo, sosyal medya profili ve sipariş e-postaları aynı işareti taşıdığında müşteri hepsini tek bir markaya bağlar.

Favicon logodan nasıl türetilir?

Favicon için yeni bir işaret tasarlamanız gerekmez; logonuzun küçük alana sığan bir parçasını kullanırsınız. 16 piksellik bir karede marka adının tamamı okunmaz. Şu adımları izleyin:

1. 1Tek bir öğe seçin. Logonuzda simge varsa onu, yoksa marka adınızın baş harfini kullanın. Örneğin hayalî “Defne Kozmetik” mağazasının sekmesinde adın tamamı yerine yalnızca “D” harfi yer alabilir.
2. 2Kare düşünün. Favicon kare bir alanda gösterilir. Yatay logoyu kareye sıkıştırmak yerine seçtiğiniz öğeyi karenin ortasına yerleştirin.
3. 3Zemini doldurun. Tarayıcı sekmeleri açık ya da koyu renkte olabilir. Şeffaf zemin üzerindeki ince bir simge koyu sekmede kaybolabilir; simgeyi dolu, renkli bir karenin üzerine koymak açık ve koyu sekmede görünmesini kolaylaştırır.
4. 4Kontrastı yüksek tutun. Simge ile zemin rengi arasında belirgin bir fark olsun. Birbirine yakın tonlar küçük boyutta tek bir renk lekesi gibi görünür.
5. 5İnce ayrıntıları çıkarın. İnce çizgiler, küçük yazılar, gölgeler ve renk geçişleri küçük boyutta birbirine karışır. Simgenin sade, kalın çizgili bir hâlini kullanın.
6. 6Gerçek boyutunda kontrol edin. Simgeyi büyütülmüş hâliyle değil, sekmedeki gerçek boyutunda değerlendirin.

Favicon boyutları ve formatları

Tarayıcı sekmesi ve telefonun ana ekranı farklı dosyalar kullanır; bu yüzden tek bir favicon dosyası çoğu zaman yetmez. Sık kullanılan dosyalar ve dayandıkları kaynaklar şöyle:

Dosya	Boyut	Nerede kullanılır	Kaynak
favicon.ico	Yaygın olarak 16, 32 ve 48 piksellik katmanlar	Tarayıcı sekmesi, yer imleri ve geçmiş	MDN Web Docs; katmanlar yaygın uygulamadır
apple-touch-icon.png	Retina ekranlı iPhone için 180×180 piksel	iOS cihazlarda ana ekrana eklenen sitenin simgesi	Apple Developer, “Configuring Web Applications”
Manifest simgeleri	192×192 ve 512×512 piksel	Ana ekran, uygulama başlatıcı ve açılış ekranı	web.dev, “Add a web app manifest”

Belgeler zamanla güncellenebilir; sitenizi kendiniz kodluyorsanız ilgili belgenin güncel hâline bakın.

favicon.ico: MDN Web Docs’taki görsel formatları rehberine göre ICO formatı birden fazla simge boyutunu tek dosyada tutabilir. Böylece tarayıcı, simgeyi göstereceği yere uygun boyutu aynı dosyadan alabilir.

apple-touch-icon.png: Apple Developer’daki “Configuring Web Applications” belgesine göre bu simge, iOS cihazlarda siteyi ana ekrana eklediğinizde görünür. Retina ekranlı iPhone için boyutu 180×180 pikseldir.

Manifest simgeleri: web.dev’deki “Add a web app manifest” rehberi, web uygulaması bildirimine (manifest) 192×192 ve 512×512 piksellik simgeler eklenmesini söyler. Bu simgeler ana ekranda, uygulama başlatıcıda ve açılış ekranında kullanılır.

Google Arama’da favicon için koşullar

Google Search Central’daki “Google Arama’da favicon” yönergesi, arama sonuçlarında gösterilecek favicon için şu koşulları sayar:

• Favicon kare, yani 1:1 oranında olmalıdır.
• Favicon en az 8×8 piksel olmalıdır.
• Google, 48×48 pikselden büyük bir favicon kullanılmasını önerir.
• Favicon, sitenin markasını görsel olarak temsil etmelidir.

Yönergeye göre Google favicon’u arama sonuçlarında gösterebilir; koşulları karşılamak, simgenin gösterileceği anlamına gelmez. Favicon’u yalnızca en küçük ölçüde hazırlamayın. Kare ana çizimi büyük ölçüde saklayın; gerektiğinde istenen boyutta dosya üretebilirsiniz.

Logo Oluşturucu ile favicon seti

Bu dosyaları elle hazırlamak, aynı simgeyi her boyut için ayrı ayrı dışa aktarmayı gerektirir. Ücretsiz Logo Oluşturucu, favicon setini logonuzla birlikte indirmenizi sağlar. Araç tarayıcıda çalışır; kayıt, form ya da e-posta istemez ve yazdığınız marka adı ile slogan sunucuya gönderilmez.

• favicon.ico: 16, 32 ve 48 piksellik katmanlar
• apple-touch-icon.png: 180×180 piksel
• icon-192.png ve icon-512.png: 192×192 ve 512×512 piksel
• Logonun kendisi: yazıları eğriye çevrilmiş SVG, kare tuvalde SVG ve şeffaf ya da beyaz zeminli 500×500 piksel kare PNG

Favicon ve uygulama simgelerinde logonuzun ikonu ya da marka adınızın ilk harfi dolu bir kare üzerinde yer alır; bu, yukarıda anlattığımız tek öğe ve dolu zemin yaklaşımıyla örtüşür. Araçtaki önizleme, simgenin 16 piksellik tarayıcı sekmesinde nasıl göründüğünü indirmeden gösterir. favicon.ico’yu tek başına, Apple dokunmatik simgesini ve uygulama simgelerini logo dosyalarıyla birlikte ZIP paketinde indirebilirsiniz.

Ücretsiz araçLogo OluşturucuMarka adınızı yazın, simgenin tarayıcı sekmesindeki görünümünü önizleyin; favicon.ico, apple-touch-icon ve uygulama simgelerini logonuzla birlikte ücretsiz indirin.Aracı aç

Favicon’u esoltec mağazanıza yükleme

1. 1“Web Sitesi › Site Yönetimi” sayfasında temanızı “Düzenle” ile açın.
2. 2Önizlemenin üstündeki araç çubuğunda “Favicon” düğmesine basın.
3. 3ICO ya da PNG dosyanızı seçin. Logo Oluşturucu’dan indirdiyseniz favicon.ico dosyasını kullanın.

Yeni yüklemede yalnızca ICO ve PNG dosyası kabul edilir, albümden seçerken de ICO ya da PNG bir dosya seçin; panel 32×32 piksel önerir. Panelden yüklenen dosyalar en fazla 250 KB olabilir. Favicon seçtiğiniz anda kaydedilir, ayrıca kaydetmeniz gerekmez.

Favicon, düzenlediğiniz temaya kaydedilir. Taslak bir temaya yüklediyseniz simge, tema “Canlıya Al” ile yayına alındığında sitenizde görünür. Mağaza logosu ise ayrı bir yerden, “Ayarlar › Mağaza Bilgileri” sayfasındaki “Mağaza Logosu” alanından yüklenir.

Yeni favicon hemen görünmüyorsa

Tarayıcılar favicon’u önbellekte tutar. Bu yüzden yeni simgeyi yükledikten sonra sekmede eski simge görünmeye devam edebilir; bu durum tek başına yüklemenin başarısız olduğunu göstermez. Kontrol için:

• Mağazanızı daha önce açmadığınız başka bir tarayıcıda açıp simgeye orada bakın.
• Favicon’u yüklediğiniz temanın yayında olan tema olduğundan emin olun; taslak temadaki simge, tema yayına alınmadan sitede görünmez.

Logonun diğer dosyaları ve hangi formatın nerede kullanıldığı için “Logo boyutları ve dosya formatları: SVG, PNG, JPG ve favicon” yazımıza göz atabilirsiniz.