Favicon nasıl oluşturulur?
Logonuzu yukarıdaki alana sürükleyin ya da Dosya seçin düğmesine tıklayın. En az 512 piksellik kare bir PNG ya da SVG en iyi sonucu verir; JPG, WebP ve HEIC de olur.
Saydam olamayan ana ekran simgeleri için bir arka plan rengi seçin. Çoğu logoya marka renginiz ya da beyaz yakışır.
Favicon oluştur düğmesine tıklayın ve ZIP'i indirin.
Dosyaları sitenizin kök klasörüne koyun ve gösterilen HTML'i sayfalarınızın <head> bölümüne yapıştırın.
Bir web sitesi neden birden çok simgeye ihtiyaç duyar?
Tarayıcılar hâlâ her siteden /favicon.ico ister ve onu sekmelerde, yer imlerinde ve geçmişte gösterir. iPhone'lar, siteniz ana ekrana eklendiğinde ayrı bir 180 piksellik simge kullanır; Android ve yüklenen web uygulamaları simgelerini bir manifest dosyasından okur.
Her yer simgeyi farklı bir boyutta ve biçimde gösterir. Her biri için hazırlanmış bir set, bulanık ya da kesilmiş bir logo yerine her yerde net görünür.
ZIP'in içinde neler var?
Yalnızca bugünün tarayıcılarının ve telefonlarının kullandığı dosyalar. Onlarca boyut, Windows kutucukları ve browserconfig.xml içeren eski setlere artık gerek yok.
Sekme simgeleri logonuzun saydamlığını korur. Ana ekran simgeleri seçtiğiniz arka plan rengini alır; saydam arka planlı bir logonun çevresinde orada biraz boşluk bırakılır ki yuvarlak köşeler onu kesmesin.
| Dosya | Boyut | Nerede kullanılır |
|---|---|---|
| favicon.ico | 16, 32 ve 48 px | Tarayıcı sekmeleri, yer imleri, Windows |
| apple-touch-icon.png | 180 px | iPhone ve iPad ana ekranı |
| icon-192.png, icon-512.png | 192 ve 512 px | Android, yüklenen web uygulamaları |
| icon-maskable-512.png | 512 px | Android'in yuvarlak simgeleri |
| site.webmanifest | – | Android'e simgelerin yerini söyler |
| icon.svg (yalnızca SVG'den) | Her boyut | Yeni tarayıcılarda net sekme simgesi |
Güvenli mi?
Evet. Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız, tarayıcının yerleşik teknolojileriyle kendi cihazınızda okunur ve dönüştürülür; hiçbir sunucuya yüklenmez ve başka kimse göremez.
Bunu kendiniz de kontrol edebilirsiniz: tarayıcınızın geliştirici araçlarını açın, Ağ (Network) sekmesine geçin ve bir dosya dönüştürün. Hiçbir yükleme isteği gönderilmez.
Logonuz tarayıcınızda işlenir ve hiçbir yere yüklenmez. ZIP cihazınızda oluşturulur.
Dosyalar, siz kaldırana ya da sayfayı kapatana kadar yalnızca bu sekmenin belleğinde kalır.
Sık sorulan sorular
Hangi görseli kullanmalıyım?
En az 512 × 512 piksellik kare bir logo ya da sembol; ideali saydam arka planlı bir PNG ya da SVG. Basit biçimler 16 pikselde en iyi okunur, bu yüzden logonun yalnızca sembolü çoğu zaman yazılı hâlinden daha iyi sonuç verir.
Dosyaları nereye koymalıyım?
Sitenizin kök klasörüne, yani ornek.com/favicon.ico gibi adreslerde olacak şekilde. Sonra oluşturduktan sonra gösterilen dört satır HTML'i her sayfanın <head> bölümüne ya da site oluşturucunuzun özel kod ayarlarına yapıştırın.
Ana ekran simgelerinin neden arka planı var?
iPhone ve Android, ana ekran simgelerindeki saydam alanları siyah ya da beyaz çizer; bu da logoyu gizleyebilir. Bu simgeler seçtiğiniz rengi alır ve yuvarlak köşeler bir şeyi kesmesin diye logonun çevresinde biraz boşluk bırakılır.
Yalnızca favicon.ico oluşturabilir miyim?
Evet: PNG'den ICO'ya yalnızca .ico dosyasını oluşturur ve 256 piksele kadar boyutlarını seçmenize izin verir.
Favicon'umu nasıl güncellerim?
Dosyaları değiştirip sayfayı yenileyin. Tarayıcılar favicon'ları uzun süre saklar, bu yüzden değişmesi zaman alabilir; HTML'deki bağlantılara ?v=2 eklemek yenisini çekmelerini sağlar.