Nasıl kullanılır?
- Harfler'i seçip renklerinizle bir veya iki karakter yazın ya da Görsel'i seçip bir logo belirleyin (tercihen kare ve en az 512 px).
- Her boyutun önizlemesini kontrol edin; özellikle tarayıcı sekmelerinde görünen 16 ve 32 px boyutlarını.
- ZIP dosyasını indirin ve içindeki dosyaları web sitenizin kök dizinine yükleyin.
- HTML etiketlerini sayfalarınızın head bölümüne yapıştırın ve gerekirse site.webmanifest içindeki adı düzenleyin.
Nasıl çalışır?
Tarayıcılar ve cihazlar simgeleri farklı konumlarda arar. Burada oluşturulan set, yaygın kullanımları kapsar: tarayıcı sekmeleri, yer imleri ve /favicon.ico dosyasını otomatik olarak isteyen eski yazılımlar için 16, 32 ve 48 px boyutlarında görseller içeren favicon.ico; link etiketleriyle belirtilen 16 ve 32 px PNG dosyaları; birisi sitenizi iPhone veya iPad ana ekranına eklediğinde kullanılan 180 × 180 apple-touch-icon; Android ana ekranlarında ve yüklenebilir web uygulamalarında kullanılan, site.webmanifest içinden belirtilen 192 ve 512 px simgeler.
favicon.ico dosyası, simgeleri ICO kapsayıcısı içinde PNG görselleri olarak saklar. Bu biçimi güncel tüm tarayıcılar ve Windows Vista veya sonraki sürümler okuyabilir. ICO ve ZIP dosyaları bu sayfadaki kodla oluşturulur; hiçbir şey sunucuya gönderilmez.
Küçük boyutlarda sade bir tasarım kullanın: 16 × 16 pikselde ince çizgiler ve küçük yazılar kaybolur. Bu nedenle kalın bir harf veya sadeleştirilmiş bir logo işareti, yazılı tam logodan daha iyi sonuç verir. Görsel, yüksek kaliteli birkaç aşamada küçültülür. apple-touch-icon için her zaman düz bir arka plan rengi kullanılır; çünkü iOS saydam alanları siyah doldurur. Köşeleri ise iOS kendisi yuvarlar.
Yeni simgeleri yükledikten sonra tarayıcılar, önbelleğe agresif biçimde kaydettikleri için eski favicon'u bir süre göstermeye devam edebilir. Sayfayı önbelleği atlayarak yenilemek veya /favicon.ico dosyasını doğrudan açmak genellikle işe yarar.
Örnekler
Yeni bir proje için harf simgesi
Koyu yeşil, yuvarlatılmış bir kare üzerine beyaz harflerle "TG" yazmak, tasarlanmış bir logoya gerek kalmadan tarayıcı sekmesinde 16 × 16 px boyutunda bile okunaklı ve sade bir simge oluşturur.
Mevcut bir logodan simge oluşturma
Saydam arka planlı 1024 × 1024 PNG bir logoda Görselin tamamını sığdır seçeneği, sekme simgelerinin saydam olmasını ve apple-touch-icon'ın marka renginizde görünmesini sağlar.
Yatay logo
1200 × 300 boyutlarında bir kelime logosunda Ortayı kırp seçeneği yalnızca ortadaki harfleri tutar. Görselin tamamını sığdır seçeneği her şeyi korur, ancak görsel çok küçülür. Genellikle ayrı, kare bir logo işareti daha iyi görünür.
Sık sorulan sorular
favicon.ico dosyasına hâlâ ihtiyacım var mı?
Evet, hâlâ kullanışlıdır. Bazı tarayıcılar, RSS okuyucuları ve araçlar, link etiketi olmasa bile sitenin kök dizinindeki /favicon.ico dosyasını ister. Modern tarayıcılar ayrıca HTML'de belirtilen PNG simgelerini de kullanır.
Dosyaları nereye koymalıyım?
Dosyaları web sitenizin ana sayfasıyla aynı konumdaki kök dizinine yükleyin. Böylece /favicon.ico ve HTML'deki diğer yollar çalışır. Bir alt klasör kullanıyorsanız link etiketlerindeki ve site.webmanifest dosyasındaki yolları değiştirin.
Eski favicon'um neden hâlâ görünüyor?
Tarayıcılar favicon'ları ayrı olarak ve uzun süre önbelleğe alır. Sayfayı önbelleği atlayarak yenilemeyi, yeni bir sekmede /favicon.ico dosyasını açmayı veya gizli pencerede kontrol etmeyi deneyin. Dosyaları favicon-v2.ico gibi yeniden adlandırmak da yeniden yüklenmelerini sağlar.
Bu araç SVG favicon oluşturuyor mu?
Hayır. Her yerde çalışan PNG ve ICO dosyaları oluşturur. Zaten bir SVG logonuz varsa bu dosyalara ek olarak type değeri image/svg+xml olan bir link etiketiyle kendiniz ekleyebilirsiniz.
Gizlilik
Simgeler, ICO dosyası ve ZIP dosyası tarayıcınızda oluşturulur. Görseliniz ve metniniz yüklenmez, saklanmaz veya analiz verilerine eklenmez.