Favicon nasıl oluşturulur?

Tarayıcı sekmesindeki küçük ikon, favorilere eklenen görsel, mobil ana ekran kısayolundaki simge — hepsinin kaynağı aynı: favicon. Ama bu 16×16 piksellik dosyanın arkasında beklenenden daha fazla katman var.

Favicon oluşturmak, bir görseli küçültüp yüklemekle bitmiyor. Hangi tarayıcı ne boyutu kullanır, iOS'un beklediği format masaüstü Chrome'unkiyle neden farklıdır, .ico dosyası neden hâlâ gereklidir — bunları atlamak, kimi platformda bozuk ikon, kiminde eksik PWA kurulumu anlamına gelir.

Favicon boyutları: hangi ikon nerede görünür?

Sekme çubuğunda görünen favicon 16×16 pikseldir. Masaüstü tarayıcıların büyük çoğunluğu bu boyutu kullanır. Ama tek başına yeterli değil.

Chrome ve Firefox, yüksek yoğunluklu ekranlarda (HiDPI ve Retina) 32×32 piksel versiyonu tercih eder. Windows'ta görev çubuğuna sabitlenen site kısayolları 48×48 piksel arar. Bu boyutlar sağlanmadığında tarayıcı küçük kaynaktan büyük ikon üretmeye çalışır; keskin kenarlar kaybolur, ikon bulanıklaşır.

Apple Touch Icon, iOS'a özgü bir gereksinim. Safari'de siteyi ana ekrana eklerken kullanılan bu görsel 180×180 pikseldir. Standart favicon etiketlerinden bağımsız olarak apple-touch-icon link etiketiyle tanımlanır. Tanımlanmadığında Safari sayfanın anlık görüntüsünü küçülterek kullanır — bu pek iyi sonuç vermez.

Android Chrome için manifest.json içinde en az iki boyut tanımlanması beklenir: 192×192 ve 512×512. Bu ikonlar yoksa PWA kurulumu düzgün çalışmaz; kullanıcı siteyi ana ekrana eklediğinde bozuk veya eksik bir görsel görür. Tüm bu boyutları elle hazırlamak zaman alır. Kaynak görsel olarak en az 512×512 piksel veya tercihen SVG formatında bir dosyayla başlayıp Favicon Generator ile tüm boyutları otomatik üretmek hem süreyi kısaltır hem hata riskini azaltır.

ICO, PNG ve SVG: hangi format ne için?

.ico formatı, favicon'ın en eski biçimi. Neden hâlâ kullanılıyor? Çünkü bazı tarayıcılar herhangi bir HTML etiketi olmadan /favicon.ico URL'ini doğrudan istiyor. Sunucu kökünde bir favicon.ico bulundurmak, bu nedenle gereksiz değil; HTML ile tanımlanmış olsa bile otomatik isteğe karşılık verir. ICO dosyasının ilginç özelliği tek bir dosya içinde birden fazla boyutu barındırabilmesidir — 16×16, 32×32 ve 48×48 versiyonları aynı .ico içinde saklanır; tarayıcı ihtiyacına göre hangisini kullanacağını seçer.

PNG, modern tarayıcıların tercihi. Şeffaflık desteği, net kenarlar ve ICO'ya kıyasla daha küçük dosya boyutuyla özellikle yüksek çözünürlüklü ekranlarda daha iyi sonuç verir. Apple Touch Icon ve PWA ikonları yalnızca PNG kabul eder; ICO bu bağlamlarda kullanılamaz.

SVG favicon, son yıllarda Chrome, Edge ve Firefox'ta destek kazandı. Vektör olduğu için herhangi bir boyuta kayıpsız ölçeklenir. Dark mode için özellikle avantajlı: SVG içinde prefers-color-scheme media query kullanarak aynı dosyayla hem açık hem koyu temaya uygun favicon tanımlanabilir. Safari henüz SVG faviconu desteklemiyor — bu yüzden SVG tek başına hiçbir zaman yeterli değil.

Pratikte kullanılan yapı genellikle şöyle:

• favicon.ico — kök dizinde, eski tarayıcılar ve otomatik istekler için
• favicon.svg — modern tarayıcılar ve dark mode desteği için
• apple-touch-icon.png (180×180) — iOS için
• icon-192.png ve icon-512.png — manifest.json ve PWA için

Favicon oluşturmanın üç yolu

