Favicon Üretici

Tek görsel yükleyin, tüm favicon boyutlarını indirin — 16-512 px PNG'ler ve HTML link etiketleri. Tamamen tarayıcınızda çalışır.

1.144 görüntülenme

2026'da Gereken Boyutlar

Her cihaz ve bağlam farklı bir favicon boyutu bekler, çünkü favicon tek bir dosya değil, bir dosya ailesidir. Tarayıcı sekmeleri minik 16×16 ve 32×32 piksellik PNG'ler kullanır. iOS'un "Ana Ekrana Ekle" özelliği 180×180 piksellik apple-touch-icon kullanır. Android ve kurulu PWA'lar, ana ekran ve açılış ekranı görselleri için web uygulama manifestinden 192×192 ve 512×512 piksellik ikonlar çeker. Tek bir kaynak görsel bunların hepsine doğrudan hizmet edemez — 512 piksellik bir logoyu doğrudan 16 piksele sıkıştırmak neredeyse tüm detayını kaybettirir, 16 piksellik bir ikonu 512 piksele büyütmek ise bulanık ve bloklu görünür. Doğru yaklaşım, tek bir yüksek çözünürlüklü kaynağı her hedef boyuta ayrı ayrı, birini diğerinden ölçeklemek yerine her boyutta pikselleri yeniden çizerek küçültmektir.

Bu araç tam olarak bunu yapar: kaynak görselinizi tarayıcınızda bir HTML canvas öğesine yükler ve altı standart boyuta — 16, 32, 48, 180, 192 ve 512 piksel — her birini özgün görselden doğrudan çizerek küçültür, ardından eşleşen PNG dosyalarını ve sitenizin <head> bölümüne yapıştıracağınız <link> etiketlerini verir. Hiçbir şey yüklenmez; küçültme işlemi kendi cihazınızda Canvas API ile gerçekleşir.

En Küçük Boyuta Göre Tasarlamak

16 pikselde bu kadar çok detay kaybolduğu için favicon tasarımı en büyük boyuttan değil, en küçük boyuttan geriye doğru düşünülmelidir. Tam yazıyı değil, logo işaretini kırpın — yazı yaklaşık 24 pikselin altında okunmaz bir lekeye dönüşür. Tarayıcılar açık/koyu tema arasında geçiş yaptığı için her iki sekme çubuğuna karşı da güçlü kontrast koruyun. En küçük boyutlarda birkaç yarı saydam kenar pikseli gürültü gibi görünebileceğinden, düz bir arka plan rengi genelde saydamlıktan daha iyi okunur. Birçok marka, tam logosu 16 px testini geçemediği için özellikle sadeleştirilmiş bir "uygulama ikonu" sürümü — tek bir harf, baş harf veya sembol — bulundurur.

Kurulabilir siteler için 192 ve 512 piksellik ikonları birbirine bağlayan manifest dosyasını da bilmekte fayda var: web uygulama manifesti (manifest.json), Android ve masaüstü PWA kurucularının ana ekran ve uygulama değiştirici için hangi ikonu getireceğini anlaması için bu iki boyutu URL üzerinden referans gösterir. Manifest ikonlarını atlayan siteler yine de tam olarak çalışır — tarayıcı sekmesi ve iOS ana ekran ikonları bağımsız çalışır — ama kurulum istemi genel bir ikona geri dönebilir veya kurulumu hiç teklif etmeyebilir.

Sıkça Sorulan Sorular

Hâlâ .ico dosyasına ihtiyacım var mı?

Nadiren. Tüm modern tarayıcılar, bir link etiketindeki sizes özniteliğiyle bildirilen PNG favicon dosyalarını kabul eder. Kökte /favicon.ico bulundurmak yalnızca çok eski istemcilere ve o sabit kodlanmış eski yolu doğrudan isteyen araçlara yardımcı olur.

Nasıl bir görsel yüklemeliyim?

Kare, tercihen 512 px veya üstü, işareti ortalanmış ve çevresinde yeterli boşluk bırakılmış bir PNG (veya SVG çıktısı bir raster). Kare olmayan görseller, hiçbir şey gerilmesin diye küçültülmeden önce ortadan kare olarak kırpılır.

İkonum neden 16 pikselde bulanık görünüyor?

On altı piksel fiziksel olarak ince detay taşıyamaz — ince çizgiler, geçişler ve küçük yazılar bulanıklaşarak erir. Kaynak işareti sadeleştirin, kontrastı artırın veya tam logonuz en küçük sekme ikonunda hayatta kalmıyorsa özel bir küçük-boyut sürümü tasarlayın. Önizlemeyi gerçek boyutunda görmeden bu sorunu fark etmek zordur, bu yüzden araç her boyutu ayrı ayrı gösterir.

192 px ile 512 px ikonlar arasındaki fark ne?

İkisi de Android ve PWA manifestlerini besler: 192 px normal yoğunluktaki ana ekran ikonu için kullanılırken, 512 px yüksek yoğunluklu ekranlar ve bir PWA yüklenirken gösterilen açılış ekranı için kullanılır — Android bağlama göre uygun olanı seçer.

Her boyutu mu eklemeliyim, yoksa birkaçı yeterli mi?

Modern bir site için 32 px artı 180 piksellik apple-touch-icon ziyaretçilerin büyük çoğunluğunu kapsar. 192/512 px manifest ikonlarını yalnızca site PWA olarak kurulabiliyorsa ekleyin; 16 ve 48 px boyutları daha çok eski bağlamlara yardımcı olur. Emin değilseniz altısını da eklemek zarar vermez — tarayıcı hangi boyuta ihtiyacı olduğunu kendisi seçer, siz yalnızca doğru dosyaları sunmuş olursunuz.

Yorumlar

Henüz yorum yok — ilk yorumu siz yazın!

Benzer Araçlar