Tarayıcıdan çıkmadan çok boyutlu ICO favicon oluşturun

Favicon ICO'da ne olmalı

Klasik favicon.ico dosyaları Retina sekmeler, yer imleri ve masaüstü kısayollarında net görünmesi için birden fazla çözünürlük içerir. Sadece bulanık 16×16 gönderip büyütmek eski moda görünür.

WebP.Best, Favicon (16/32/48), Standard (+64) ve Full (256'ya kadar) paketleri sunar; her boyutu elle tasarlamadan yaygın tarayıcı ve Windows ihtiyaçlarını karşılayabilirsiniz.

• Tarayıcı sekmeleri → Favicon paketindeki küçük boyutlar
• Kısayollar / bazı OS yüzeyleri → Standard veya Full
• Kaynak görsel → mümkünse net kare logo veya işaret

Kaynak görseli hazırlayın

Kare veya neredeyse kare, temiz kenarlı bir master ile başlayın. Şeffaf PNG veya WebP iyi çalışır. Yoğun fotoğraflar 16 px ikonlarda zayıf kalır — önce sadeleştirin veya işarete kırpın.

Logonuz sadece geniş bir wordmark ise kareye zorlandığında kenar boşlukları veya kırpma bekleyin. Dönüştürmeden önce ikonun sembol mü monogram mı olacağına karar verin.

WebP.Best'te adımlar

Ana sayfadaki dönüştürücüyü açın ve logo dosyanızı ekleyin (şeffaf PNG veya WebP en iyisi). Çıktı formatı: ICO.

Boyut paketi seçin: Favicon (16/32/48 px) sekmeler için; Standard kısayollar için 64 px ekler; Full Windows ikonları için 256 px'e kadar gider. Her boyutu ayrı dışa aktarmanıza gerek yok — paket tek .ico'da birleştirir.

Kareyi nasıl dolduracağınızı seçin: Fit inside kaynak kare değilse tüm logoyu kenar boşluklarıyla gösterir; Fill and crop büyütüp kareyi doldurur, kenarları kesebilir — küçük metinden çok basit sembollere uygundur.

Dönüştürün, .ico'yu indirin ve en küçük boyutu bir sekmede kontrol edin. Her şey cihazınızda yerel çalışır.

Fit inside vs fill and crop: hangisi

İkonu kare bir çerçeve gibi düşünün. Fit inside logoyu küçülterek tamamen sığdırır — hiçbir şey kesilmez, ancak geniş veya uzun logolarda boş bantlar kalabilir.

Fill and crop çerçeveyi tamamen kaplayana kadar büyütür, taşan kısmı keser. Basit daire veya harf için iyidir; 16 px'te harf kaybeden uzun wordmark'ler için risklidir.

ICO öncesi katı kare master mı lazım? Gelişmiş seçenekleri açın, Tam genişlik × yükseklik (ör. 512×512) seçin, Fill and crop veya Fit inside ile bir kez PNG'ye dönüştürün, sonra o kareyle ICO çalıştırın. Varsayılan paketler yeterliyse bu adımı atlayın.

• Sadece geniş wordmark → Fit inside veya önce kare sembol tasarlayın
• Yuvarlak uygulama tarzı ikon → Fill and crop genelde daha temiz
• Emin değilseniz → önce Fit inside; kenar boşlukları rahatsız ederse Fill and crop

ICO'yu sitede kullanma

favicon.ico'yu site köküne koyun veya HTML head'de uygun type ile bağlayın. Birçok statik host PNG favicon da kabul eder; ICO eski yer imleri ve bazı masaüstü bağlamları için hâlâ faydalıdır.

Yayınladıktan sonra sert yenileme veya gizli pencere kullanın: tarayıcılar favicon'ları agresif önbelleğe alır. Yükleme sonrası «yanlış ikon» çoğu zaman önbellektir, bozuk ICO değil.

Bunun yapmadıkları

Bu yol statik ikonlar içindir. Marka tasarımı yapmaz, arka planı otomatik silmez veya SVG üretmez. Çok ince çizgiler 16 px'te kaybolabilir — en küçük boyutu test edin.

Paketleme yerelde önceden tanımlı boyutlarla çalışır. Telefonda «Ana ekrana ekle» ikonu da gerekiyorsa ayrı PNG dosyaları gerekebilir — tek ICO her zaman yetmez.