Favicon oluşturma
Bir logoyu web siten için eksiksiz bir favicon paketine çevir.
Tarayıcında çalışır. Dosyaların cihazından asla çıkmaz.
- ICO artı her PNG boyutu
- Hazır HTML kodu
- Ayarlanabilir iç boşluk
Bir favicon nasıl oluşturulur
- Buraya kare bir logo veya resim bırak.
- Gerekirse iç boşluğu ve arka planı ayarla.
- ZIP'i indir ve HTML kodunu yapıştır.
ZIP'in içindekiler
| Dosya | Boyut | Kullanan |
|---|---|---|
| favicon.ico | Tek dosyada 16, 32 ve 48 px | Eski tarayıcılar, yer imleri |
| favicon-16x16.png | 16 x 16 | Tarayıcı sekmeleri |
| favicon-32x32.png | 32 x 32 | Tarayıcı sekmeleri, görev çubukları |
| apple-touch-icon.png | 180 x 180 | iPhone ve iPad ana ekranı |
| android-chrome-192x192.png | 192 x 192 | Android ana ekranı |
| android-chrome-512x512.png | 512 x 512 | Android açılış ekranı ve uygulama simgesi |
| site.webmanifest | Metin dosyası | Android'e hangi simgeyi kullanacağını söyler |
Dosyalar nereye gidiyor
ZIP'teki her dosyayı web sitenin kök klasörüne yükle, index.html ile aynı klasöre, bir alt klasöre değil. Sonra verilen HTML kodunu her sayfanın head kısmına, ya da varsa sitenin ortak başlık şablonuna yapıştır.
İç boşluk ve arka plan ipuçları
- Karesinin kenarlarına değen logolar için %10-15 iç boşluk ekle, böylece 16 piksel boyutunda kırpılmış görünmezler.
- Logonun şeffaflığı varsa ve tarayıcının kendi sekme renginin üzerinde tuhaf duruyorsa arka plan doldurmayı aç.
- Basit, yüksek kontrastlı bir logo, ince ayrıntısı veya ince yazısı olan bir logodan 16x16'da daha iyi okunur.
Favicon oluşturucu SSS
ZIP'in içinde ne var?
16, 32 ve 48 piksel boyutlu favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, iki android-chrome PNG'si ve bir site.webmanifest dosyası.
Bu dosyalar nereye gider?
Web sitenin kök klasörüne yükle, sonra HTML kodunu her sayfanın head kısmına yapıştır.
Resmim zaten kare olmalı mı?
Kare bir logo en temiz sonucu verir. Kare olmayan resimler, hiçbir şey esnetilmesin diye iç boşlukla bir karenin içine sığdırılır.
İç boşluk ne işe yarar?
Karenin içinde logonun etrafına boş alan ekler, bu da küçük simge boyutlarında tasarımın kenarlara değmesini önler.
Resmim yükleniyor mu?
Hayır. Her simge boyutu tarayıcında oluşturulur, bu yüzden resim cihazından hiç çıkmaz.
Altı dosyanın hepsine mi ihtiyacım var, yoksa sadece favicon.ico'ya mı?
Güncel tarayıcılar çoğunlukla PNG dosyalarını ve site.webmanifest'i kullanır. favicon.ico, eski tarayıcılar ve bazı yer imi çubukları için tutulur, bu yüzden en geniş destek için hepsini yükle.
Hangi resim boyutuyla başlamalıyım?
En az 512 x 512 piksel. Ana simge o boyutta oluşturulur, bu yüzden daha küçük bir kaynak resim büyütülerek sığdırılır ve yumuşak görünebilir.
Manifest dosyasının düzenlenmesi gerekir mi?
Oluşturulan site.webmanifest, site adı için yer tutucu metin kullanır. Ardından bunu bir metin editöründe açıp name ve short_name alanlarını sitene göre güncelle.