Dosya Formatları
ICO Nedir? Simge Dosyaları ve Favicon Rehberi
ICO, tek dosyada birden çok boyut taşıyan Windows simge biçimidir. Yapısını, favicon tarihçesini ve bugün hangi boyutların gerektiğini anlatıyoruz.
Yazar: Hemen Dönüştür Editör EkibiYayınlanma: 6 dk okuma
ICO, Windows'ta program ve klasör simgelerini, web'de ise tarayıcı sekmesindeki küçük site simgesini (favicon) saklamak için kullanılan biçimdir. Diğer görsel biçimlerinden temel farkı, tek bir dosyanın içinde aynı simgenin birden çok boyutunu barındırabilmesidir. Bu yazıda ICO dosyasının iç yapısını, Windows sürümleriyle nasıl geliştiğini, favicon'un tarihçesini, bugün hangi boyutların gerektiğini ve ICO dosyalarını nasıl doğru üreteceğinizi anlatıyoruz.
ICO nedir?
ICO (uzantısı .ico), Microsoft'un simge kaynakları için tanımladığı bir kapsayıcı biçimdir. Bir ICO dosyası bir "simge dizini" ile başlar ve bu dizin dosyadaki her bir görseli (örneğin 16x16, 32x32 ve 48x48 piksel) ayrı bir giriş olarak listeler. Windows ya da tarayıcı, simgeyi göstereceği yere en uygun boyutu bu listeden seçer.
IANA'ya kayıtlı resmî MIME türü image/vnd.microsoft.icon'dur; ancak Microsoft yazılımları ve birçok sunucu hâlâ image/x-icon kullanır. Fare imleçleri için kullanılan CUR biçimi neredeyse aynıdır; farkı, dizindeki tür alanının 1 yerine 2 olması ve imlecin tıklama noktasını (hotspot) saklamasıdır.
Tarihçe: Windows simgelerinden favicon'a
- Windows 1.0: Simgeler tek renkliydi (siyah beyaz).
- Windows 3.0: Bugün bildiğimiz, birden çok görseli dizinle tutan yapı bu dönemde geldi.
- 1995: Microsoft'tan John Hornick'in "Icons" makalesi, ICO yapısını ayrıntılı olarak belgeledi ve geliştiricilere en az 16x16 (16 renk), 32x32 (16 renk) ve 48x48 (256 renk) görselleri dahil etmelerini önerdi.
- Mart 1999: Internet Explorer 5, favicon'u destekleyen ilk tarayıcı oldu. Site kök dizinindeki
favicon.icodosyası yer imlerinde ve adres çubuğunda gösteriliyordu. - Windows XP: 32 bit görsellere 8 bitlik alfa kanalı eklendi; yarı saydam kenarlar mümkün oldu.
- Windows Vista: 256x256 boyutu ve ICO içine PNG gömme desteği geldi.
- 2003:
image/vnd.microsoft.iconMIME türü IANA'ya bir üçüncü taraf tarafından kaydettirildi.
ICO dosyasının yapısı
Simge dizini (ICONDIR)
Dosya 6 baytlık bir başlıkla başlar: ayrılmış bir alan (0), tür (simge için 1, imleç için 2) ve dosyadaki görsel sayısı. Ardından her görsel için 16 baytlık bir dizin girişi gelir.
Dizin girişi (ICONDIRENTRY)
| Alan | Anlamı |
|---|---|
| bWidth, bHeight | Genişlik ve yükseklik (1 bayt). 0 değeri 256 piksel demektir. |
| bColorCount | Paletteki renk sayısı (8 bit ve üzerinde 0) |
| wPlanes, wBitCount | Renk düzlemi ve piksel başına bit |
| dwBytesInRes | Görsel verisinin bayt cinsinden boyutu |
| dwImageOffset | Görsel verisinin dosyadaki başlangıç konumu |
Boyut alanı tek bayt olduğu için ICO içindeki bir görsel en fazla 256x256 piksel olabilir.
Görsel verisi: BMP ya da PNG
Klasik ICO'da her görsel, dosya başlığı olmayan bir BMP'dir (DIB). Hornick'in makalesine göre bu yapı bir renk görüntüsü (XOR maskesi) ve onun altında 1 bitlik bir şeffaflık maskesi (AND maskesi) içerir; bu yüzden başlıktaki yükseklik değeri iki maskenin toplam yüksekliğidir ve gerçek yüksekliğin iki katıdır. Windows XP'den itibaren 32 bitlik görsellerde alfa kanalı doğrudan piksel verisinde bulunur.
Windows Vista'dan beri bir giriş, BMP yerine eksiksiz bir PNG dosyası da olabilir. Özellikle 256x256 boyutunda PNG gömmek dosyayı ciddi biçimde küçültür. MDN, PNG gömülü ICO desteğinin Vista'dan önce bulunmadığını ve eski yazılımlarda sorun çıkarabileceğini hatırlatır; ancak güncel tarayıcılar ve Windows sürümleri her iki türü de okur.
Hangi boyutlar gerekli?
Windows uygulama simgeleri
Microsoft'un güncel uygulama simgesi rehberi, bir Win32 uygulamasının en az 16x16, 24x24, 32x32, 48x48 ve 256x256 boyutlarını içermesini önerir. Windows tam eşleşme bulamazsa bir üst boyutu küçülterek kullanır; 256 piksel bulunduğunda simge yalnızca küçültülür, hiç büyütülmez. Örneğin %100 ölçekte başlık çubuğu ve bağlam menüsü 16 piksel, görev çubuğu 24 piksel kullanır; %200 ölçekte bu değerler 32 ve 48 piksele çıkar.
Web siteleri için favicon
Web tarafında durum farklıdır. HTML standardına göre sayfada rel="icon" bağlantısı yoksa tarayıcılar sitenin kökündeki /favicon.ico adresini isteyebilir. Bu yüzden kökte bir favicon.ico bulundurmak hâlâ iyi bir uygulamadır, ancak tek başına yeterli değildir:
- Google Arama, favicon'un kare (1:1) ve en az 8x8 piksel olmasını şart koşar; farklı yüzeylerde iyi görünmesi için 48x48'den büyük bir görsel önerir.
- iPhone ve iPad ana ekranı için 180x180 piksellik
apple-touch-iconkullanılır. - Android ve PWA'lar, web uygulaması bildirimi (manifest) içinde 192 ve 512 piksellik simgeler ister; uyarlanabilir simgeler için "maskable" bir sürüm önerilir.
- Güncel tarayıcılar SVG favicon'u da destekler; tek bir vektör dosyası tüm boyutları karşılar.
Pratikte favicon.ico'nun içine 16, 32 ve 48 piksel koymak masaüstü tarayıcılar ve eski sistemler için yeterlidir; büyük boyutlar ayrı PNG dosyalarıyla verilir.
Destek: işletim sistemleri, tarayıcılar ve programlar
Windows ICO'yu yerleşik olarak okur ve yazar; Gezgin, kısayollar ve masaüstü bu biçimle çalışır. MDN'ye göre Chrome, Edge, Firefox, Opera ve Safari ICO dosyalarını gösterir. macOS kendi uygulama simgeleri için ICNS biçimini kullanır, ancak Önizleme ICO açabilir. GIMP gibi düzenleyiciler ICO'yu çok katmanlı bir dosya olarak açar: her boyut ayrı bir katmandır. MDN, ICO'nun genel web içeriğinde kullanılmamasını ve favicon için de PNG ile <link> kullanımının yaygınlaştığını belirtir.
Avantajlar ve dezavantajlar
| Avantajlar | Dezavantajlar |
|---|---|
| Tek dosyada birden çok boyut ve renk derinliği | En fazla 256x256 piksel |
| Windows'ta evrensel destek | Web'de favicon dışında kullanım alanı yok |
| Alfa kanalı ve PNG sıkıştırması (Vista ve sonrası) | Eski BMP tabanlı girişler büyük ve hantal |
| Kök dizindeki favicon.ico'yu tarayıcılar otomatik arar | Üretmek için özel araç gerekir; her program yazamaz |
Sık karşılaşılan sorunlar ve çözümleri
PNG dosyasının uzantısını .ico yapmak yetmiyor mu?
Bazı tarayıcılar bunu tolere etse de bu gerçek bir ICO değildir: dosyada simge dizini yoktur ve Windows onu simge olarak kabul etmez. Doğru yol, görseli gerçek bir ICO'ya dönüştürmektir. PNG'den ICO'ya ve JPG'den ICO'ya araçlarımız her zaman 16, 32 ve 48 piksellik kareleri yazar; görseliniz yeterince büyükse 64, 128 ve 256 pikseli de ekler. Her boyut dosyanın içine PNG olarak gömülür, böylece şeffaflık korunur.
Favicon bulanık ya da okunmuyor
16 piksellik bir alanda ince çizgiler ve küçük yazılar kaybolur. Kalın, yüksek kontrastlı, sade bir işaret kullanın; gerekiyorsa logonuzun yalnızca simge kısmını alın. Kaynak görselin en az 256x256, tercihen 512x512 piksel ve kare olması en iyi sonucu verir.
Kare olmayan görsel basık ya da uzamış görünüyor
Simgeler karedir. Araçlarımız görseli germeden, oranını koruyarak kare bir alanın ortasına yerleştirir ve boş kenarları şeffaf bırakır. Tam kare bir sonuç istiyorsanız önce resim kırp aracıyla kare bir kesit alın.
Yeni favicon görünmüyor
Tarayıcılar favicon'u uzun süre önbellekte tutar. Dosya adını değiştirmek ya da bağlantıya bir sürüm parametresi eklemek (/favicon.ico?v=2) ve sunucunun doğru MIME türünü döndürdüğünü kontrol etmek genellikle sorunu çözer. Google Arama sonuçlarındaki simgenin güncellenmesi ise sitenin yeniden taranmasını bekler.
Windows'ta simge eski hâliyle görünüyor
Windows simgeleri ayrı bir önbellekte tutar. Uygulamayı yeniden derleyip kısayolu yeniden oluşturmak ya da oturumu kapatıp açmak çoğu zaman yeterlidir.
Dönüştürme ipuçları
- Web sitesi için tek ICO yetmez: Favicon oluşturucu tek seferde favicon.ico (16, 32 ve 48 piksel), favicon-48x48.png, apple-touch-icon.png (180 piksel), icon-192.png, icon-512.png, maskable icon-512-maskable.png ve site.webmanifest dosyalarını üretir; kaynak SVG ise icon.svg'yi de ekler. Sayfanın
<head>bölümüne yapıştıracağınız kodu da verir. - Apple simgesinde zemin opak olmalı: iOS saydam alanları siyah gösterir ve köşeleri kendisi yuvarlar; bu yüzden favicon oluşturucu apple-touch-icon'u seçtiğiniz zemin rengiyle doldurur.
- Logonuz SVG ise: Önce SVG'den PNG'ye büyük bir PNG alıp ICO'ya çevirebilir ya da SVG'yi doğrudan favicon oluşturucuya verebilirsiniz.
ICO ve favicon araçlarımız tarayıcınızda çalışır; görseliniz sunucuya yüklenmez, cihazınızdan çıkmaz.
Sık Sorulan Sorular
ICO dosyası en fazla kaç piksel olabilir?
Dizin girişindeki genişlik ve yükseklik alanları tek bayttır; 0 değeri 256 anlamına gelir. Bu yüzden bir ICO içindeki tek bir görsel en fazla 256x256 pikseldir.
Favicon için ICO mu PNG mi kullanmalıyım?
İkisini birlikte kullanın. Kök dizinde 16, 32 ve 48 piksel içeren bir favicon.ico eski tarayıcılar ve otomatik istekler içindir; güncel tarayıcılar ve mobil cihazlar için PNG (ve isterseniz SVG) simgeleri <link> etiketiyle tanımlayın.
ICO şeffaflık destekler mi?
Evet. Eski ICO'larda 1 bitlik bir maske, Windows XP'den itibaren 32 bitlik görsellerde tam alfa kanalı, Vista'dan beri gömülü PNG ile şeffaflık desteklenir.
ICO dosyasını PNG'ye nasıl çeviririm?
Görsel dönüştürücüye ICO dosyanızı ekleyip hedef olarak PNG seçin. Dosya birden çok boyut içeriyorsa en büyük boyut kullanılır.
Mac'te ICO kullanılır mı?
macOS uygulama simgeleri için ICNS biçimini kullanır. Web siteleri için ise favicon.ico ve PNG simgeler tüm işletim sistemlerindeki tarayıcılarda çalışır.
