Favicon paketi oluştur

Favicon, tarayıcı sekmesinde sitenin adının yanında duran küçük simgedir. Yer imlerinde, geçmiş listesinde ve biri siteni telefonunun ana ekranına eklediğinde de bu simge kullanılır. Her yerin beklediği boyut farklı olduğu için tek bir dosya yetmez; bu araç gereken dosyaları bir arada üretir.

Nasıl kullanılır?

1. Kareye yakın bir görsel seç: PNG, SVG ya da JPG. Görsel tarayıcında işlenir, sunucuya gönderilmez.
2. Arka planı belirle: şeffaf ya da bir renk.
3. İç boşluğu ve köşe yuvarlaklığını yüzde olarak ayarla.
4. Sahte bir tarayıcı sekmesinde gerçek boyutuyla gösterilen önizlemeye bak.
5. ZIP paketini indir ve HTML kodunu kopyala düğmesiyle al.
6. Dosyaları sitenin sunucusuna yükle ve kodu sayfalarının <head> bölümüne yapıştır.

Paketteki dosyalar

ICO dosyasının içinde birden çok boyut bulunur; tarayıcı ya da işletim sistemi duruma göre uygun olanı seçer. Yalnızca tek bir ICO dosyasına ihtiyacın varsa, içindeki boyutları kendin seçebileceğin ICO oluştur aracını kullanabilirsin. Formatın ayrıntıları ICO format sayfasında.

Küçük boyutta okunaklı simge

16 piksel, yan yana 16 noktadan ibarettir. Bu boyutta ince yazılar, ayrıntılı çizimler ve uzun logolar okunmaz hâle gelir. Tam logon yerine baş harfini, amblemini ya da tek bir sembolü kullanmak çoğu zaman daha iyi sonuç verir. Kalın çizgiler ve güçlü bir kontrast küçük boyutta seçilmeyi kolaylaştırır.

İç boşluk, simgenin kenarlara yapışmasını önler; renkli zeminli ya da yuvarlak köşeli simgelerde biraz boşluk daha dengeli durur. Şeffaf zemin sekmede şık görünür, ama koyu temalı tarayıcılarda siyah bir simge kaybolabilir. iPhone ana ekranında da şeffaf alanlar genellikle düz bir renkle doldurulur. Bu yüzden renkli bir zemin seçmek, simgenin her yerde öngörülebilir görünmesini sağlar.

Vektör bir logon varsa SVG yüklemek her boyutta keskin sonuç almanı kolaylaştırır. Aynı logonun belirli bir ölçüde PNG kopyasına da ihtiyacın olursa SVG → PNG aracını kullanabilirsin. Simgeni sonradan güncellediğinde tarayıcılar eskisini bir süre önbellekte tutabilir. Hangi dosyanın neden gerektiği favicon nasıl yapılır rehberinde ayrıntılı olarak anlatılıyor.