Favicon oluşturucu: tek 512 piksellik tuval, on iki dosya
Site yayında, logo onaylandı ama tarayıcı sekmesinde hâlâ gri bir küre duruyor. Aşağıdaki favicon oluşturucu, yüklediğiniz bir görseli, tek bir emojiyi ya da en fazla üç harfi alıp 512×512 piksellik bir tuvale çizer. Tüm çıktı boyutları bu tuvalden ölçeklenir. Canlı önizleme simgeyi bir tarayıcı sekmesi olarak, bir Google sonucu olarak ve telefonun ana ekranında gösterir.
Bilgisayarınızda ne kalır
Görsel bir FileReader ile okunur ve tarayıcınızda bir tuvale çizilir. Dosya yüklemek ya da indirme düğmesine basmak hiçbir istek göndermez; geliştirici araçlarınızın ağ paneli bunu gösterir. Dosyalar normal tarayıcı indirmeleri olarak gelir. Kod parçası ancak Kodu kopyala düğmesine bastığınızda panoya geçer.
Beş ayar, sonra indirme
- Bir kaynak sekmesi seçin: Görsel / SVG yükle, Emoji favicon veya Metin / monogram. Bir PNG, SVG, JPG ya da WebP dosyası bırakın, bir ile üç arası harf yazın veya bir emoji seçin. Emoji için 14 hızlı düğme var.
- Bir arka plan seçin: Saydam, Düz renk veya Modern gradyan. Gradyanın iki rengi ve 0° ile 360° arasında bir açısı vardır.
- İç boşluğu (%0–40, varsayılan %15) ve köşe yarıçapını (%0–50, varsayılan %22, iOS squircle görünümü) ayarlayın.
- Sitenin adını yazın. Manifestte
nameolur, ilk 12 karakteri iseshort_nameolur. - Tam paketi indir (.ZIP) düğmesine basın. Tuvalin altındaki boyut kartlarından tek tek dosya da alabilirsiniz.
On iki dosya ve ZIP içindeki ekstralar
Pakette şu görsel dosyaları bulunur:
favicon.icove 16, 32, 48 ile 96 pikselde dört PNG- 180, 152 ve 120 pikselde üç Apple Touch Icon.
- 192 ve 512 pikselde Android simgeleri ve 512 pikselde bir maskable simge.
- 150 piksellik bir Windows karosu.
ZIP, site.webmanifest, browserconfig.xml ve bir README.txt ekler. Kodu kopyala düğmesi, sayfanızın head bölümü için uygun <link> ve <meta> etiketlerini verir.
Sonucun sizi şaşırtabileceği yerler
.ico dosyası üç PNG katmanı içerir: 16, 32 ve 48 piksel. 64 ya da 256 piksellik bir katman yoktur. Emojiler işletim sisteminizin emoji yazı tipini kullanır; bu yüzden aynı emoji macOS, Windows ve Android'de farklı görünür. Monogramlar sistem yazı tiplerini kullanır; Impact veya el yazısı bir yazı tipi bilgisayarınızda başka bir yazı tipiyle değiştirilebilir.
Köşe yarıçapı ve iç boşluk, maskable simge dahil her dosyaya uygulanır. Kenardan kenara bir maskable simge için yarıçapı 0 yapın ve çizimi noktalı dairenin içinde tutun. HTML parçası .ico dosyasına, 16 ve 32 piksellik PNG'lere, 180 piksellik Apple simgesine, manifeste ve Windows yapılandırmasına bağlanır. 48, 96, 152 ve 120 piksellik dosyalar ZIP içinde yer alır ama bağlanmaz. Küçük bir raster görsel büyütülür, bu yüzden 512×512 piksel veya daha büyük bir görselle başlayın. Arka plan düz renk değilse manifestteki tema rengi #2563eb olur.