ICO'dan PNG'ye Dönüştürücü

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

1. Bir ICO dosyası bırakın veya seçin
2. Tarayıcının resim kod çözücüsü ICO konteynerini okur ve işlenecek gömülü bir resim seçer
3. İşlenen resim bir Canvas öğesine çizilir
4. Canvas, toDataURL('image/png') ile PNG verilerini dışa aktarır
5. 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:

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.