Favicon Oluşturucu — ICO, PNG ve Apple Touch Icon
Tek bir görseli eksiksiz bir favicon setine dönüştürün: favicon.ico, PNG simgeler, apple-touch-icon ve web uygulaması bildirimi.
Apple-touch-icon her zaman opaktır. Uygulama adı boş olduğunda bildirim, görsel dosya adını kullanır.
Önizleme
ZIP içindeki dosyalar
Favicon nasıl yapılır
- PNG, JPG, WebP veya SVG biçiminde, ideal olarak en az 512'ye 512 piksel kare bir görsel seçin.
- Kare olmayan görsellerin nasıl sığacağını seçin: contain arka plan rengiyle doldurur, cover ortadan kırpar.
- Arka plan ve tema renklerini, iç boşluğu ve küçük simgelerin saydam arka planı koruyup korumayacağını ayarlayın.
- Web uygulaması bildiriminde yer alacak uygulama adını ve kısa adı yazın, sonra canlı önizlemeleri kontrol edin.
- Tüm dosyaları içeren ZIP'i indirin ya da favicon.ico ve apple-touch-icon.png dosyalarını ayrı ayrı alın ve HTML parçacığını kopyalayın.
Ne zaman işe yarar
- Bir görsel düzenleyici açmadan yeni bir web sitesine favicon vermek.
- Sekmelerde boş sayfa simgesi olarak görünen eksik veya bulanık favicon'u değiştirmek.
- Bir site iPhone ana ekranına kaydedildiğinde doğru görünsün diye apple-touch-icon eklemek.
- Aşamalı bir web uygulaması için Android simgeleri ve bildirim hazırlamak.
- Bir logoyu her boyutta eşit iç boşluğa sahip düzenli bir simge setine çevirmek.
Sık sorulan sorular
Oluşturucu hangi boyutları üretiyor?
İçinde 16, 32 ve 48 piksellik görseller bulunan favicon.ico, ayrı favicon-16x16.png ve favicon-32x32.png dosyaları, 180'e 180 boyutunda bir apple-touch-icon.png ve 192 ile 512 piksellik Android simgeleri yazar.
Apple-touch-icon neden her zaman opak?
iOS ana ekran simgesinde saydamlık göstermez, bu yüzden saydam bir PNG'nin arkasında siyah veya beyaz bir blok çıkardı. Oluşturucu o dosyayı arka plan renginizle doldurur ve isterseniz küçük favicon boyutlarını saydam bırakır.
Bildirime ne koymalıyım?
Tam site veya uygulama adını ve yaklaşık on iki karakterlik bir kısa ad kullanın, çünkü telefonda simgenin altında görünen kısa addır. Tema rengi tarayıcı çubuğunu renklendirir, arka plan rengi ise açılış ekranını doldurur.
SVG logo kullanabilir miyim?
Evet. SVG 512 piksel genişlikte rasterleştirilir ve en-boy oranı genişlik ile yükseklik özniteliklerinden ya da viewBox'tan alınır, bu yüzden kare bir logo kare kalır.
Dosyalar sunucumda nereye gitmeli?
Onları index.html'in yanındaki site köküne koyun, böylece parçacıktaki /favicon.ico ve /site.webmanifest gibi yollar çözümlenir. Bir alt klasörde tutuyorsanız, parçacıktaki href değerlerini buna göre düzenleyin.
Görselim bir yere yükleniyor mu?
Hayır. Görsel tarayıcınızın içindeki bir canvas üzerinde çözülür ve çizilir, ZIP bellekte oluşturulur, bu yüzden sunucuya hiçbir şey gönderilmez.