ICO’yu PNG’ye Dönüştürme
ICO (Windows Simgesi), bir simgenin farklı boyut ve renk derinliklerinde birden çok sürümünü tutmak için tasarlanmış bir konteyner formatıdır. En çok favicon.ico olarak, tarayıcı sekmelerinde ve yer imlerinde görüntülenen küçük simge olarak bilinir. Bu araç, tarayıcınızın yerel işlemesini kullanarak bir ICO dosyasından PNG resmi çıkarır.
Nasıl Çalışır
- Bir ICO dosyası bırakın veya seçin
- Tarayıcının resim kod çözücüsü ICO konteynerini okur ve işlenecek gömülü bir resim seçer
- İşlenen resim bir Canvas öğesine çizilir
- Canvas,
toDataURL('image/png')ile PNG verilerini dışa aktarır - PNG’yi indirin
Tarayıcı ICO ayrıştırmayı yerel olarak halleder. Gömülü resimlerden en uygun boyutu, tipik olarak mevcut en büyük varyantı seçer.
ICO Formatını Anlama
ICO tek bir resim formatı değildir. Her biri farklı çözünürlük ve bit derinliğinde birden çok resmi bir araya getiren bir konteynerdir. Tipik bir favicon.ico şunları içerebilir:
| Gömülü boyut | Bit derinliği | Kullanım alanı |
|---|---|---|
| 16x16 | 32-bit (RGBA) | Tarayıcı sekmesi, adres çubuğu |
| 32x32 | 32-bit (RGBA) | Windows görev çubuğu, kısayol |
| 48x48 | 32-bit (RGBA) | Windows masaüstü simgesi |
| 256x256 | PNG kodlu | Yüksek DPI ekranlar, Windows Vista+ |
Her gömülü resim, bir BMP varyantı (şeffaflık için AND maskesi ile ham piksel verisi) veya tam bir PNG olarak depolanabilir. 256x256 boyutu neredeyse her zaman PNG kodludur çünkü bu çözünürlükte BMP gereksiz yere büyük olurdu.
Favicon İş Akışları
Favicon inceleme
Bir favicon.ico buldunuz ve içinde ne olduğunu görmek istiyorsunuz. PNG’ye dönüştürmek, herhangi bir görüntüleyicide açabileceğiniz, yakınlaştırabileceğiniz, şeffaflığı kontrol edebileceğiniz veya bir tasarım aracında inceleyebileceğiniz standart bir resim dosyası verir.
Yeniden kullanım için çıkarma
Bir README, Slack entegrasyonu, araç paneli veya API avatar uç noktası için simgeye PNG olarak ihtiyacınız var. Çoğu platform ICO dosyalarını kabul etmez. PNG’ye çıkarmak evrensel olarak uyumlu bir format verir.
Favicon hata ayıklama
Favicon’lar tarayıcılar arasında tutarsız davranır. Chrome, Firefox ve Safari ICO dosyalarını farklı işler ve önbellekleme hata ayıklamayı zorlaştırır. ICO’yu PNG’ye dönüştürmek, tarayıcı işleme davranışından bağımsız olarak gerçek resim içeriğini doğrulamanızı sağlar.
ICO ve Modern Favicon Yaklaşımları
Geleneksel favicon.ico yaklaşımının yerini PNG ve SVG faviconlar alıyor:
<!-- Geleneksel -->
<link rel="icon" href="/favicon.ico">
<!-- Modern: Çoklu boyutta PNG -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<!-- Modern: SVG (her boyuta ölçeklenir) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">SVG faviconlar Chrome, Firefox ve Edge’de desteklenir (2024 itibarıyla Safari’de değil). Her sekme boyutuna mükemmel ölçeklenir ve hatta koyu mod simgeleri için prefers-color-scheme yanıtı verebilir. PNG yaklaşımı, daha geniş tarayıcı desteğiyle her boyut üzerinde açık kontrol sağlar.
Favicon oluşturma için PNG’den ICO’ya aracını kullanın. Resimleri veri URI’si olarak kodlamak için Base64 Kodlayıcı aracına bakın.