Web Sitesine Favicon Nasıl Eklenir? Favicon Ekleme Rehberi
Favicon, web sitesinin tarayıcı sekmesinde, yer imlerinde ve bazı arama sonuçlarında siteyi temsil eden küçük simgedir. Web sitesine favicon eklemek için favicon dosyasını sunucuya yükleyip HTML sayfasının <head> bölümünde ilgili dosyayı tanımlamanız gerekir.
Basit bir kullanım şu şekildedir:
<link rel="icon" href="/favicon.ico">Ancak günümüzde farklı tarayıcılar ve cihazlar için birden fazla favicon boyutu ve formatı kullanmak daha iyi sonuç verebilir.
Favicon nedir?
Favicon, "favorite icon" ifadesinden gelir ve web sitesinin küçük görsel kimliği olarak düşünülebilir.
Örneğin tarayıcıda birden fazla sekme açıldığında favicon sayesinde siteleri birbirinden ayırmak daha kolay olur.
İyi hazırlanmış bir favicon:
- Siteyi daha kolay tanınabilir hale getirir.
- Tarayıcı sekmesinde profesyonel görünüm sağlar.
- Yer imlerinde siteyi ayırt etmeyi kolaylaştırır.
- Desteklenen platformlarda site kimliğinin doğru gösterilmesine yardımcı olur.
Favicon hangi boyutta olmalı?
Favicon farklı ortamlarda farklı boyutlarda kullanılabilir.
Yaygın boyutlardan bazıları:
- 16×16
- 32×32
- 48×48
- 180×180
- 192×192
- 512×512
Her site için bütün boyutları ayrı ayrı oluşturmak zorunlu değildir. Ancak yalnızca tek küçük görsel kullanmak yerine ihtiyacınıza göre farklı boyutları hazırlamak daha iyi sonuç verebilir.
Özellikle yüksek çözünürlüklü ekranlar ve mobil cihazlar için daha büyük kaynak görseller kullanışlıdır.
Favicon hangi formatta olmalı?
Yaygın favicon formatları arasında:
- ICO
- PNG
- SVG
bulunur.
Tarayıcı desteği ve kullanım amacına göre farklı formatlar birlikte kullanılabilir.
Örneğin klasik uyumluluk için
favicon.ico, modern tarayıcılar için PNG veya SVG tercih edilebilir.En basit favicon ekleme yöntemi
Favicon dosyanızı sitenin kök dizinine:
favicon.icoadıyla yükleyebilirsiniz.
Daha sonra HTML içerisindeki
<head> bölümüne:<link rel="icon" href="/favicon.ico">ekleyebilirsiniz.
Buradaki
/ işareti dosyanın sitenin kök dizininden çağrıldığını belirtir.PNG favicon nasıl eklenir?
PNG formatında favicon kullanıyorsanız:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">gibi bir tanımlama yapılabilir.
Birden fazla boyutunuz varsa ihtiyaca göre ayrı
link tanımları kullanılabilir.Örneğin:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Tarayıcı desteklediği ve ihtiyaç duyduğu kaynağı kullanabilir.
SVG favicon kullanılabilir mi?
Modern tarayıcılarda SVG favicon kullanılabilir.
Örneğin:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">SVG'nin avantajlarından biri vektörel olması nedeniyle farklı çözünürlüklerde net görüntü sağlayabilmesidir.
Ancak geniş uyumluluk istiyorsanız diğer favicon formatlarını da değerlendirebilirsiniz.
Apple Touch Icon nedir?
iPhone ve iPad gibi Apple cihazlarında ana ekran simgesi gibi kullanım senaryoları için ayrıca Apple Touch Icon tanımlanabilir.
Örneğin:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Bu dosya klasik tarayıcı favicon'undan farklı kullanım alanına sahiptir.
Favicon dosyaları nereye yüklenmeli?
Dosyaları sitenizin yapısına göre farklı klasörlerde tutabilirsiniz.
Örneğin:
/favicon.icoveya:
/images/favicon.pngkullanılabilir.
Önemli olan HTML içerisindeki
href adresinin gerçek dosya konumuyla eşleşmesidir.Tarayıcıda favicon dosyasının adresini doğrudan açmayı deneyerek erişilebilir olup olmadığını kontrol edebilirsiniz.
Favicon ekledim ama görünmüyor
Bu oldukça yaygın bir durumdur.
Favicon görünmüyorsa öncelikle:
1. Dosyanın gerçekten sunucuda bulunduğunu kontrol edin.
2. Dosya yolunun doğru olduğundan emin olun.
3. HTML
<head> bölümündeki favicon tanımını kontrol edin.4. Tarayıcı cache'ini dikkate alın.
5. Farklı tarayıcı veya gizli sekmede kontrol edin.
6. Sunucunun dosyayı doğru şekilde sunduğunu doğrulayın.
Favicon dosyaları tarayıcılar tarafından önbelleğe alınabildiği için eski ikon bir süre görüntülenmeye devam edebilir.
Favicon değişti ama eski favicon görünüyor
Yeni favicon yüklemenize rağmen eski ikon görünüyorsa bunun en yaygın nedenlerinden biri cache'tir.
Tarayıcı favicon dosyasının eski sürümünü saklıyor olabilir.
Öncelikle yeni dosyanın URL'sini doğrudan açarak gerçekten güncellenip güncellenmediğini kontrol edin.
Gerekirse dosya adını değiştirmek veya uygun cache yönetimi uygulamak kullanılabilir.
Ancak her güncellemede gereksiz yere farklı dosya isimleri oluşturmak yerine sitenin cache politikasını doğru yapılandırmak daha sağlıklı bir çözümdür.
Google'da favicon neden hemen değişmiyor?
Web sitesindeki favicon'u değiştirdiğiniz anda Google arama sonuçlarındaki favicon'un da anında değişmesi beklenmemelidir.
Google'ın sayfayı ve favicon kaynağını tekrar taraması gerekebilir.
Bu nedenle tarayıcıda yeni favicon görünmesine rağmen arama sonuçlarında bir süre eski favicon görülebilir.
Ayrıca Google'ın arama sonuçlarında favicon göstermek için kendi teknik gereksinimleri ve işleme süreci bulunur.
Favicon'un site üzerinde bulunması, Google'ın belirli bir favicon'u mutlaka göstereceği anlamına gelmez.
Favicon tasarlarken nelere dikkat edilmeli?
Favicon çok küçük görüntülendiği için karmaşık logolar genellikle iyi sonuç vermez.
Mümkün olduğunca:
- Basit şekiller kullanın.
- Küçük boyutta okunabilir tasarım hazırlayın.
- Çok küçük yazılardan kaçının.
- Logonun ayırt edici bölümünü kullanın.
- Kare alanda düzgün göründüğünü kontrol edin.
- Açık ve koyu arka planlarda görünürlüğünü test edin.
Uzun marka adını 16×16 piksel alana sığdırmaya çalışmak yerine markayı temsil eden basit bir sembol daha kullanışlı olabilir.
Favicon tüm sayfalara nasıl eklenir?
Çok sayfalı bir web sitesinde her HTML dosyasını tek tek değiştirmek yerine ortak kullanılan
<head> yapısına favicon tanımını eklemek daha doğru olabilir.Kullandığınız teknolojiye göre bu alan:
- Ortak HTML şablonu
- Layout dosyası
- Template
- Component
- Server-side include
üzerinden yönetilebilir.
Böylece favicon değiştirildiğinde bütün sayfalarda aynı yapı kullanılır.
Favicon ekledikten sonra kontrol edin
İşlem tamamlandıktan sonra:
1. Ana sayfayı açın.
2. Farklı bir alt sayfayı açın.
3. Tarayıcı sekmesindeki ikonu kontrol edin.
4. Favicon URL'sini doğrudan açın.
5. Masaüstü ve mobil cihazlarda test edin.
6. Gerekirse tarayıcı cache'ini temizleyerek tekrar kontrol edin.
Özetle, web sitesine favicon eklemek için favicon dosyasını sunucuya yükleyip
<head> içerisinde uygun <link rel="icon"> tanımını kullanmanız gerekir. Daha iyi cihaz ve tarayıcı desteği için farklı boyut ve formatların doğru şekilde hazırlanması da faydalıdır.Favicon küçük bir ayrıntı gibi görünse de web sitesinin marka kimliğinin ve profesyonel görünümünün önemli parçalarından biridir.