Favicon Oluşturucu

Favicon nasıl oluşturulur

1. En iyi sonuç için 512x512 veya daha büyük kare bir görsel bırakın.
2. Simgenin küçük sekme boyutlarında nasıl göründüğünü önizleyin.
3. Oluştur'a tıklayarak tüm PNG boyutlarını ve .ico dosyasını üretin.
4. Favicon paketini indirin.
5. Verilen HTML kod parçasını sitenizin head bölümüne yapıştırın ve dosyaları yükleyin.

Pakette ne var ve her dosya nerede kullanılır

16, 32, 48, 180, 192 ve 512 piksellik PNG'ler ile favicon.ico elde edersiniz. 16 ve 32 px dosyalar tarayıcı sekmelerini ve yer imlerini kapsar; 180 px, birisi sitenizi iPhone ana ekranına eklediğinde görünen apple-touch-icon'dur; 192 ve 512 px, Android ve PWA manifestine hizmet eder. .ico dosyası birden çok çözünürlüğü tek dosyada toplar ve bazı tarayıcılar ile eski sistemlerin varsayılan olarak /favicon.ico yolundan istediği format olmaya devam eder.

Üretilen HTML kod parçası her simgeyi doğru rel ve sizes öznitelikleriyle tanımlar. Bunu head öğenize yapıştırın, dosyaları belirtilen yollara koyun; her platform istediği boyutu otomatik seçer.

Neden artık tek bir favicon dosyası yetmiyor

Eski dünya, site kökünüzde tek bir favicon.ico idi. Bugün bir tarayıcı sekmesi 16 ya da 32 px bir simge ister, bir iPhone ana ekran kısayolu 180 px bir apple-touch-icon ister ve Android'de kurulabilir bir web uygulaması (PWA) manifestinde tanımlı 192 ve 512 px PNG'ler ister. Yalnızca tek boyut gönderirseniz bunların bir kısmı boş ya da bulanık bir varsayılana düşer.

İşte bu yüzden bu araç tek bir dosya yerine eksiksiz bir set üretir. Her platform ihtiyaç duyduğu boyuta uzanır, böylece işaretiniz bir sekmede keskin, bir ana ekranda net ve birisi siteyi bir uygulama olarak kurduğunda doğru görünür — hiç ölçeklenmediği işleri kapsamak için gerilmiş tek bir görsel yerine.

Tüm set cihazınızda nasıl oluşturulur

Araç, kaynak görselinizden başlayarak onu her gereken boyutta bir canvas'a çizer ve Canvas API kullanarak her boyut için bir PNG dışa aktarır. .ico için, bu çözünürlüklerin birkaçını tek bir gerçek ICO kapsayıcısına paketler — uzantısı değiştirilmiş bir PNG değil, gerçek çok görüntülü biçim.

Bu .ico ayrımı önemlidir çünkü bazı tarayıcılar ve eski sistemler geleneksel olarak /favicon.ico ister ve dosyanın gerçek biçimini inceler; sahte biri reddedilir. Tüm boyutlandırma ve ICO kodlaması tarayıcınızda yerel olarak çalışır, dolayısıyla eksiksiz paket hiçbir şey yüklenmeden birleştirilir.

Markanız hiçbir zaman yüklenmez

Faviconları çoğu zaman erken üretirsiniz; site hâlâ geliştirme aşamasındayken ve logosu gizli ya da yayımlanmamış olabilirken. O işareti çevrim içi bir favicon hizmetine yüklemek, lansmandan önce markanızı üçüncü bir tarafa teslim etmek demektir.

Burada görsel sayfaya okunur ve her dosya tarayıcınızın belleğinde üretilir, dolayısıyla logo makinenizde kalır. Paketi indirin, projenize bırakın; kendi bilgisayarınız dışında hiçbir yerde hiçbir kopya var olmamıştır.

16 piksele dayanan bir işaret tasarlamak

Bir favicon çoğu zaman 16 px'de görüntülenir — tek bir karakterden zar zor büyük. Ayrıntılı logolar, ince çizgiler ve tam kelime logoları o boyutta bulanıklaşır; çoğu markanın favicon için tüm logosu yerine sadeleştirilmiş bir sembol, bir monogram ya da tek bir kalın harf kullanmasının nedeni budur.

Her boyut temiz bir kaynaktan küçülsün diye en az 512 px kare bir görselle başlayın, yüksek kontrast ve kalın şekilleri tercih edin ve göndermeden önce 16 px sonucunu değerlendirmek için küçük boyut önizlemesini kullanın. Şeffaf bir arka plan genellikle bir tarayıcı sekmesinde en iyi görünür ve işaretin açık ya da koyu temalara karşı temiz oturmasını sağlar.

Sitenize doğru şekilde bağlamak

Dosyaları üretmek işin yalnızca yarısıdır — tanımlanmaları gerekir. Araç size doğru bağlantı etiketleriyle bir HTML kod parçası verir: PNG'ler için rel ve sizes öznitelikleri, iOS için apple-touch-icon bağlantısı ve favicon.ico referansı. Bunu sayfalarınızın head bölümüne yapıştırın ve dosyaları belirttiği yollara yerleştirin.

favicon.ico'yu site kökünde tutun, çünkü tarayıcılar bir bağlantı etiketi olmadan bile geleneksel olarak tam olarak o yolu ister. Yeni bir faviconun 'görünmemesinin' yaygın bir nedeni, basitçe agresif tarayıcı önbelleklemesidir — bir şeyin yanlış olduğunu varsaymadan önce sayfayı zorla yenileyin ya da özel bir pencerede kontrol edin; çünkü sekme simgeleri inatla önbelleğe alınabilir.

Kimler bir favicon oluşturucuya başvurur

Bir siteyi başlatan ya da yeniden markalayan herkes — geliştiriciler, tasarımcılar, küçük işletme sahipleri, bir yan proje ya da açılış sayfası gönderen kişiler. Varsayılan küre yerine tarayıcı sekmesinde kendi simgenizi istediğiniz an en azından sekme boyutlarına ihtiyaç duyarsınız; bir telefona kaydedildiğinde doğru görünmesini istediğiniz an da daha büyüklerine ihtiyaç duyarsınız.

Yalnızca tek başına 16 px bir simge göndermiş ya da apple-touch-icon'u eksik olup artık mobil ana ekranlarda bozuk görünen mevcut bir siteyi denetlerken de yararlıdır. Tüm seti güncel logodan yeniden üretin, head kod parçasını güncelleyin; her platform yeniden kapsanır.

Sık sorulan sorular

İlgili araçlar