Favicon Nedir? Siteye Nasıl Eklenir?

Site ikonu, sekme ikonu, kısayol simgesi veya yer imi ikonu olarak farklı alanlarda karşımıza çıkan Favicon, ismi ve çevirileriyle kafa karıştırıcı olsa da, internet kullanıcılarının hayatında boyutuyla ters orantılı derecede önemli bir yere sahip. Tarayıcınızın sekmelerine baktığınızda, her web sitesinin başında gördüğünüz o minik görselin, aslında markaları birbirinden ayıran önemli bir kimlik öğesi olduğunu fark edersiniz. Genellikle 16×16 piksel boyutunda hazırlanan bu küçük simgeler, sitenizin hem tarayıcı sekmelerinde hem de yer imlerinde daha kolay fark edilmesini sağlar.

Favicon’lar yalnızca tarayıcı sekmeleriyle sınırlı değildir. Bilgisayarların masaüstünde veya mobil cihazların ana ekranlarında da uygulama sembolü olarak karşımıza çıkar. Yani bir anlamda, web sitenizin dijital dünyadaki imzasıdır.

Kısa Tarihçe: Nasıl Hayatımıza Girdi?

Favicon ilk kez Mart 1999’da, Microsoft’un Internet Explorer 5 sürümüyle birlikte hayatımıza girdi. O dönemde tarayıcıya eklenen “Sık Kullanılanlar” (Favorites) özelliği sayesinde, kullanıcılar bir siteyi yer imlerine eklediklerinde, o sitenin küçük bir simgesi de kaydediliyordu. İşte bu nedenle Favicon ismi, “favorite icon” yani “favori ikonu” ifadesinden türedi.

2000’li yılların başında diğer tarayıcıların da bu özelliği desteklemeye başlamasıyla birlikte favicon, yalnızca “sık kullanılanlar”da değil, tarayıcı sekmelerinde de görünür hale geldi. Günümüzde ise akıllı cihazların ana ekranlarında, uygulama benzeri kısa yolların görsel kimliği olarak da favicon kullanılıyor.

Favicon Neden Bu Kadar Önemli?

Her ne kadar küçük bir ayrıntı gibi görünse de, favicon sitenizin profesyonel, güvenilir ve tanınabilir olmasında büyük rol oynar. Bir kullanıcı aynı anda onlarca sekme açtığında, markanızı temsil eden bu küçük ikon sayesinde sitenizi ayırt etmek çok daha kolay olur.

Ayrıca favicon, sitenizin marka algısını güçlendirir. Logonuzla veya renk paletinizle uyumlu bir favicon kullanmak, görsel bütünlüğü korur ve kullanıcıya güven verir. Kısacası, favicon hem kullanıcı deneyimini geliştirir hem de markanızı akılda kalıcı hale getirir.

Favicon Boyutları (Güncel Pratikler)

Karmaşa yaşamamak için projelerde şu şablonu kullanıyorum. Tek bir “doğru” liste yok; ama bu set modern ihtiyaçların büyük kısmını kapsar.

Alan / Platform	Önerilen Boyut(lar)	Biçim	Not
Tarayıcı sekmesi (klasik)	16×16, 32×32, 48×48	ICO/PNG	favicon.ico içine çoklu boyut gömülebilir.
Yüksek DPI/Retina sekme	32×32, 48×48	PNG	Netlik için 32+ kullanmak iyi pratik.
Apple Touch (iOS ana ekran)	180×180 (minimum)	PNG	120, 152, 167 varyantları opsiyonel.
Android / PWA (Manifest)	192×192, 512×512	PNG	purpose: "any maskable" tercih edin.
Safari Pinned Tab	Vektör (16 tabanlı viewBox)	SVG	Renk mask-icon etiketiyle verilir.
Windows Tile (opsiyonel)	150×150	PNG	msapplication-TileImage ile tanımlanır.

Favicon İçin Hangi Dosya Biçimlerini Kullanmalıyız?

Favicon’lar en yaygın olarak .ico biçiminde kullanılsa da, farklı platformların gereksinimleri nedeniyle .png ve .svg formatları da tercih edilir.

ICO: Klasik tarayıcılar ve Windows masaüstü ortamları için ideal. Birden fazla boyutu aynı dosyada barındırabilir.
PNG: Şeffaflık ve netlik avantajı sağlar. Apple ve Android ikonlarında kullanılır.
SVG: Vektörel olduğu için çözünürlükten bağımsızdır. Safari ve modern tarayıcılar için önerilir.

Bu üç formatın birlikte kullanılması, favicon’un tüm cihaz ve tarayıcılarda doğru şekilde görüntülenmesini sağlar.

Etkili Favicon Nasıl Tasarlanır?

Favicon küçük bir alanda büyük etki yaratmak zorunda olan bir simgedir. Bu yüzden tasarımın sade, net ve tanınabilir olması gerekir.

Favicon oluştururken şu noktalara dikkat edebilirsiniz:

Basit tasarım: Karmaşık logolar veya uzun yazılar küçük boyutta kaybolur.
Renk kontrastı: Arka planla çakışmayan, net görünecek renkler seçin.
Marka tutarlılığı: Logonuzla veya renk paletinizle uyumlu bir görünüm yaratın.
Kare oran: Favicon kare bir alan içinde olmalıdır; köşelere yapışan detaylardan kaçının.

Bu küçük simge, sitenizin profesyonel algısını güçlendirirken, markanızın dijital dünyadaki minik ama güçlü bir temsilcisine dönüşür.

Favicon Nasıl Yapılır? (Adım Adım)

Bir favicon oluşturmak düşündüğünüzden daha basittir. İşte adım adım süreci:

Logonuzu veya simgenizi seçin. Sade bir versiyonunu kullanın.
Tasarımı 64×64 veya 128×128 piksel kare boyutta hazırlayın.
16×16, 32×32 ve 48×48 boyutlarına küçültün.
.png veya .jpg olarak kaydedin, ardından .ico biçimine dönüştürün.
Farklı cihazlar için 180×180 (iOS) ve 192×192 (Android) boyutlarını da hazırlayın.
Görseli test edin. Sekme görünümünde, karanlık ve aydınlık modlarda netliğini kontrol edin.

Bu işlemleri yapmak için Adobe Photoshop, Canva, Figma veya çevrimiçi araçlardan yararlanabilirsiniz.

Siteye Favicon Nasıl Eklenir? (Modern Kod)

Favicon dosyanızı hazırladıktan sonra, web sitenizin kök dizinine yüklemeniz yeterlidir. Tarayıcılar genellikle favicon.ico dosyasını otomatik olarak algılar; ancak tam uyumluluk için sayfanızın <head> kısmına aşağıdaki kodları ekleyebilirsiniz:

Bu kodlar sayesinde favicon’unuz hem masaüstü hem mobil tarayıcılarda, hem de uygulama benzeri ortamlarda eksiksiz şekilde görüntülenir.