Herhangi bir görsel yükleyin ve eksiksiz bir favicon paketi alın: çok boyutlu bir favicon.ico, Android ve PWA için standart boyutlarda PNG simgeleri, iOS ana ekranları için bir apple-touch-icon ve bir site.webmanifest dosyası. Bir README, bunları HTML'nize tam olarak nasıl ekleyeceğinizi açıklar. Her şey, web sitenizin köküne bırakılmaya hazır bir ZIP dosyasında paketlenir. İşlem tarayıcınızda çalışır — logonuz cihazınızdan asla ayrılmaz.
Dosyaları buraya bırakın
veya yüklemek için göz atın
Dosya başına en fazla 10.0 MB
Logonuzu veya simgenizi yükleyin
En iyi sonuç için kare bir görsel (PNG önerilir) bırakın. Kare kaynak görseller en temiz favicon'ları üretir. Kare olmayan görseller her simge boyutuna sığacak şekilde yeniden boyutlandırılır.
Favicon paketini oluşturun
Tam simge setini oluşturmak için Dönüştür'e tıklayın: favicon.ico (16/32/48/64/128/256px), icon-32x32.png, apple-touch-icon.png (180×180), icon-192x192.png, icon-512x512.png ve site.webmanifest.
ZIP'i indirin
Tüm dosyalar bir ZIP arşivinde paketlenir. Çıkarın ve tüm dosyaları web sitenizin kök dizinine (index.html ile aynı düzeyde) yükleyin.
HTML etiketlerini ekleyin
Dahil edilen README.txt içindeki link etiketlerini <head> bölümünüze kopyalayın: favicon.ico bağlantısı, PNG simge bağlantısı, apple-touch-icon bağlantısı ve manifest bağlantısı.
İdeal olarak saydam arka planlı (PNG) 512×512 piksel veya daha büyük, kare olmalıdır. Kaynak, yüksek kaliteli Lanczos yeniden örneklemesi kullanılarak her gerekli boyuta küçültülür. Yüksek kontrastlı basit, cesur tasarımlar 16×16 ve 32×32'de en iyi çalışır — küçük metinler veya ince çizgiler okunamaz hale gelir. Logonuzda metin varsa, favicon kullanımı için basitleştirilmiş bir simge sürümü düşünün.
Her biri farklı bir bağlama hizmet eder: favicon.ico (tüm tarayıcılar ve cihazlar), icon-32x32.png (modern tarayıcılar PNG'yi tercih eder), apple-touch-icon.png (iOS/macOS ana ekranı, tam olarak 180×180 gerektirir), icon-192x192.png (Android'de Chrome'un sekme/görev değiştiricisi), icon-512x512.png (PWA açılış ekranı ve uygulama mağazası simgeleri). Hepsini kullanmak her yerde optimal görüntü sağlar.
Web uygulaması manifesti, tarayıcılara web sitesi uygulamanız hakkında bilgi verir: adı, simgeleri, renkleri ve görüntüleme modu. Progressive Web Apps (PWA'lar) için gereklidir ve kullanıcıların Android'de "Ana Ekrana Ekle" yapmasına olanak tanır. Tarayıcılar, Android Chrome, Samsung Internet ve diğer Chromium tabanlı mobil tarayıcılar için manifest simgelerini kullanır. HTML'nize <link rel="manifest" href="/site.webmanifest"> ile ekleyin.
Tarayıcılar favicon'ları agresif şekilde önbelleğe alır. Şunları deneyin: (1) Sayfayı sıkı yenileyin (Ctrl+Shift+R), (2) Tarayıcı önbelleğini temizleyin, (3) Bir gizli/özel pencere açın, (4) HTML'nizdeki favicon URL'sine bir önbellek kırıcı ekleyin: href="/favicon.ico?v=2". Çoğu tarayıcı favicon'ları sayfa önbelleğinden bağımsız önbelleğe alır.
Tarayıcıda SVG oluşturma, Web Worker'larda mevcut olmayan DOM erişimi gerektirdiğinden SVG girişi şu anda desteklenmiyor. SVG'nizi önce PNG'ye dönüştürün (Figma, Inkscape veya çevrimiçi bir SVG-PNG dönüştürücü kullanın), ardından favicon paketinizi PNG'den oluşturun. Web kullanımı için, modern tarayıcılarda bir SVG'yi doğrudan favicon olarak da kullanabilirsiniz: <link rel="icon" href="/icon.svg" type="image/svg+xml">.
Bir şey çalışmıyor mu? Hata bildir