Kaynak görsel üzerinden otomatik üretim. Elinizde bir logo veya simge varsa en pratik yol budur. Kaynak görselinizi yükleyip tüm boyutları ve formatları otomatik olarak üretebilirsiniz. Önemli olan kaynağın kalitesi: SVG yoksa en az 512×512 piksel PNG ile başlamak gerekir. Daha küçük kaynak dosyalar, yüksek çözünürlüklü çıktılarda bulanık ya da piksel görünümlü sonuç verir.

Sıfırdan tasarım. Favicon 16×16 piksel olarak kullanılacağı için ayrıntı barındırmaz; sade, güçlü bir şekil veya harf genellikle en iyi sonucu verir. Tasarım yazılımında SVG olarak çalışmak ve dışa aktarırken piksel ızgarasına snap etmek, keskin kenarlar için kritik. Detaylı bir logo doğrudan küçük boyuta indirildiğinde okunaksız hale gelir; favicon için sadeleştirilmiş ayrı bir versiyon hazırlamak neredeyse her zaman gerekir.

Var olan bir görseli dönüştürme. Logo halihazırda JPEG veya PNG ise formatı önce optimize etmek mantıklıdır. Resim sıkıştırma aracıyla dosya boyutunu gereksiz yere şişirmeden kaynak kaliteyi koruyabilirsiniz; sonrasında bu optimize görseli favicon üretimine kaynak olarak kullanmak çıktı kalitesini olumlu etkiler. Eğer JPEG formatındaki bir logonuzu PNG'ye dönüştürmeniz gerekiyorsa, resim formatı dönüştürme aracı şeffaflık katmanını koruyarak geçiş yapmanızı sağlar — favicon arka planı şeffaf olmasını istiyorsanız bu adım atlanamaaz.

HTML'e nasıl eklenir?

Favicon bağlantıları <head> içinde tanımlanır. Çalışan minimum yapı:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

SVG link etiketinde type="image/svg+xml" yazmak önemli; bazı sunucular SVG dosyasını yanlış MIME türüyle sunabilir ve tarayıcı tanımaz. Sunucu MIME ayarı yapılamıyorsa SVG desteğini atlayıp yalnızca ICO ve PNG ile devam etmek daha güvenli bir tercih.

PWA desteği için manifest.json içinde de ikon tanımı yapılmalı:

"icons": [
  { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]

Android'de adaptif görünüm için maskable icon ayrıca tanımlanır. Görselin önemli kısmı merkezdeki yaklaşık %80'lik "safe zone" içinde kalmalı; dışarıdaki alanı Android kendi şekliyle kırpabilir. Maskelenebilir ikonlar "purpose": "maskable" değeriyle manifest'e ayrı bir satır olarak eklenir.

Favicon önbelleği: güncelleme neden gecikmeli görünür?

Favicon güncellendi, FTP'ye yüklendi, ama eski ikon hâlâ görünüyor. Bu, favicon güncellemelerinde en sık karşılaşılan sorun.

Tarayıcılar favicon'ları agresif biçimde önbellekler. Sayfanın geri kalanından farklı bir mekanizma kullanır; zaman zaman Cache-Control başlığı bile yok sayılır. Güncellenmiş favicon görünmediğinde birkaç yol denenebilir:

• URL'e versiyon parametresi eklemek: <link rel="icon" href="/favicon.ico?v=2"> — parametre değiştiğinde tarayıcı dosyayı yeniden indirir
• Tarayıcıda favicon.ico URL'ini doğrudan açıp hard reload yapmak (Ctrl+Shift+R)
• Farklı bir tarayıcıda veya özel/gizli sekmede kontrol etmek

Canlı ortamlarda en güvenilir yöntem versiyon parametresidir. .htaccess ile favicon için uzun önbellekleme süresi tanımladıysanız — ki site hızı için bu önerilen yaklaşım — aynı zamanda her yeni deploy'da parametre değerini artırmak gerekir. İkisi birlikte çalışır: uzun önbellekleme bant genişliği tasarrufu sağlar, versiyon parametresi ise kasıtlı değişikliği tarayıcıya zorla bildirir.

Favicon oluşturmak tek bir dosya yüklemekten fazlası. Boyut, format ve önbellekleme mekanizmalarını birlikte doğru kurmak, tüm cihazlarda tutarlı bir görünüm için gerçekten gerekli. Süreci otomatize eden araçlar kullanmak bu adımların atlanma riskini önemli ölçüde azaltır.