Kaynak Resimden Favicon Boyutunda PNG’ler Oluşturma
Gerçek ICO dosyası oluşturma, Canvas API’sinin desteklemediği bir ikili konteyner formatı yazmayı gerektirir. Bunun yerine, bu araç Canvas API’sinin iyi yaptığı şeye odaklanır: PNG’nizi modern tarayıcıların doğrudan kabul ettiği standart favicon boyutlarına yeniden boyutlandırmak.
Modern favicon dağıtımı, <link> etiketleriyle bildirilen PNG dosyalarını kullanır ve bu da ICO konteynerini çoğu proje için isteğe bağlı hale getirir.
Nasıl Çalışır
- Bir PNG resmi bırakın veya seçin (ideal olarak kare, en az 512x512)
- Hedef boyutlarınızı ayarlamak için yeniden boyutlandırma kontrollerini kullanın
- Araç resmi belirtilen boyutta bir Canvas’a çizer
- Yeniden boyutlandırılmış PNG’yi dışa aktarın
- İhtiyacınız olan her favicon boyutu için tekrarlayın
Gerçekten İhtiyacınız Olan Favicon Boyutları
| Boyut | Nerede görünür |
|---|---|
| 16x16 | Tarayıcı sekme simgesi |
| 32x32 | Yüksek DPI’da tarayıcı sekmesi, Windows görev çubuğu |
| 48x48 | Windows masaüstü kısayolu |
| 180x180 | Apple touch simgesi (iOS ana ekran) |
| 192x192 | Android Chrome, PWA bildirimi |
| 512x512 | PWA açılış ekranı, Google arama sonuçları |
Çoğu durumu kapsayan minimal kurulum:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Modern Favicon En İyi Uygulamaları
Yüksek çözünürlüklü kaynakla başlayın
512x512 veya daha büyük bir PNG ile başlayın. Yüksek çözünürlüklü kaynaktan küçültmek temiz sonuçlar üretir.
SVG faviconlar: modern yaklaşım
Simgeniz vektör sanatı olarak çalışıyorsa, SVG favicon en iyi seçenektir. Her boyuta ölçeklenir ve birden çok dosya oluşturmayı gerektirmez.
favicon.ico yedekleme
Modern alternatiflere rağmen, site köküne bir favicon.ico dosyası yerleştirmek hala kullanışlıdır. Tarayıcılar, simge link etiketi olmadığında varsayılan olarak /favicon.ico dosyasını ister.
PWA bildirim simgeleri
Progressive Web Apps, manifest.json içinde bildirilen simgeler gerektirir. Bu boyutları kaynak PNG’nizden oluşturun ve bildirimde referans verin.
Temiz Küçültme İçin İpuçları
Küçük boyutlarda piksel mükemmel hizalama kullanın. 16x16 simgenin çalışabileceği çok az piksel vardır. Yeterli kontrast sağlayın. Basit tutun: metin 16x16’da okunamaz.
Mevcut ICO dosyalarından resim çıkarmak için ICO’dan PNG’ye aracına bakın.