Web Siteniz için Favicon Nasıl Oluşturulur: ICO Dosya Kılavuzu
Tarayıcı sekmenizdeki o küçük simge, düşündüğünüzden daha fazla iş yapar. Favicon'lar sekmelerde, yer imlerinde, tarayıcı geçmişinde, mobil ana ekranlarda ve masaüstü kısayollarında görünür. Eksik bir favicon sitenizin tamamlanmamış görünmesine neden olur. İyi bir tanesi onu düzinelerce açık sekme arasında anında tanınabilir hale getirir. Gerekli boyutları ve formatları bildiğinizde bir tane oluşturmak yaklaşık beş dakika sürer.
Favicon Nedir?
Favicon ("favori simgesi"nin kısaltması), web sitenizle ilişkili küçük simgedir. Tarayıcılar bunu sayfa başlığınızın yanındaki sekme çubuğunda, yer işaretleri listesinde ve tarayıcı geçmişinde görüntüler. Mobil cihazlar, kullanıcılar sitenizi ana ekranlarına eklediğinde bunu kullanır. Arama motorları bunu sonuçlarda gösterebilir. Sitenizin en küçük görsel öğelerinden biridir ancak en sık görülenlerden biridir.
Gerekli Site Simgesi Boyutları
Farklı bağlamlar favicon'unuzu farklı boyutlarda görüntüler. Tüm kullanım durumlarını karşılamak için birkaç sürüme ihtiyacınız vardır:
16x16 piksel — Tarayıcı sekmeleri. Bu, klasik favicon boyutu ve ihtiyacınız olan en küçük versiyondur. 32x32 piksel — Görev çubuğu kısayolları, yüksek DPI ekranlarda daha yeni tarayıcı sekmeleri. 48x48 piksel — Windows masaüstü kısayolları ve site simgeleri.
180x180 piksel — Apple Dokunmatik Simgesi. Birisi sitenizi ana ekranına eklediğinde iOS'un kullandığı şey budur. En önemli mobil boyuttur. 192x192 piksel — Android Chrome ana ekran simgesi ve PWA (Aşamalı Web Uygulaması) simgesi. 512x512 piksel — PWA açılış ekranları ve Android yükleme iletişim kutusu.
Favicon Formatlarının Açıklaması
ICO formatı: Orijinal favicon formatı ve çok eski tarayıcılar ve Internet Explorer da dahil olmak üzere her yerde çalışan tek format. Bir ICO dosyası birden fazla boyutu tek bir dosyada toplayabilir (genellikle 16x16, 32x32 ve 48x48). Maksimum uyumluluk için her web sitesinin kök dizininde bir favicon.ico dosyası bulunmalıdır. iformat.io'da PNG'den ICO'ya dönüştürücü oluşturmayı basitleştirir.
PNG formatı: Modern alternatif. PNG favicon'larının oluşturulması daha kolaydır (dosya başına bir resim) ve tam şeffaflığı destekler. Tüm modern tarayıcılar PNG favicon'larını destekler. Dezavantajı ise her boyut için ayrı dosyalara ihtiyaç duymanızdır ve çok eski tarayıcılar bunları desteklemeyebilir.
SVG formatı: En yeni seçenek. SVG bir vektör formatı olduğundan, tek bir dosya her boyuta mükemmel şekilde ölçeklenir; pikselleşme veya birden fazla dosya olmaz. SVG favicon'ları Chrome, Firefox ve Edge tarafından desteklenir ancak Safari tarafından desteklenmez (2026 başı itibarıyla). SVG favicon'ları ayrıca PNG ve ICO'nun yapamadığı CSS medya sorguları aracılığıyla karanlık mod uyarlamasını da destekler.
Adım 1: Simgenizi Tasarlayın
Favicon tasarımının en önemli kuralı: basit tutun. Simgeniz 16x16 piksel boyutunda görüntülenecektir; bu yalnızca 256 kareden oluşan bir ızgaradır. İnce ayrıntılar, ince çizgiler ve küçük metinler bu boyutta okunamayacaktır. En iyi faviconlar, yüksek kontrastlı, cesur ve tanınabilir şekillerdir.
Logonuz küçük boyutlarda çalışıyorsa kullanın. Birçok şirket, adının yalnızca ilk harfini veya logo işaretinin basitleştirilmiş bir versiyonunu kullanır. Fotoğraflardan kaçının; 16x16 boyutunda tanınmayan lekeler haline gelirler. Düz renkler ve basit geometrik şekiller en iyi sonucu verir. Taahhüt etmeden önce tasarımınızı 16x16 pikselde görüntüleyerek test edin.
Adım 2: ICO Dosyasını Oluşturun
En az 512x512 piksel boyutunda kare bir PNG resmiyle başlayın. Daha büyük bir kaynak, küçültüldüğünde size daha temiz sonuçlar verir. Şunu kullanın: PNG'den ICO'ye dönüştürücü ICO dosyanızı oluşturmak için. Dönüştürücü, tümü tek kaynak görüntünüzden 16x16, 32x32 ve 48x48 sürümlerini içeren çok boyutlu bir ICO oluşturur.
Kaynak görseliniz JPG ise (bir tasarım aracından dışa aktarılan logo gibi), JPG'den ICO'ye dönüştürücü yerine. SVG formatındaki vektör logolar için SVG'den ICO'ye dönüştürücü vektörü her hedef boyutta oluşturduğu için en keskin sonuçları üretir.
3. Adım: HTML Kodunu ekleyin
Favicon.ico dosyanızı web sitenizin kök dizinine yerleştirin. Çoğu tarayıcı, HTML etiketi olmasa bile bunu otomatik olarak /favicon.ico adresinde bulacaktır. Ancak açık kontrol sağlamak ve tüm formatları desteklemek için bu etiketleri HTML'nizin içine ekleyin
<head> bölüm:<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Klasik ICO favicon'u. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — Modern tarayıcılar için PNG favicon. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — Apple cihazlarının ana ekran simgesi.Adım 4: Apple Touch Simgesini ve Android Simgelerini Oluşturun
iOS kullanıcıları sitenizi ana ekranlarına eklediğinde Apple Touch Simgesi (180x180 PNG) görüntülenir. Simgenizin 180x180 piksellik, kenarlarında dolgu bulunan bir PNG sürümü oluşturun; iOS kendi yuvarlatılmış köşelerini uygulayacaktır. Bunu apple-touch-icon.png olarak adlandırın ve HTML'nizde buna referans verin.
Android ve Progressive Web Uygulamaları için 192x192 ve 512x512 PNG simgelerine ihtiyacınız vardır. Bunlara genellikle bir web uygulaması bildirim dosyasında (manifest.json veya site.webmanifest) başvurulur. Bildiri dosyası ayrıca kullanıcılar sitenizi uygulama olarak yüklediğinde uygulama adınızı, tema renginizi ve görüntüleme modunuzu ayarlamanıza da olanak tanır.
Yaygın Favicon Hataları
Çok fazla ayrıntı kullanmak: İnce çizgileri ve küçük metinleri olan karmaşık bir logo, 200 pikselde harika görünür ancak 16 pikselde okunamayan bir lekeye dönüşür. Acımasızca basitleştirin. Karanlık modu unutmak: Favicon'unuz şeffaf bir arka plan üzerinde koyu bir renk kullanıyorsa, koyu sekme çubuklarına sahip tarayıcılarda görünmez. Açık renkli bir kenarlık eklemeyi veya karanlık mod CSS ile SVG favori simgelerini kullanmayı düşünün.
Gerçek boyutta test edilmiyor: Favicon'unuzu her zaman gerçek bir tarayıcı sekmesinde 16x16 boyutunda önizleyin. %400 yakınlaştırmada tasarım aracınızda güzel görünen şey gerçek boyutta çalışmayabilir. ICO dosyasını atlamak: PNG favicon'ları modern tarayıcılarda çalışsa da, kök dizininizde favicon.ico'nun bulunması, eski sistemler de dahil olmak üzere her tarayıcı ve tarayıcıyla uyumluluğu sağlar.
Favicon'unuzu Test Etme
Favicon dosyalarınızı yükledikten ve HTML'yi ekledikten sonra birden fazla tarayıcıda test yapın: En azından Chrome, Firefox, Safari ve Edge. Simgenin sekmede, yer imlerinde (bir sayfayı yer imlerine ekleyin ve doğrulayın) ve mobil cihazlarda (hem iOS hem de Android'de ana ekrana ekleyin) doğru şekilde görünüp görünmediğini kontrol edin. Tarayıcı önbellekleri faviconlar nedeniyle agresif olabilir; yeni simgenizi görmüyorsanız önbelleği temizlemeyi veya gizli bir pencere açmayı deneyin.
Diğer yöne gitmeniz gerekiyorsa (mevcut bir ICO dosyasından simgeleri çıkarmak) ICO'den PNG'ye dönüştürücü gömülü görüntüleri çıkarır. Bu, bir favicon'u güncellemeniz gerektiğinde ancak orijinal kaynak resmine değil yalnızca ICO dosyasına sahip olduğunuzda kullanışlıdır.
Uygun bir favicon'un oluşturulması beş dakika sürer ancak web sitenize gösterişli, profesyonel bir görünüm kazandırır. Basit, cesur bir tasarımla başlayın, çevrimiçi dönüştürücüyle ICO dosyanızı oluşturun, HTML etiketlerini ekleyin ve tarayıcılar arasında test edin. Siteniz eksiksiz görünecek ve kullanıcılarınız, açtıkları düzinelerce sekme arasında sizin sekmenizi bulabilecek.