Hayır. SVG kabul edilen bir kaynak biçimidir, ancak paket raster PNG dosyaları ve bir ICO içerir. Vektörel veya animasyonlu favicon oluşturmaz.
Favicon Oluşturucu
Tek bir resimden, birden fazla boyut içeren bir ICO, beş PNG simgesi ve bir web manifestinden oluşan bir ZIP paketi oluşturun. Dosyaları web sitenize bağlamak için aşağıdaki kurulum örneğini kullanın.
Bunlara da ihtiyacınız olabilir:Uygulama simgesi oluşturucu·PNG'den ICO'ya·Görsel boyutlandırıcı·Görsel sıkıştır
Favicon paketindeki dosyalar
İndirilen favicon-package.zip dosyası yedi dosya içerir. HTML, ZIP içinde bir dosya olarak değil, bu makalede bir kurulum örneği olarak sunulur.
| Dosya | Boyut veya içerik | Amaç |
|---|---|---|
| favicon.ico | Tek dosyada 16×16, 32×32 ve 48×48 | Birden fazla boyut içeren web sitesi simgesi. |
| favicon-16x16.png | 16×16 | Küçük tarayıcı simgesi. |
| favicon-32x32.png | 32×32 | Daha büyük tarayıcı simgesi. |
| apple-touch-icon.png | 180×180 | Apple ana ekran simgesi olarak başvurulan dosya. |
| android-chrome-192x192.png | 192×192 | Web manifestinde başvurulan simge. |
| android-chrome-512x512.png | 512×512 | Web manifestinde başvurulan daha büyük simge. |
| manifest.json | Site adı, renkler ve iki simge başvurusu | Kendi siteniz için gözden geçirmeniz gereken başlangıç manifesti. |
Girdi biçimleri: PNG, JPG/JPEG, WebP, GIF veya SVG. Çıktılar statik ICO ve PNG resimleridir; SVG yüklemek bir SVG favicon oluşturmaz.
Favicon dosyalarınızı oluşturun ve sitenize ekleyin
1
Kolay tanınan bir kaynak seçin
Sade bir resim yükleyin. En büyük PNG çıktısı için en az 512×512 piksel boyutunda kare bir kaynak kullanışlıdır; daha büyük bir resim kullanmak anlaşılması zor bir tasarımı düzeltmez.
2
ZIP dosyasını oluşturun ve indirin
Favicon paketi oluştur seçeneğini kullanın ve tamamlanan ZIP dosyasını indirin. Dosyaları sitenize eklemeden önce ZIP dosyasını açın.
3
Manifesti gözden geçirin ve dosyaları yayımlayın
manifest.json içindeki varsayılan site adını ve renkleri gerektiği gibi düzenleyin. Dosyaları sitenizde herkese açık URL'lere yerleştirin; alt klasör kullanıyorsanız yolları güncelleyin.
4
HTML başvurularını ekleyin ve doğrulayın
Aşağıdaki örneği sayfanızın head bölümünde kullanın. Simge ve manifest URL'lerinin yüklendiğini doğrulayın, ardından simgeyi tarayıcıda kontrol edin.
Simgeleri web sitenize ekleyin
Bu örnekte dosyaların web sitesinin kök dizininden sunulduğu varsayılır. Bu başvuruları sayfanın head bölümüne ekleyin ve yolları yayımlama düzeninize göre ayarlayın.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Dosyaları yayımlamadan önce şu ayrıntıları kontrol edin:
| Kontrol | Yapılması gereken |
|---|---|
| Herkese açık dosya yolları | Baştaki eğik çizgi web sitesinin kök dizinini belirtir. Alt klasör kullanıyorsanız hem HTML içindeki href değerlerini hem de manifest.json içindeki simgelerin src değerlerini güncelleyin. |
| Manifest varsayılanları | Oluşturulan name ve short_name değerleri My Website; theme_color ve background_color değerleri ise #ffffff şeklindedir. İndirdikten sonra bunları gözden geçirin. Bu değerler simge resimlerinin renklerini değiştirmez. |
| Mevcut site yapılandırması | Temanızın veya kullandığınız framework'ün eklediği başka simge bildirimleri olup olmadığını kontrol edin. Yeni kurulumun yanında eski favicon başvurularını bırakmayın. |
Simgeler içeren bir manifest, tek başına eksiksiz bir yüklenebilir veya çevrimdışı web uygulaması değildir. Bu oluşturucu bir service worker sağlamaz ve her cihazda yüklenebileceğini garanti etmez.
Simgenin küçük boyutlarda okunaklı olmasını sağlayın
🔎
16×16 sonucunu inceleyin
Küçük yazılar ve ince çizgiler kaybolabilir. Sade bir işaret, belirgin kontrast ve konunun çevresinde yeterli boşluk tercih edin.
↔
Şekli ve kenar boşluğunu kontrol edin
Kare olmayan kaynaklar, saydam kenar boşluğu eklenerek kare tuvallere sığdırılır. Küçük kaynaklar büyütülebilir. Hassas bir kadraj istiyorsanız önceden hazırlanmış kare bir resim kullanın.
İşinize uygun çıktı paketini seçin
Bu sayfa, mevcut bir resimden web sitesi favicon dosyaları oluşturur; logo çizim aracı değildir.
Yalnızca bir ICO dosyasına mı ihtiyacınız var?
Web sitesi paketi olmadan PNG'den ICO'ya dönüştürme için PNG'den ICO'ya aracını kullanın.
Yerel bir mobil uygulama mı geliştiriyorsunuz?
Yerel iOS/Android resim kaynakları için Uygulama Simgesi Oluşturucu aracını kullanın. Bu dosyaların kullanım amacı web sitesi favicon dosyalarından farklıdır.
Resimler sunucuda işlenmek üzere yüklenir. Hazır olduğunda ZIP dosyasını indirin; geçici dosyalar hizmetin temizleme sürecine tabidir.
Favicon kurulumu hakkında sorular
Önce yayımlanan dosya URL'lerini ve sayfanın simge bildirimlerini doğrulayın. Tarayıcılar favicon dosyalarını önbelleğe alabilir; sitenin yeni dosyalara başvurduğunu doğruladıktan sonra yeni bir tarayıcı oturumunda test edin.
Mevcut formda yalnızca resim seçilir. İndirdiğiniz manifestteki name, short_name, theme_color ve background_color alanlarını sitenize göre düzenleyin ve HTML içindeki theme-color değerleriyle tutarlı olmalarını sağlayın.
Hayır. Simge dosyaları ve bir başlangıç manifesti sağlar. Yüklenebilirlik ve çevrimdışı çalışma için ek site yapılandırması gerekir; paket bu özellikleri otomatik olarak eklemez.