Favicon aynı anda birkaç farklı ortamda çalışması gereken bir dosya seti gerektirir: tarayıcı sekmesi, yer imleri, iOS ana ekranı ve Android'de kurulmuş bir web uygulamasının simgesi — her biri kendi boyutunu ve formatını ister.
Tek harfli favicon ve Türkçe "I" sorunu
Marka simgesi olarak renkli bir zemin üzerine tek bir baş harf koymak yaygın bir yöntemdir, ama Türkçede bu görünüldüğünden daha hassastır: Türk alfabesinde noktalı İ/i ile noktasız I/ı ayrı ayrı harflerdir. Bir favicon oluşturucu ya da script harfi otomatik büyütüp küçültürken standart Unicode büyük/küçük harf dönüşümü kullanırsa, "i" harfi "I" yerine yanlışlıkla noktalı "İ"ye dönüşebilir — yazılımcıların "Turkish I problem" olarak bildiği, yerelleştirmede sık karşılaşılan bir hata kaynağıdır.
<head> içindeki <link> etiketlerinin rolü
Her simge formatı, boyutunu belirten bir sizes özelliğiyle birlikte kendi <link rel="icon"> veya <link rel="apple-touch-icon"> etiketiyle bağlanır; tarayıcı sunulan setten görüntüleme bağlamına en uygun seçeneği seçer.
PWA'lar için Web App Manifest
Progresif web uygulamaları, simge listesini, site adını ve tema rengini JSON formatında barındıran bir site.webmanifest dosyasına ihtiyaç duyar — Android, bir site uygulama olarak yüklendiğinde simgeyi tam olarak buradan alır.
Neden gerekli
- Tek bir kaynak görüntüden gerekli boyutlarda eksiksiz bir simge seti oluşturmak.
- <head> içine yapıştırmaya hazır <link> etiketi HTML kodunu almak.
- Bir mobil cihazın ana ekranına eklendiğinde sitenin doğru göründüğünden emin olmak.