Favicon oluşturucu

Bir logo ya da kareye yakın herhangi bir görsel bırakın, sayfa onu bir sitenin ihtiyaç duyduğu altı boyutta çizsin: tarayıcı sekmeleri için 16, 32 ve 48 piksel, iOS’un ana ekrana kaydettiği simge için 180 piksel, Android için de 192 ve 512 piksel. İndirdiğiniz şey bu PNG’leri, bir favicon.ico dosyasını, bir site.webmanifest dosyasını ve <head> etiketinize ekleyeceğiniz HTML’in bir kopyasını içeren tek bir ZIP.

ZIP’in içinde ne var?

Altı PNG (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png ve icon-512.png) ve 16, 32, 48 piksellik sürümleri tek dosyada barındıran bir favicon.ico. ICO biçimi Windows Vista’dan beri içinde PNG sıkıştırmalı görsel taşıyabiliyor, böylece dosya küçük kalırken sadece /favicon.ico arayan eski tarayıcılar da gösterecek bir şey buluyor.

site.webmanifest, 192 ve 512 piksellik simgeleri listeler ve ayarlar menüsüne yazdığınız uygulama adını, ayrıca Android’in ana ekran simgesinin altında gösterdiği uzunlukla aşağı yukarı örtüşen, 12 karaktere kısaltılmış bir short_name değerini taşır. Alanı boş bırakırsanız “My site” yazar. Son dosya olan favicon.html ise kopyala düğmesinin panonuza koyduğu beş <link> etiketinin aynısıdır.

Görsellerim bir yere yükleniyor mu?

Hayır. Resminiz sayfadaki bir canvas elemanının üzerine çizilir ve PNG’ye tarayıcının kendisi tarafından kodlanır, sonra aynı sekmede ZIP dosyasına eklenir. Sunucuya hiçbir şey gönderilmez, yani henüz yayınlanmamış bir logo ya da bir müşterinin marka işareti makinenizden hiç çıkmaz. Sayfayı açıp ağ kablosunu çekseniz bile her şey çalışmaya devam eder.

Ne tür bir dosya vermeliyim?

PNG, JPEG, WebP ve SVG dosyaları kabul edilir. Kare bir kaynak en iyi sonucu verir, çünkü görsel sığdırılıp ortalanır; geniş bir banner görseli verirseniz üstte ve altta saydam boşluklar oluşur. Bir logo için en uygun girdi SVG’dir, çünkü her boyut yeniden ölçeklenmiş bir bit eşlemden değil doğrudan vektörden çizilir. Ne yüklerseniz yükleyin, 16 pikselin ne kadar küçük olduğunu unutmayın: tam bir yazı logosu bu boyutta bulanıklaşır, tek bir harf veya simge çok daha iyi okunur.

Dosyalar yerine oturduktan sonra tarayıcılar favicon’ları uzun süre önbellekte tutar, bu yüzden yeni simgeyi görmek için sayfayı önbelleği atlayarak yenilemeniz gerekebilir. MDN’nin link türleri sayfası kod parçasındaki her etiketin ne işe yaradığını anlatır.