Favicon ve dokunma ikonları: markanın küçük ölçekte okunabilir kalması
16–512 px aralığında logo sadeleştirme, kontrast ve tek renk varyantları; manifest ile uyum.
Giriş
Favicon ve apple-touch-icon birkaç düz pikselde markayı temsil eder. Ayrıntılı logolar silik veya tanınmaz hale gelir; bu yüzden küçük ölçek için ayrı bir marka sistemi (sadeleştirilmiş monogram veya harf) düşünmek gerekir.
Bu serinin önceki yazıları: Kısa video vs GIF · PWA splash · WebP/AVIF.
Tasarım ilkeleri
- Yüksek kontrast veya tek renk varyant; ince çizgiler ve ince yazı 16×16’da kaybolur.
- Android ve PWA için maskable icon güvenli alanına göre içeride boşluk bırakın; köşeler sistem tarafından kırpılabilir.
- Koyu ve açık sekme arka planlarında test edin (tarayıcı teması değişince favicon okunurluğu değişir).
Üretim ve boyutlar
SVG kaynaktan PNG türetin; vektörde mükemmel görünen detaylar rasterize edilince gürültü olabilir. Yaygın ihtiyaçlar: 16, 32, 180 (Apple touch), 192/512 (manifest). Yeniden boyutlandırma ile tutarlı çıktı alın.
Yayın ve önbellek
İkon dosya adını veya sürüm parametresini değiştirdiğinizde CDN önbellek nedeniyle eski ikon görünebilir—güncelleme sonrası purge veya yeni dosya adı kullanın.
İngilizce paralel
Favicons and touch icons aynı konuyu İngilizce özetler.
Sonuç
Küçük ikon, büyük marka disiplinidir: sadeleştir, kontrast ver, maskable alanı koru ve güncellemeleri önbellekle birlikte planla.