Favicon Boyutları Nelerdir?
Genel Favicon Boyut Standartları
Favicon için tek bir boyut yerine, farklı cihaz ve platformlara uyum sağlamak adına çeşitli ölçülerde favicon hazırlanması gerekir. En yaygın kullanılan favicon boyutları şunlardır:
- 16×16 px – Tarayıcı sekmeleri, adres çubuğu
- 32×32 px – Windows görev çubuğu, gelişmiş görüntüleme alanları
- 48×48 px – Masaüstü simgeleri
- 180×180 px – Apple touch simgesi (iOS cihazlar için)
- 192×192 px – Android cihazlar (Chrome kısayolları)
- 512×512 px – Google web manifest için önerilen boyut
Tarayıcılara Göre Önerilen Favicon Boyutları
Farklı tarayıcılar ve işletim sistemleri, favicon’ları farklı boyutlarda talep etmektedir. Bu nedenle uyumluluk açısından çeşitli ölçülerde favicon dosyalarının oluşturulması önerilir.
Apple Cihazları İçin Favicon Boyutları
- 60×60 px
- 76×76 px
- 120×120 px
- 152×152 px
- 180×180 px
Google Chrome ve Android İçin Boyutlar
- 192×192 px – Uygulama simgesi olarak görünür
- 512×512 px – Web manifest.json üzerinden tanımlanan boyut
Desktop Uygulamaları İçin Uygun Boyutlar
- 16×16 px – Sekme ikonu
- 32×32 px – Adres çubuğu ve görev çubuğu
- 48×48 px – Masaüstü kısayol simgesi
Kullanım Şekli Nasıl Olmalıdır?
Favicon’u kullanmak istediğinizde sitenizin tag’leri arasına aşağıdaki kodu yerleştirmeniz yeterli olacaktır.
<head> </head>
Kodlarınızdaki href kısmı favicon.ico sembolünün yerini belirler. Yazmanız gereken kod ise şu şekilde olmalıdır;
<link rel= “shortcut icon” href=” /favicon.ico” type=” image/x-icon” />
Görseli İnternet sitenize aktardığınızda sayfayı tekrar güncellemek ve yenilemek yeterli olacaktır. Eğer hazırlamış olduğunuz görsel görünmüyorsa tarayıcı geçmişinizi tamamen silerekte bu kontrol işlemini sağlayabilirsiniz.
Favicon Dosya Formatları Nelerdir?
ICO, PNG, SVG ve Diğer Dosya Türleri
Favicon dosyaları farklı kullanım senaryolarına göre çeşitli formatlarda hazırlanabilir. En yaygın ve desteklenen formatlar:
| Format | Özellik | Uygulama |
|---|---|---|
.ico |
En geniş tarayıcı desteğine sahiptir | Varsayılan favicon formatıdır |
.png |
Saydam altyapı destekler | Modern tarayıcılarda sıklıkla kullanılır |
.svg |
Vektörel, sonsuz çözünürlükte | Safari gibi yüksek çözünürlük isteyen tarayıcılar |
.gif |
Animasyon desteği sunar | Özellikle dikkat çekmek isteyen uygulamalar |
Tarayıcı Uyumluluklarına Göre Format Seçimi
- Internet Explorer: .ico zorunlu
- Chrome ve Firefox: .png, .ico desteklenir
- Safari: .svg desteği mevcuttur
- Mobil cihazlar: .png tercih edilmeli (çoklu boyutta)
Favicon Nasıl Yapılır ve Eklenir?
Favicon Oluşturma Araçları
Favicon oluşturmak için pek çok ücretsiz ya da profesyonel araçtan faydalanabilirsiniz. Aşağıda sık tercih edilen bazı uygulamalar yer almaktadır:
- GIMP – Ücretsiz ve açık kaynak kodlu
- Adobe Photoshop – Profesyonel tasarım aracı
- Canva – Hızlı arayüzlü online kullanım
- favicon.io, realfavicongenerator.net – .ico dosyası oluşturucular
Önerilen başlangıç boyutu 64×64 px’tir. Hazırlanan tasarım daha sonra 16×16 px gibi daha küçük boyutlara ölçeklendirilmelidir.
Web Sitesine Favicon Ekleme Yöntemleri
Favicon yüklemenin farklı yöntemleri vardır. En temel yol, sitenizin kök dizinine favicon.ico dosyasını yerleştirmektir. Ayrıca HTML’de <head> etiketine aşağıdaki kod satırı eklenmelidir:
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>
Mobil cihazlar ve tarayıcı uyumluluğu için ekstra kodlar:
- <link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon.png”>
- <link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-chrome-192×192.png”>
SEO Açısından Favicon Boyutu ve Önemi
Favicon dosyasının doğru bir şekilde kullanılması SEO açısından doğrudan bir sıralama sinyali olmasa da, kullanıcı deneyimi ve dolaylı SEO etkileri açısından oldukça önemlidir. Tarayıcıda görünen favicon, ziyaretçilere profesyonellik hissi verir ve sitenizin marka bilinirliğini artırır.
Özellikle mobil kullanıcıların artış gösterdiği günümüzde, favicon’ların doğru boyutta optimize edilmesi, kullanıcıların sekmeden siteye hızlı geçiş yapmasını sağlar. Bu da hemen çıkma oranlarını azaltabilir, site içi gezinme süresini artırabilir ve siteyi tekrar ziyaret etme ihtimalini yükseltir.
