Favicon nasıl yapılır
Bir faviconun her yerde görünmesi için gereken boyutlar, biçimler ve kod.
Favicon, tarayıcı sekmesindeki, yer imlerindeki ve mobilde Google arama sonuçlarında sitenizin yanındaki küçük simgedir. Faviconu olmayan bir site yarım görünür, bulanık bir favicon ise daha da kötü bir izlenim bırakır. İyi bir tane yapmak birkaç dakika sürer.
Doğru görselle başlayın
Bir favicon bazen 16 x 16 piksel boyutunda görünür, yani adı da yazan tam bir logo okunmaz olur. Basit bir işaret kullanın: logonuzun simgesi, bir baş harf ya da marka renginde net bir biçim. Ekranda dörtte birine küçültüp deneyin: hâlâ tanıyorsanız işe yarar.
En az 512 x 512 piksel, tercihen saydam arka planlı bir PNG kare görselle başlayın. Logonuz kare değilse oranı 1:1 kilitleyerek kırpın.
İhtiyacınız olan dosyalar
| Dosya | Boyut | Kullanan |
|---|---|---|
| favicon.ico | 16, 32 ve 48 piksel sürümleri içerir | Tarayıcılar, eski sistemler, /favicon.ico adresine yapılan varsayılan istek |
| Bir PNG simge | 32 x 32 ve 192 x 192 | Modern tarayıcılar, Android ana ekranı |
| apple-touch-icon.png | 180 x 180 | iPhone ve iPad ana ekran kısayolları |
Google araması da faviconunuzu sonuçlarda kullanır. Kare olmalı, en az 48 x 48 piksel olmalı ve sitenizde tarayıcı robotlarının erişebileceği bir yerde bulunmalıdır.
ICO dosyasını oluşturmak
Kare PNG dosyanızı PNG’den ICO’ya dönüştürücüye bırakın. Araç, tarayıcıların istediği küçük boyutları içeren gerçek bir .ico dosyası üretir. PNG sürümler için aynı kare görseli 180, 192 ve 32 piksele boyutlandırın.
Siteye eklemek
favicon.ico dosyasını sitenin köküne yükleyin ki siteniz.com/favicon.ico adresinden erişilebilsin, sonra sayfalarınızın head bölümüne şu satırları ekleyin:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
WordPress’te Görünüm, Özelleştir, Site Kimliği bölümüne gidip kare bir görseli Site Simgesi olarak yükleyin; WordPress boyutları sizin için üretir. Shopify, Wix ve Squarespace’in her birinde site ya da tema ayarları içinde bir favicon alanı vardır.
Yeni favicon görünmüyorsa
Tarayıcılar faviconları inatla önbellekte tutar. Siteyi gizli pencerede açın ya da doğrudan siteniz.com/favicon.ico adresine gidip yenileyin. Google, ana sayfanızı yeniden taradıktan sonra simgeyi sonuçlarda güncellemek için günler hatta haftalar alabilir.
Sık yapılan hatalar
- Küçük yazı içeren tam logoyu kullanmak; 16 pikselde bir lekeye dönüşür.
- Saydam arka plan üzerinde beyaz simge; açık renkli sekmelerde kaybolur.
- Yalnızca minik bir 16 piksellik dosya koymak; yüksek çözünürlüklü ekranlarda bulanık görünür.
- /favicon.ico adresindeki dosyayı unutmak; sayfada ne yazarsa yazsın bazı tarayıcılar ve robotlar yine de onu ister.