Rehber
Favicon boyutu: hangi boyut ve biçimler gerekir
Favicon, tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında görünen küçük site simgesidir. 16 piksellik bir sekmeden 512 piksellik bir uygulama simgesine kadar pek çok boyutta gösterilir. Bu rehber önemli boyutları ve nasıl ekleneceklerini listeler.
Web sitesi için favicon boyutu: kısa liste
| Boyut | Dosya | Kullanıldığı yer |
|---|---|---|
| 16 × 16 px | favicon.ico | Tarayıcı sekmeleri ve yer imleri |
| 32 × 32 px | favicon.ico | Yüksek yoğunluklu ekranlarda sekmeler, Windows kısayolları |
| 48 × 48 px | favicon.ico | Windows ve Google arama sonuçları |
| 180 × 180 px | apple-touch-icon.png | iPhone ve iPad ana ekranı |
| 192 × 192 px | icon-192.png | Android ve yüklenen web uygulamaları |
| 512 × 512 px | icon-512.png | Web uygulamaları için açılış ekranları ve uygulama mağazaları |
16, 32 ve 48 px'i barındıran tek bir favicon.ico ile üç PNG dosyası tarayıcıları, telefonları ve arama motorlarını karşılar. Favicon oluşturucumuz hepsini tek bir görselden hazırlar.
Google Arama için piksel cinsinden favicon boyutu
Google, arama sonuçlarının yanında favicon gösterir. Yönergeleri en az 8 × 8 piksellik kare bir favicon ister ve farklı yüzeylerde iyi görünmesi için 48 × 48 pikselden büyük bir favicon önerir (Google Search Central). 48 px görsel içeren bir favicon.ico ya da bağlantıyla eklenen 192 px'lik bir PNG bu öneriyi karşılar.
Favicon boyutuna göre biçimler: ICO, PNG ve SVG
- ICO tek dosyada birkaç boyut barındırır ve hiçbir simge tanımlanmadığında tarayıcıların
/favicon.icoadresinden istediği biçimdir. Uyumluluk için bir tane bulundurun. - PNG, Apple touch icon ve web manifest'te listelenen uygulama simgeleri için kullanılır.
- SVG modern tarayıcılarda favicon olarak çalışır ve her boyutta keskin kalır. Tek simge olarak değil, ek bir simge olarak ekleyin.
Mevcut bir PNG'yi seçtiğiniz boyutlarla .ico dosyasına çevirmek için PNG'den ICO'ya dönüştürücüyü kullanın.
HTML favicon kodu: favicon nasıl eklenir
Dosyaları sitenizin kök dizinine yükleyin ve şu etiketleri <head> bölümüne ekleyin:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Manifest, 192 ve 512 px simgeleri listeler. SVG sürümünüz yoksa SVG satırını çıkarın.
WordPress, Shopify ve Squarespace favicon boyutu
Site oluşturucular tek bir görsel ister ve boyutları kendileri üretir. WordPress buna Site Simgesi der ve en az 512 × 512 piksellik kare bir görsel ister. Shopify ve Squarespace de marka ya da tasarım ayarlarında kare bir görsel alır. Büyük, kare bir PNG yükleyin ve boyutlandırmayı platforma bırakın; ardından sonucu bir tarayıcı sekmesinde kontrol edin.