Favicon üretici

Logoyu bırakın, gerçek tüm boyutlarda görün ve favicon.ico, PNG seti ile HTMLi alın.

PNG / JPEG / WebP / GIF / SVG — veya birini bu karta bırakın

Bir görsel ekleyin (veya harflere geçin) ve tüm boyutlar burada belirir — "üret" düğmesi yoktur.favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

Nasıl kullanılır

  1. Bir görsel seçin veya karta sürükleyin: tüm boyutlar aynı anda belirir. Üret düğmesi yoktur — gördüğünüz şey indirilir.
  2. Henüz logo yok mu? "Harf / emoji" moduna geçin ve bir-iki karakter yazın. Renk seçici arka planı belirler; harf kontrasta göre siyah veya beyaz olur.
  3. Paketi indirin, site kök dizinine açın, kopyaladığınız <link> etiketlerini <head> içine yapıştırın, sonra sitenizi yeniden yükleyin — sekme simgesi yerinde olmalı.

Örnek

Kaynak

logo.png · 512×512, şekil "Yuvarlak"

Paket (9 dosya)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

Aynı kaynak ve aynı seçenekler bayt bayt aynı PNG'leri ve bayt bayt aynı bir ZIP üretir (arşiv zaman damgası 1980-01-01 olarak sabittir), böylece paket depoya alınabilir ve farkı görülebilir. Şekli değiştirmek yalnızca köşeleri kırpar; çizim asla yeniden çizilmez.

Kapsam, sınırlar ve sık sorulan sorular

  • SVG dışa aktarımı yok. 16 px'de okunabilir kalacak bir SVG elle sadeleştirilmiş yollar ister; bitmapi SVG içine sarmak veya sistem yazı tipiyle metin çizmek yalnızca vektör gibi görünür. İsterseniz kendi .svg dosyanızı bu PNG setinin yanında kullanın.
  • Görseller yalnızca ölçeklenir, asla kırpılmaz. Kare olmayan bir logo saydam kenar boşlukları korur — önce onu kırpın veya düzgün hale getirin (buradaki görsel yeniden boyutlandırma / dönüştürme araçları yardımcı olabilir).
  • Saydam simgeler platformdan bir arka plan alır: iOS apple-touch-icon arkasına bir arka plan çizer, bazı Android başlatıcıları da aynısını yapar. Kontrolünüzde bir arka plan için "Harf / emoji" kullanın veya arka planı kaynak görseline ekleyin.
  • site.webmanifest yalnızca simgeleri listeler — name veya short_name içermez. Bunlar site adınızdır ve bu araç onu bilemez; paketi açtıktan sonra iki anahtarı da ekleyin (name zorunlu değildir, tarayıcılar sayfa başlığına geri döner).
  • favicon.ico 16, 32 ve 48 px taşır; 64 veya 128 taşımaz. Bu, güncel tarayıcıları ve Windows'u kapsar; gerekirse PNG olarak daha fazla boyut ekleyin.
  • Hareketli GIF / WebP: yalnızca ilk kare kullanılır. Zaten faviconlar hareket etmez.
  • Harf simgeleri sistem yazı tipinizle çizilir, bu yüzden macOS, Windows, Linux ve telefonda farklı görünür. PNG cihazınızın gösterdiğini sabitler — yazı tipi seçicinin olmamasının nedeni de budur.
  • URL getirme ve canlı denetim yok: bu araç bir web adresi alamaz ve yayına alınmış bir faviconu doğrulayamaz. Yayınladıktan sonra sitenizi açıp sekme simgesine bakın.
  • Sınırlar: dosya başına 20 MB ve kenar başına 8000 px. 180 px'in altındaki kaynaklar büyük simgeler için büyütülür ve yumuşak görünebilir.
  • Kırpma yok, arka plan kaldırma yok, toplu işlem yok, geçmiş yok: yeniden yükleme boş durumdan başlar (hiçbir şey saklanmaz, URL'ye hiçbir şey yazılmaz).

Simgeler yerleştikten sonra genellikle sıradaki ihtiyaç.