Favicon boyutları ve doğru HTML etiketleri

Favicon küçük bir ayrıntı gibi görünür; ama tarayıcıda onlarca sekme açıkken sitenizi bulmayı sağlayan, telefonda ana ekrana eklendiğinde uygulama simgesi gibi görünen ve Google mobil arama sonuçlarında sitenizin adının yanında yer alan şey odur. Yanlış boyut veya eksik etiket, bulanık ya da hiç görünmeyen bir simgeye yol açar. Bu rehberde gerçekten gereken dosyaları, HTML etiketlerini ve sık yapılan hataları anlatıyoruz. Tek bir görselden tüm boyutları üretmek için favicon oluşturucu aracımızı kullanabilirsiniz.

Favicon nerelerde görünür?

Minimum ve yeterli favicon seti

Eskiden onlarca farklı boyut üretilirdi. Bugün aşağıdaki küçük set neredeyse tüm durumları karşılar:

HTML etiketleri

Sayfanızın <head> bölümüne şunları ekleyin:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest dosyası (site.webmanifest):

{
  "name": "Örnek Firma",
  "short_name": "Örnek",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#0b5cad",
  "background_color": "#ffffff",
  "display": "standalone"
}

sizes="32x32" ifadesi, SVG destekleyen tarayıcıların ICO yerine SVG’yi tercih etmesine yardımcı olur. Manifest dosyasındaki JSON söz dizimi hatalarını önlemek için JSON rehberimize göz atabilirsiniz.

Maskable simge (Android)

Android, ana ekran simgelerini cihaz temasına göre daire, damla veya yuvarlatılmış kare biçiminde kırpar. Normal bir simge bu kırpmada kenarlarından kesilebilir. Maskable simgede:

• Önemli içerik (logo), görselin ortasındaki %80 çaplı güvenli alanda olmalıdır.
• Arka plan tüm kareyi doldurmalı, saydam olmamalıdır.

Google arama sonuçları için favicon kuralları

Google’ın arama sonuçlarında favicon göstermesi için başlıca şartlar:

• Favicon, ana sayfada bir <link rel="icon"> etiketiyle tanımlanmalıdır.
• Ana sayfa Googlebot, favicon dosyası Googlebot-Image tarafından taranabilir olmalıdır; robots.txt ile engellenmemelidir. Ayrıntılar için robots.txt rehberimize bakabilirsiniz.
• Simge kare (1:1) olmalı ve en az 8×8 piksel boyutunda olmalıdır; Google 48×48 pikselden büyük bir simge önerir (örneğin 96×96 veya 192×192).
• Sabit bir URL’ye sahip olmalı; sık değiştirilmemelidir.
• Marka için uygun olmalı; uygunsuz içerik varsa Google varsayılan simge gösterir.

Google’ın belgelerinde desteklenen formatlar arasında ICO, PNG, GIF, JPEG ve BMP sayılır; SVG favicon tarayıcılarda sorunsuz çalışsa da arama sonuçları için yanında bir ICO veya PNG bulundurmak daha güvenlidir. Her alan adı veya alt alan adı için tek bir favicon gösterilir; example.com/blog gibi alt dizinler ayrı favicon alamaz. Google’ın faviconu yeniden taraması zaman alabilir; Search Console’da ana sayfa için dizine ekleme isteği göndermek süreci hızlandırabilir.

Tasarım ipuçları

• Sadeleştirin: 16×16 pikselde tam logo okunmaz; logonun ilk harfi veya amblemi daha iyi çalışır.
• Kalın çizgiler kullanın: İnce detaylar küçük boyutta kaybolur.
• Koyu ve açık sekme temalarında test edin: Saydam bir siyah logo, koyu temalı tarayıcıda görünmez olabilir. SVG içinde prefers-color-scheme medya sorgusuyla iki renk tanımlanabilir.
• Kaynağı yüksek çözünürlükte hazırlayın: En az 512×512 piksel kare bir PNG veya SVG, tüm boyutları üretmek için yeterlidir.

Sosyal medya paylaşım görseli faviconla karıştırılmamalıdır; o konu için Open Graph rehberimize bakabilirsiniz.

Platformlara göre özel durumlar

• Safari sabitlenmiş sekmeler: Eskiden tek renkli SVG için mask-icon etiketi gerekiyordu; güncel Safari sürümleri normal faviconu kullanır, bu etiket artık isteğe bağlıdır.
• Windows kutucukları: browserconfig.xml ve msapplication-TileImage etiketleri eski Edge ve Windows sürümleri içindi; yeni projelerde genellikle gerekmez.
• WordPress: Görünüm → Özelleştir → Site Kimliği bölümünden en az 512×512 piksel bir “Site Simgesi” yüklediğinizde gerekli boyutlar otomatik üretilir.
• Shopify, Wix ve benzeri platformlar: Tema ayarlarında favicon alanı bulunur; platform boyutları kendisi oluşturur.
• Statik siteler ve Astro, Next.js gibi çatılar: Dosyaları public/ klasörüne koyup etiketleri ortak başlık şablonuna eklemek yeterlidir.

Favicon’u test etmek

1. Tarayıcıda sitenizi açın ve sekmede simgenin net göründüğünü kontrol edin.
2. Doğrudan https://alanadiniz.com/favicon.ico adresini açarak dosyanın 200 durum koduyla döndüğünü görün.
3. iPhone ve Android’de “Ana ekrana ekle” ile simgenin kırpılmadan göründüğünü kontrol edin.
4. Sayfa kaynağında <link rel="icon"> etiketlerinin doğru yolları gösterdiğini doğrulayın.

Sık yapılan hatalar

• Kare olmayan görsel kullanmak: Simge basık veya bulanık görünür; Google’da gösterilmeyebilir.
• Yalnızca kök dizine favicon.ico koyup etiket eklememek: Çoğu tarayıcı bulur, ama Apple ve Android simgeleri eksik kalır.
• Göreli yolları yanlış yazmak: Alt sayfalarda href="favicon.ico" yerine href="/favicon.ico" kullanın.
• robots.txt ile görselleri engellemek: Google faviconu tarayamaz.
• Önbellek nedeniyle değişikliğin görünmediğini sanmak: Sürüm parametresi ekleyin.

Kontrol listesi

• favicon.ico (32×32) kök dizinde
• SVG favicon ve <link rel="icon"> etiketleri eklendi
• 180×180 apple-touch-icon eklendi
• 192 ve 512 piksel simgeler ile manifest tanımlandı
• Simge koyu ve açık temada okunuyor
• Favicon ve ana sayfa robots.txt tarafından engellenmiyor