SEO

Favicon Nedir? Favicon'un SEO için Önemi

Favicon, sitenin tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında gösterilen küçük marka simgesidir, görsel kimliğin en küçük ama en sık görünen parçası.

Umut Recep Durna8 Mayıs 20255 dk okuma

Favicon Nedir? Favicon'un SEO için Önemi

Bir alışveriş merkezinde yan yana 30 mağaza var. Her birinin tabelasının yanında küçük bir logo yapışkan etiket görüyorsun, mesela kahverengi tabelaya altın bir kuş figürü. Bir sonraki ziyaretinde tek tek mağaza adlarını okumana gerek yok, o küçük logodan istediğin yeri buluyorsun.

Web sitelerinde favicon tam olarak bu küçük logo etiketidir. Tarayıcı sekmesinde, yer imleri çubuğunda, geçmiş listesinde ve arama sonuçlarında sitenin yanında görünen 16-32 piksellik küçük marka simgesi favicon'dur. Adı "favorite icon" kelimelerinin kısaltmasıdır, 1999'dan beri var.

Tanım olarak: favicon, web sitelerinin marka simgesi olarak kullanılan ve tarayıcı kullanıcı arabirimlerinde (sekme, yer imi, geçmiş, masaüstü kısayolu, mobil ana ekran) sitenin yanında gösterilen küçük bir görseldir. Favicon yoksa tarayıcı genelde boş bir kağıt simgesi gösterir, bu da siteyi profesyonel olmayan göstermektedir.

Favicon Nerede Görünür?

Favicon zannedildiğinden çok daha fazla yerde görünür:

Tarayıcı sekmesinde, site adının yanında
Yer imleri çubuğunda, kayıtlı sitelerin yanında
Geçmiş ve sık ziyaret listesinde, Chrome/Firefox menülerinde
Mobil ana ekran kısayolunda, "ana ekrana ekle" yapıldığında
Google arama sonuçlarında (mobil), title'ın solunda küçük yuvarlak bir simge olarak
Google Discover feed'inde, kart sol üst köşesinde
Sosyal medya paylaşımlarında, bazı platformlarda thumbnail olarak

Mobil arama sonuçlarında favicon'un göründüğü gerçeği Google'ın 2019'dan beri uyguladığı bir özellik. Bu da favicon'u SEO için doğrudan görünür bir öğe haline getirdi.

Favicon Boyutları ve Formatları

Modern bir favicon kurulumu birden fazla boyut içerir:

16x16 px, klasik tarayıcı sekmesi
32x32 px, Retina ekran tarayıcı sekmesi
48x48 px, Windows site simgesi
180x180 px, Apple Touch Icon (iOS ana ekran)
192x192 px, Android Chrome ana ekran
512x512 px, PWA splash screen

Format olarak en yaygınlar:

`.ico`, klasik format, birden fazla boyut tek dosyada (en geniş uyumluluk)
`.png`, modern siteler için tercih edilen, her boyuta ayrı dosya
`.svg`, yeni standart, ölçeklenebilir, koyu/açık tema desteği (<link rel="icon" type="image/svg+xml">)

SVG favicon Chrome 80+, Firefox 41+, Safari 14+ desteklenir, ama IE/eski Android için fallback olarak .png veya .ico da bulundurmak gerekir.

Favicon Nasıl Eklenir?

HTML'de <head> etiketine eklenir. Modern bir set:

html

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

/site.webmanifest PWA tanımlayıcısı, içinde Android Chrome ikonları tanımlanır:

json

{
  "name": "Umut Recep Durna",
  "short_name": "URD",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone"
}

Pratik Yol: Favicon Generator

Favicon set'ini elle hazırlamak yerine realfavicongenerator.net gibi araçları kullanmak çok daha pratik. Tek bir 512x512 PNG yüklersin, tüm boyutları ve webmanifest dosyasını otomatik üretir.

WordPress

WordPress'te kolay yol: Görünüm → Özelleştir → Site Kimliği → Site Simgesi menüsünden 512x512 görsel yüklenir. WordPress otomatik olarak tüm boyutları üretir ve doğru <link> tag'lerini ekler.

Next.js (App Router)

app/ dizinine doğru isimle dosyaları koyarsan Next.js otomatik favicon olarak servis eder:

text

app/
  favicon.ico        → /favicon.ico
  icon.png           → /icon.png (varsayılan favicon)
  apple-icon.png     → /apple-icon.png (iOS)

Veya app/layout.tsx'te metadata API ile:

export const metadata = {
  icons: {
    icon: "/icon.svg",
    apple: "/apple-icon.png",
  },
};

Favicon SEO için Önemli mi?

Doğrudan sıralama faktörü değildir. Ama dolaylı SEO katkıları belirgin:

Mobil arama CTR'sini artırır, favicon'lu sonuçlar favicon'suz olanlardan görsel olarak öne çıkar; Sistrix araştırmalarında %5-15 CTR artışı raporlanmış
Marka tanınırlığı, kullanıcı sekmedeki simgeden siteyi hatırlar, tekrar ziyaretler artar
Profesyonellik sinyali, favicon'u olmayan site "tamamlanmamış" görünür, bu güveni etkiler
Yer imleri ve geçmiş erişimi, favicon'lu siteler kullanıcı belleğinde daha kalıcıdır

Google 2024 itibariyle favicon en az 48x48 piksel boyutunda olmasını öneriyor, daha küçükler arama sonuçlarında gösterilmiyor.

Sık Yapılan Hatalar

Favicon olmaması. En yaygın hata. Tarayıcıda boş kağıt simgesi → "siteyi tamamlamadılar" hissi.
Sadece 16x16 koymak. Eski standartlardan kalma. Modern cihazlarda bulanık görünür, mobil sonuçlarda hiç gösterilmez (48x48 altı).
Yanlış format. PNG 16x16'yı yamulmuş gibi göstermek için kötü resize'lı kullanmak. Real Favicon Generator gibi araçla net üret.
Apple Touch Icon eksikliği. iPhone "ana ekrana ekle" yapıldığında varsayılan ikon gösterilir, marka kaybedilir.
Site adı / favicon uyumsuzluğu. Logo bambaşka, favicon bambaşka olunca marka tutarlılığı bozulur. Favicon = logo'nun küçük varyantı olmalı.
Cache sorunu. Favicon değiştirildiğinde tarayıcı eski versiyonu uzun süre tutar; URL'ye ?v=2 eklemek cache busting için yardımcı olur.

Sonuç

Favicon küçük bir öğedir ama markanın en sık görünen parçasıdır. Kullanıcı binlerce kez sekme açıp kapatır, her seferinde favicon görür. Yatırım büyük değildir (1 saat), getirisi (marka tanınırlığı, mobil CTR, profesyonellik) düzenlidir.

Pratik öneri: Yeni site açıldığında ilk gün favicon set'i hazırlanır, Real Favicon Generator ile 512x512 PNG'den tüm boyutlar üretilir, <head>'e eklenir. Logo değişikliklerinde favicon'u da güncellemeyi unutma. Search Console "Favicon eksik" uyarısı gelirse 48x48 + minimum gereksinim kontrol et.

İlgili içerik: Favicon dahil sitenin tüm görsel kimlik unsurlarının kurulumu için Web Tasarım hizmeti, favicon dahil mobil arama görünürlüğünün tamamı için SEO hizmeti sayfası.

#favicon#marka kimliği#tarayıcı sekmesi#seo görselleri

PaylaşX LinkedIn WhatsApp