PNG Dosyasını ICO'ya Çevirme (Favicon Oluşturma)

Adım Adım

1. 1

   PNG → ICO Aracını Aç

   PikaEdit PNG'yi ICO'ya Çevir sayfasına git.

2. 2

   Görsel Yükle

   PNG, JPEG, WebP veya SVG formatında görsel yükle. Maksimum 5 MB. En iyi sonuç için kare ve yüksek çözünürlüklü bir kaynak kullan.

3. 3

   Boyutları Seç

   ICO dosyasına dahil edilecek boyutları işaretle: 16, 24, 32, 48, 64, 128, 256 px. Varsayılan 16, 32, 48 ve 256'dır.

4. 4

   Fit Modunu Seç

   Görsel kare değilse 'Pad' (şeffaf dolgu, oran korunur) veya 'Cover' (kırparak doldur) modunu seç.

5. 5

   ICO Dosyasını İndir

   Dönüştür düğmesine bas. İşlem tarayıcında gerçekleşir. favicon.ico dosyasını indir ve projenin kök dizinine koy.

Favicon İçin Neden ICO Formatı Gerekir?

ICO formatı, birden fazla boyutu tek dosyada saklayabilir. Tarayıcılar ekran çözünürlüğüne ve kullanım alanına göre (sekme ikonu, yer işareti, kısayol) en uygun boyutu seçer.

Modern tarayıcılar PNG favicon'u da kabul eder; ancak Internet Explorer ve eski Windows uygulamalarıyla tam uyumluluk için ICO zorunludur. Bazı e-posta istemcileri ve RSS okuyucuları da ICO bekler.

Google Chrome sekme ikonu için 16×16, yer işareti için 32×32 ve yüksek DPI için 48×48 boyutlarını kullanır. Tüm bu boyutları tek bir ICO içinde sunmak en güvenilir yoldur.

HTML'de favicon şöyle bağlanır: <link rel='icon' href='/favicon.ico'>. Bu dosya genellikle site kök dizinine (public/ veya dist/) yerleştirilir.

Boyut Seçenekleri ve Çoklu Boyut ICO

Araç yedi boyut sunar: 16, 24, 32, 48, 64, 128 ve 256 piksel. Varsayılan seçim 16, 32, 48 ve 256 px'tir; bu dört boyut çoğu kullanım alanını kapsar.

Seçilen her boyut ICO dosyası içinde PNG verisi olarak saklanır. ICO, bu PNG verisini birden fazla boyut için bir kapsayıcı görevi görür.

256 px boyutunu dahil etmek, Windows görev çubuğu ve yüksek DPI ekranlar için büyük ikon gerektiren masaüstü uygulamalarında önemlidir.

16 px boyutu standart sekme ikonudur. Yüksek kalite görüntü için logonun bu küçük boyutta net göründüğünden emin ol; karmaşık görseller 16 px'te bulanıklaşabilir.

Gereksiz boyutları seçmek dosya boyutunu artırır. Yalnızca web için 16, 32, 48 genellikle yeterlidir.

Favicon oluşturmaya başla →

Pad ve Cover Fit Modu: Kare Olmayan Görseller İçin

ICO kareleme zorunludur; her boyut kare piksel alanıdır. Kaynak görsel kare değilse araç iki mod sunar.

Pad (doldurma) modu: Görsel oranı korunur, kalan alan şeffaf dolgu ile tamamlanır. Logo veya metin içeren görsellerde görsel kesilmeden tam olarak dahil edilir. PNG formatı şeffaflığı desteklediğinden bu mod favicon için genellikle tercih edilir.

Cover (kırpma) modu: Görsel kare alana sığacak şekilde kırpılır. Fotoğraf veya tam kaplaması istenen görsel için uygundur. Kenar içerikler kesilebilir.

Kaynak görsel zaten kareyse (ör. 512×512 PNG) her iki mod aynı sonucu verir.

Tarayıcıya Favicon Nasıl Eklenir?

Oluşturulan favicon.ico dosyasını projenin kök dizinine (Next.js'te public/, standart HTML'de kök) yerleştir.

HTML <head> bölümüne ekle: <link rel='icon' type='image/x-icon' href='/favicon.ico'>

Next.js 13+ için app/ dizinine favicon.ico olarak koyarsan Next.js otomatik olarak tanır; ek HTML etiketi gerekmez.

Birden fazla platformu hedefliyorsan 180×180 Apple Touch Icon (PNG) ve SVG favicon da ekleyebilirsin. Bu araç ICO için özelleşmiştir; ek formatlar için görsel boyutlandırma aracını kullan.

Tarayıcılar favicon'u önbelleğe alır; eski ikonun hâlâ görünmesi durumunda sekmeyi sert yenile (Ctrl+Shift+R).

Sık Sorulanlar