Favicon Oluşturucu
Tarayıcı sekmelerinde ve telefon ana ekranlarında görünen küçük simgeyi birkaç harften ya da logondan oluştur. Tüm boyutları, bir favicon.ico dosyasını ve yapıştıracağın HTML kodunu alırsın.
ÖNİZLEME
HTML
<link rel="icon" href="/favicon.ico" sizes="48x48"> <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="/site.webmanifest">
Bu satırları sayfalarının <head> bölümüne yapıştır.
Tamamen tarayıcında çalışır. Girdiğin hiçbir şey sunucuya gönderilmez.
Favicon nasıl oluşturulur?
Harf ya da görsel seç
Bir ila üç harf ya da bir emoji yaz veya logonu aç.
Görünümü ayarla
Şekli ve renkleri seç; görsel kullanıyorsan arka planı ve kenar boşluğunu ayarla.
İndir ve siteye ekle
ZIP'i indir, dosyaları sitenin kök klasörüne yükle ve HTML kodunu sayfanın head bölümüne yapıştır.
Pakette neler var?
Tarayıcılar için 16, 32 ve 48 piksellik sürümleri içeren favicon.ico, 16 ve 32 piksellik PNG simgeler, iPhone ve iPad ana ekranları için 180 piksellik Apple touch icon, Android için 192 ve 512 piksellik simgeler ve bunları listeleyen bir site.webmanifest dosyası.
16 piksel için tasarlamak
Favicon, tarayıcı sekmesinde çok küçük görünür. Bir ya da iki kalın harf veya basit bir sembol tanınır kalır; ayrıntılı logolar ise birbirine karışıp seçilemez hale gelir. İndirmeden önce 16 piksellik önizlemeyi kontrol et.
Sık sorulan sorular
Dosyaları nereye koymalıyım?
Web sitenin kök klasörüne; böylece /favicon.ico ve HTML'deki diğer adresler gerçekten bulunur. Ardından HTML satırlarını <head> içine ekle.
Eski favicon'um neden hâlâ görünüyor?
Tarayıcılar favicon'ları uzun süre önbellekte tutar. Kontrol etmek için önbelleği temizleyerek yeniden yükle ya da siteyi gizli pencerede aç.
Logom yükleniyor mu?
Hayır. Tüm simgeler tarayıcında çizilir.