Favicon nasıl oluşturulur.

Favicon / ICO Oluşturucu'yu açın ve Görsel'i seçin. Bir PNG, JPG, JPEG, WebP veya GIF yükleyin ya da Örnek dene'yi seçin. Uygulamalı örnekte, şeffaf köşelere sahip 512 × 512 piksellik mor yörünge işareti olan favicon-orbit.png kullanılır. Girdi 202,491 bayttır.

Hazır bir logosu olmayan bir marka için, araç sayfasında Metin'i seçin. Bir veya iki harf girin ve Devam'ı seçin. Düzenleyici; Modern sans, Klasik serif ve Monospace yazı tiplerinin yanı sıra ayrı metin ve arka plan renkleri sunar. Üç karaktere kadar kabul edilir, ancak fazladan karakterler küçük boyutlarda tanınması zor hale gelebilir.

Orijinal çalışmayı saklayın. Oluşturucu yeni simge dosyaları oluşturur ve kaynağın üzerine yazmaz. GIF girdisi, hareketli bir favicon yerine sabit bir simge haline gelir.

Bir monogram için Yazı Tipi menüsü, dahil edilen üç stille başlar. Desteklenen bir masaüstü tarayıcısında Sistem yazı tiplerini kullan'ı seçin ve cihazınızda yüklü olan yazı tiplerini eklemek için erişime izin verin. Bitişik yazı tiplerini karşılaştırmak için önceki ve sonraki okları kullanın veya bir aile seçip özellikle 16 pikselde canlı önizlemeyi inceleyin. Yazı tipleri cihazınızda kalır; dahil edilen stiller izin gerektirmeden çalışır.

Düzenleyici, açık ve koyu tarayıcı sekmelerini ve yaygın simge boyutlarındaki önizlemeleri görüntüler. Önce 16 piksellik örneği kontrol edin; bu, işaretin tanınabilir kalıp kalmadığının en sıkı testidir. Apple Touch önizlemesi 180 piksellik bir dışa aktarımı temsil eder ve çalışma alanında daha küçük görüntülenir.

Telefonda Ayarlar'ı açın. Oluşturma kaynağını Yüklenen görsel olarak bırakın ve Görsel sığdırma ayarını Görselin tamamını göster olarak ayarlayın. Bu örnek için İçerik etrafındaki boşluk değerini 0 olarak ayarlayın ve Şeffaf arka plan'ı etkinleştirin. Kaynak zaten kendi yuvarlatılmış mor şeklini ve net kenar boşluklarını içerdiğinden, ek bir renkli arka plana ihtiyaç duymaz.

Farklı bir kaynakla, Görselin tamamını göster kenarlarını korurken, Simgeyi doldur onları kırpabilir. Yuvarlatılmış kare, Kare ve Daire dış şekli tanımlar. Şeffaf arka plan net alanları korur ancak bir fotoğrafa zaten çizilmiş olan opak bir arka planı kaldıramaz. Her çerçeveleme değişikliğinden sonra en küçük önizlemeyi inceleyin.

İndir (Download) altında, bu örnek için Web sitesi simge paketi (ZIP) seçeneğini belirleyin. Web sitesi adı kısmını örnek için My website olarak bırakın veya kendi projeniz için gerçek marka adınızla değiştirin. Bu isim site.webmanifest dosyasında kullanılır; görselin üzerine metin olarak eklenmez.

Başlat (Start) düğmesini seçin. Tarayıcı, favicon.ico piksel boyutlarında kare görseller içeren yedi karelik bir 16, 24, 32, 48, 64, 128 ve 256 oluşturur. Ayrıca PNG piksel boyutlarında 16, 32, 48, 180, 192 ve 512 simgeleri, bir manifest dosyası ve kurulum talimatları oluşturur. Sonuç, her simge için ayrı bir indirme düğmesi yerine tek bir ZIP dosyasıdır.

Yalnızca klasik bir favicon.ico dosyasına ihtiyacınız varsa, bunun yerine Çok boyutlu ICO seçeneğini tercih edin. Bu, bir web sitesi platformu ICO yüklemesini kabul ettiğinde ve ayrı bir pakete ihtiyaç duymadığında kullanışlıdır.

İndir işlemi website-icons.zip dosyasını kaydeder. Gerçek çalışma örneği dokuz dosya içerir ve 304,351 bayt boyutundadır. Yukarıdaki karşılaştırma, simüle edilmiş bir tarayıcı ekran görüntüsü yerine, dışa aktarılan ICO dosyasından çıkarılan gerçek 256 piksellik kareyi ve yanındaki 512 piksellik kaynağı gösterir.

ZIP dosyasını ayıklayın, simge dosyalarını web sitenizin kök dizinine yükleyin ve INSTALL.txt dosyasını okuyun. Bu dosya; ICO, PNG simgesi, Apple Touch simgesi ve web manifest için HTML bağlantı etiketlerini içerir. Dosyaları bir alt klasöre yerleştirirseniz, hem HTML yollarını hem de site.webmanifest içindeki simge yollarını güncelleyin.

Sitenizi yeni bir tarayıcı sekmesinde ve önemsediğiniz cihazlarda kontrol edin. Tarayıcılar favicon'ları önbelleğe alabilir, bu nedenle eski bir simge kurulumun başarısız olduğunu hemen kanıtlamaz. Düzenleyiciyi yenilemeden önce kaynak görseli ve indirilen paketi saklayın, çünkü yenileme işlemi ana araç sayfasına geri döndürür.