SVG Favicon Oluşturucu - Asıl Simge SVG'nin Kendisi
Favicon oluşturucuların çoğu size bir klasör dolusu PNG ve yıllar önce üretimden kalkmış iOS sürümleri için bir düzine link etiketi verir - ve güncel bir sitede en çok işe yarayan tek dosyayı sessizce dışarıda bırakır. Sonuç, hem şişkin hem de eksik bir pakettir. Elinizdeki en iyi favicon SVG'nizdir: tek bir vektör dosyası bugün var olan ve olacak her ekran yoğunluğunu karşılar ve insanların onun yerine koyduğu 32 piksellik PNG'den genellikle daha küçüktür. Bu yüzden bu paket onu favicon.svg olarak verir ve işaretlemede ilk sırada ona yönelir, altında yedek olarak ICO ile. PNG'ler de onlara ihtiyaç duyan yerler için hâlâ orada; her biri tek bir büyük çizimden küçültülmek yerine vektörünüzden kendi boyutunda çizilmiş. Her şey tarayıcınızda üretilir ve hiçbir şey yüklenmez.
Bu araç nasıl kullanılır
SVG dosyanızı bırakın
Logonuzu ya da işaretinizi yukarıdaki kutuya sürükleyin, 5 MB'a kadar. En iyi sonucu kare çizimler verir - başka oranlar kare bir çerçeveye oturtulur ve boş kalan alan saydam kalır.
Küçük boyutları denetleyin
Önizleme; 16, 32 ve 48 pikseli gerçek boyutunda, paketin kullandığı aynı yoldan vektörünüzden çizerek gösterir. İşaret burada 16 pikselde okunmuyorsa, ziyaretçilerinizin sekmesinde göreceği şey de tam olarak budur.
Sitenize ad verin
Yazdığınız her şey site.webmanifest dosyasına ad ve kısa ad olarak girer; Android ve masaüstü Chrome, biri sitenizi ana ekranına kurduğunda bunu gösterir. Boş bırakırsanız manifest, sonradan düzenleyebileceğiniz yansız bir yer tutucuyla gelir.
Paketi oluşturun ve indirin
Favicon paketini oluştur düğmesine basın. Çiziminiz 16, 32, 48, 180, 192 ve 512 pikselde çizilir, bunlardan üçü favicon.ico içine girer ve her şey bir manifest ve bir README ile birlikte sıkıştırılır.
Dört etiketi kopyalayın
Her şeyi sitenizin kök dizinine açın, ardından indirme düğmesinin yanında gösterilen dört link etiketini <head> içine kopyalayın. Kurulumun tamamı bu kadar - derleme adımı ya da ek yapılandırma yok.
Sıkça Sorulan Sorular
ZIP dosyasının içinde tam olarak ne var?
Yedi dosya: özgün çiziminiz olan favicon.svg, ayrıca 16, 32 ve 48 piksellik sürümleri içeren favicon.ico, 180 boyutunda apple-touch-icon.png, Android ve kurulabilir uygulamalar için icon-192.png ile icon-512.png, site.webmanifest ve etiketleri yineleyen bir README. Kod parçacığının gönderme yaptığı her dosya arşivde var.
SVG neden ICO'dan önce listeleniyor?
Çünkü daha iyi bir simgedir ve tarayıcılar anladıkları son biçimi seçer. Tek bir vektör dosyası var olan ve olacak her ekran yoğunluğunda keskin kalır, boyut çeşitlemesi gerektirmez ve çoğu zaman 32 piksellik bir PNG'den küçüktür. Onu kullanamayan tarayıcılar bir alt satırdaki ICO'ya düşer.
Gerçekten yalnızca dört etiket mi yetiyor?
Evet, bugün kurulan her sitede. Oluşturucuların hâlâ ürettiği o uzun apple-touch-icon-precomposed çeşitleme listeleri iOS 6 ve öncesini hedefler. Güncel iOS tek bir apple-touch-icon okur, Android manifest'i okur ve geri kalan her şey simge bağlantılarını okur. Dört etiket hepsini karşılar.
Favicon'ım koyu kiple birlikte değişebilir mi?
Yalnızca SVG değişebilir; onun başa konmasının bir nedeni de budur. SVG'nin kendi içine bir ortam sorgusu koyun - bir dolgu üzerinde prefers-color-scheme kuralı - tarayıcı bunu sekmede anında uygular. ICO ve PNG'ler sabit görsellerdir ve hangi renklerle çizildilerse onları korur.
Küçük boyutlar neden ayrı ayrı çiziliyor?
Çünkü tek bir büyük çizimi küçültmek, tam da küçük simgelerin dayandığı ayrıntıyı atar. 16 × 16'da bir pixel-art işaret üzerinde ölçüldü: vektörden çizildiğinde 141 dolu piksel ve hiç yarı saydam piksel verdi; aynı çizim 512'den küçültüldüğünde 98 dolu ve 64 bulanık piksel verdi. Bu, mürekkebin %40'ının bulanıklığa dönüşmesi demek.
Dosyalar sunucumda nereye gidiyor?
Hepsi index.html ile birlikte sitenin kök dizinine, böylece /favicon.svg, /favicon.ico ve benzeri adreslerden çözümlenirler. Kod parçacığındaki yolların eğik çizgiyle başlamasının nedeni tam olarak budur. Çatınız durağan dosyaları bir public ya da static dizininden sunuyorsa onları oraya koyun, adresler yine aynı kalır.
Yenisini yükledim ama favicon'ım değişmedi.
Tarayıcılar favicon'ları neredeyse her şeyden daha ısrarlı önbelleğe alır ve çoğu zaman sıradan bir yenilemeyi göz ardı eder. Simgenin adresini doğrudan açıp yeniden yükleyin ya da denetlemek için gizli bir pencere kullanın. Bu neredeyse her zaman bozuk bir dosya değil önbelleklemedir; başka bir şeyi değiştirmeden önce adresin yüklendiğini doğrulayın.
Kaynak SVG'm hangi boyutta olmalı?
Her şey geometriden yeniden çizildiği için viewBox boyutunun pek önemi yoktur - ama kare oranların vardır. İşareti önce 16 pikselde okunacak biçimde tasarlayın ve oradan yukarı ölçekleyin. Bir kartvizitte iyi duran bir logo, bir tarayıcı sekmesinde ayakta kalamayacak kadar ayrıntılıdır.
ICO'ya hâlâ ihtiyacım var mı?
Onu saklayın. Birkaç kilobayttır ve kimsenin sınamadığı yerleri karşılar: Windows masaüstü kısayolları, RSS ve podcast okuyucuları, eski sohbet istemcilerindeki bağlantı önizlemeleri ve masaüstü uygulamaları içindeki gömülü tarayıcılar. Bunların çoğu alışkanlık gereği hâlâ /favicon.ico ister ve işaretlemenizin bildirdiği şeyi yok sayar.
Paketi oluşturmak için bir şey yükleniyor mu?
Hayır. Bütün çizimler, ICO paketleme ve ZIP tarayıcınızda üretilir. Logonuz hiçbir sunucuya ulaşmaz; bu aynı zamanda paketin bir sıranın ardından değil tıkladığınız anda hazır olduğu ve çiziminizin hiçbir yerde bir kopyasının kalmadığı anlamına gelir.
Şunlara da ihtiyacınız olabilir
Bir şey çalışmıyor mu? Hata bildir