Favicon nasıl yapılır?

Favicon, tarayıcı sekmesinde, yer imlerinde, geçmiş listesinde ve telefonun ana ekranına eklenen kısayollarda görünen site simgesidir. Arama sonuçlarında da sitenin adının yanında gösterilebilir. Küçük bir ayrıntı gibi görünse de eksik ya da bulanık bir favicon, sitenin özensiz görünmesine yol açar.

2026'da hangi dosyalar gerekli?

Yıllar içinde favicon için onlarca farklı dosya önerildi. Bugün çoğu site için aşağıdaki küçük set yeterlidir:

İsteğe bağlı olarak bir SVG favicon da ekleyebilirsin. SVG her boyutta keskin kalır ve içine yazılan CSS ile koyu temada renk değiştirebilir. Ancak her tarayıcı SVG favicon'u desteklemediği için PNG ve ICO dosyalarını yedek olarak tutman gerekir.

Favicon paketi aracı yukarıdaki dosyaların hepsini, SVG hariç, tek bir görselden üretir ve ZIP olarak verir: favicon.ico (16, 32 ve 48 piksel), 16 ve 32 piksellik PNG'ler, 180 piksellik apple-touch-icon, 192 ve 512 piksellik Android simgeleri ve site.webmanifest. Paketin yanında, sayfanın <head> bölümüne yapıştıracağın HTML kodunu kopyalama düğmesiyle birlikte verir.

Küçük boyutlar için tasarım ipuçları

16 × 16 piksellik bir simgede toplam 256 piksel vardır; 32 × 32'de bu sayı 1024'tür. Bu kadar küçük bir alanda logonun tamamı nadiren okunur. İşe yarayan bazı ilkeler:

• Sadeleştir. Uzun bir logo yerine baş harf, tek bir sembol ya da logonun ayırt edici parçasını kullan.
• İnce çizgilerden kaçın. Çok ince çizgiler küçültüldüğünde kaybolur ya da gri bir lekeye dönüşür. Kalın, dolu şekiller seç.
• Yazı koyma. Kısa bir kelime bile 16 pikselde okunmaz.
• Kontrastı yüksek tut. Simge hem açık hem koyu sekme çubuklarında görünecek; iki zeminde de test et.
• Kenar boşluğunu ayarla. Simge kenarlara yapışıksa sıkışık, çok boşluk varsa küçük görünür. Favicon paketi aracında dolgu yüzdesiyle bunu ayarlayabilirsin.
• Arka planı düşün. Şeffaf arka plan sekmede şık durur ama koyu temada kaybolabilir. iPhone ana ekranında şeffaf alanlar genellikle düz bir renkle doldurulduğu için apple-touch-icon'da dolu bir arka plan daha öngörülebilir sonuç verir. iOS köşeleri kendisi yuvarlar.

Aracın önizlemesi simgeyi gerçek boyutunda, sahte bir tarayıcı sekmesinde gösterir; kararı bu görünüme bakarak ver.

Kaynak görselin kare ya da kareye yakın olmalı. Favicon paketi aracı PNG, JPG ve SVG kabul eder. Logonun yüksek çözünürlüklü bir PNG sürümüne başka yerlerde de ihtiyacın varsa, örneğin sosyal medya profili için, SVG → PNG aracı vektörü istediğin genişlikte PNG'ye çevirir.

HTML koduna ekleme

Dosyaları sitenin kök dizinine, yani ana sayfanın bulunduğu klasöre yükledikten sonra sayfanın <head> bölümüne gerekli satırları eklersin. Favicon paketi aracı bu kodu hazır verir; tipik satırlar ve görevleri şöyledir:

• <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> güncel tarayıcılar için ana simgeyi tanımlar.
• <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> küçük gösterimler içindir.
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> iPhone ve iPad ana ekranı içindir.
• <link rel="manifest" href="/site.webmanifest"> Android ve web uygulaması simgelerini bildirir.

Tarayıcılar sitenin kökündeki /favicon.ico dosyasını kendiliğinden de arar. Dosyaları bir alt klasöre koyarsan href yollarını ve site.webmanifest içindeki simge yollarını da buna göre değiştirmelisin.

site.webmanifest dosyası ne işe yarar?

site.webmanifest, JSON biçiminde yazılmış küçük bir metin dosyasıdır. Tarayıcıya sitenin adını, ana ekrana eklendiğinde kullanılacak simgeleri ve isteğe bağlı olarak tema ile arka plan renklerini bildirir. Android'de biri siteni ana ekrana eklediğinde 192 piksellik simge kısayolda, 512 piksellik simge ise açılış ekranı gibi büyük gösterimlerde kullanılır.

Paketteki manifest dosyasını bir metin düzenleyiciyle açıp kontrol edebilirsin. Sitenin adı veya renkler gibi alanlar varsa kendi bilgilerinle güncelle ve dosyayı kaydederken JSON yapısını, yani tırnak işaretlerini ve virgülleri, bozmamaya dikkat et. Simge yollarını değiştirdiysen manifest içindeki yolların da aynı klasörü gösterdiğinden emin ol.

Adım adım favicon hazırlama

1. Logonun sade, kare bir sürümünü hazırla; en az 512 × 512 piksel olması iyi olur.
2. Favicon paketi aracına yükle; arka planı (şeffaf ya da renk), dolguyu ve köşe yuvarlama yüzdesini ayarla.
3. Sahte sekme önizlemesinde simgeyi gerçek boyutunda kontrol et.
4. ZIP dosyasını indir ve içindekileri sitenin kök dizinine yükle.
5. HTML kodunu kopyalayıp her sayfanın <head> bölümüne ekle. Çoğu sitede bu, tek bir ortak şablon dosyasıdır.
6. Siteyi gizli pencerede açıp sekme simgesini kontrol et.

Tüm işlem tarayıcında yapılır; logon bir sunucuya yüklenmez.

Simge değişmiyorsa: önbellek sorunu

Favicon'u güncellediğin hâlde eski simge görünmeye devam ediyorsa büyük ihtimalle sorun önbellektir. Tarayıcılar favicon'ları uzun süre saklar.

• Siteyi gizli pencerede ya da farklı bir tarayıcıda aç.
• Tarayıcının önbelleğini temizle veya sayfayı zorla yenile.
• Kalıcı çözüm için HTML'deki adreslere bir sürüm eki ekle, örneğin href="/favicon-32x32.png?v=2". Adres değiştiği için tarayıcı dosyayı yeniden indirir.
• Arama sonuçlarındaki simgenin güncellenmesi, arama motorunun siteyi yeniden taramasına bağlıdır ve zaman alabilir.

Windows simgesi farklı bir iş

Bir masaüstü uygulaması ya da klasör için Windows simgesi hazırlıyorsan daha büyük boyutlara ihtiyaç duyarsın. ICO oluştur aracı 16, 24, 32, 48, 64, 128 ve 256 piksel arasından seçtiğin boyutları tek bir .ico dosyasında toplar. Formatın ayrıntıları için ICO sayfasına, vektör logolar için SVG sayfasına bakabilirsin.