Favicon Oluşturucu: ICO, PNG Simgeler ve Manifest

Favicon, tarayıcı sekmelerinde, yer imlerinde, geçmiş listelerinde ve arama sonuçlarında site adınızın yanında görünen küçük simgedir. Telefonlarda biri sitenizi kaydettiğinde ana ekranda daha büyük sürümleri görünür. Net bir simge sitenizi düzinelerce açık sekme arasında kolay bulunur kılar ve daha profesyonel görünür.

Farklı yerler farklı boyutlar ve biçimler gerektirir. Tarayıcılar hâlâ favicon.ico'yu arar, Apple cihazları 180 px bir PNG kullanır, Android ve yüklenebilir web uygulamaları simgeleri bir web manifest'ten okur ve arama motorları en az 48 px simgeleri tercih eder.

İhtiyacınız olan boyutlar

Favicon boyutlarını birer satırda açıklarsak: 16 ve 32 px tarayıcı sekmeleri, 48 px Windows ve arama sonuçları, 180 px Apple touch icon, 192 ve 512 px Android ve web uygulaması manifest'leri içindir. Bu oluşturucu hepsini ve diğer kullanımlar için 64, 96, 128, 256 ve 384 px sürümleri oluşturur.

İdeal olarak kare ve en az 512'ye 512 piksel bir logo ekleyin. Şeffaf arka planlı bir PNG veya SVG en keskin sonuçları verir. Şeffaf veya düz bir arka plan seçin, görsel kenarlara değiyorsa iç boşluk ekleyin ve uygulama tarzı bir simge istiyorsanız köşeleri yuvarlayın. Önizlemeler simgeyi açık ve koyu arka planlarda 16, 32, 48 ve 180 px'te gösterir, böylece gerçek sekmelerde nasıl göründüğünü değerlendirebilirsiniz.

Manifest için uygulama adınızı ve tema renginizi girin, ardından Favicon paketini indir'e basın. Yalnızca favicon.ico'yu veya 512 px bir PNG'yi de indirebilirsiniz.

PNG'den başlamak

PNG görselden favicon oluşturmak için elinizdeki en büyük sürümle başlayın. Büyük bir görseli küçültmek keskin küçük simgeler üretir, çok küçük bir görseli büyütmek ise bulanıklık üretir. Logonuz genişse yalnızca simgesini veya baş harfini kullanmayı düşünün, çünkü yazı 16 px'te okunmaz hâle gelir.

favicon.ico

favicon.ico dosyası, 16, 32 ve 48 px görselleri tek bir dosyada saklayan bir PNG'den ICO'ya dönüştürmeyle oluşturulur. Modern tarayıcılar ve Windows PNG sıkıştırmalı simgeleri okur; bu dosyayı küçük, kenarları temiz tutar.

Apple cihazları

Apple touch icon boyutu 180'e 180 pikseldir. iOS şeffaf alanları siyahla doldurur, bu yüzden arka planınız şeffafsa oluşturucu bu simgeye tema renginizi kullanarak otomatik olarak düz bir arka plan verir.

Android ve web uygulamaları

site.webmanifest'teki web manifest simgeleri, simgeleri daire veya yuvarlak kare şeklinde kırpan Android için maskelenebilir bir sürüm dahil 192 ve 512 px PNG'lerdir. Hiçbir şey kesilmesin diye önemli görselleri simgenin merkezdeki %80'inde tutun.

Paketi açın ve dosyaları web sitenizin kök klasörüne, ana sayfanızla aynı yere yükleyin. Ardından HTML parçasını her sayfanın head bölümüne veya site şablonunuza kopyalayın. Parça ICO'yu, 16 ve 32 px PNG'leri, Apple simgesini ve manifest'i bağlar.

Web sitesi oluşturucuları ve içerik sistemlerinde bunun yerine çoğu zaman bir site simgesi ayarı bulunur. Bu durumda 512 px PNG'yi oraya yükleyin, platform diğer boyutları kendisi oluşturur.

Sorun giderme

Yüklemeden sonra favicon'unuz görünmüyorsa tarayıcılar önbellekteki bir sürümü kullanıyor olabilir. Simge URL'sini doğrudan açın, ardından sayfanızı tam yenilemeyle yeniden yükleyin veya gizli bir pencere deneyin. Arama motorlarının arama sonuçlarındaki simgeyi güncellemesi günler veya haftalar sürebilir.

Sadeleştirin. 16'ya 16 pikselde ince çizgiler ve küçük yazılar kaybolur. Güçlü kontrastla kalın bir simge, tek bir harf veya logonuzun sadeleştirilmiş bir sürümünü kullanın. Hem açık hem koyu önizlemeleri kontrol edin: şeffaf arka plandaki koyu bir logo koyu bir tarayıcı temasında kaybolabilir; bu, düz bir arka plan veya açık bir dış çizgi eklemek için iyi bir nedendir.

Tutarlılık da önemlidir. Renk seçicimizle örnek alabileceğiniz marka renklerinizi kullanın ve simgeyi her boyutta tanınabilir tutun.

Görseller tarayıcınızda işlenir ve asla yüklenmez. SVG dosyaları işlenmeden önce betiklerden ve harici bağlantılardan temizlenir. PNG, JPG, WebP, GIF ve SVG girdileri desteklenir. Araç ücretsiz ve sınırsızdır, EnhancerPro kredilerini kullanmaz.

Sonraki adımlar

Logonuz yalnızca piksel görsel olarak varsa görselden SVG'ye dönüştürücümüz bir vektör sürümü oluşturabilir, SVG'den PNG'ye aracımız da vektör logoları her boyutta dışa aktarır.

Tarayıcı sekmeleri

Masaüstü tarayıcılar sekmelerde genellikle 16 veya 32 px simgeyi, yüksek çözünürlüklü ekranlarda 32 px sürümü gösterir. Chrome ve Edge kısayollar ve yeni sekme sayfası için daha büyük PNG simgeleri de kullanır. Bu boyutlar çok küçük olduğundan 16 px önizlemesini dikkatle kontrol edin; simge bulanık görünüyorsa görseli sadeleştirin veya iç boşluğu biraz artırın.

Arama sonuçları

Arama motorları mobil ve masaüstü sonuçlarda sitenizin yanında bir favicon gösterir. 48 px'in katı olan ve tarayıcı botlarının erişebildiği kare bir simgeyi tercih ederler. Oluşturulan parçadaki gibi simgeleri ana sayfanızın head bölümünde bağlamak, onları kolay bulunur kılmanın standart yoludur.

Ana ekranlar

İnsanlar sitenizi telefonlarının ana ekranına eklediğinde iPhone'lar Apple touch icon'u, Android telefonlar manifest'teki simgeleri kullanır. İkisi de düz bir arka plan ve biraz iç boşlukla en iyi görünür, böylece simge sistemin eklediği yuvarlak köşelere değmez.

Koyu mod

Birçok kişi koyu tarayıcı temaları kullanır. Şeffaf arka plandaki siyah bir logo orada kaybolur. Araçtaki koyu önizleme bunu hemen gösterir. Düz bir arka plan rengi, açık bir dış çizgi veya logonun iki renkli bir sürümü simgeyi her yerde görünür tutar.

Mevcut bir simgeyi güncellemek

Bir favicon'u değiştirirken mevcut bağlantılar çalışmaya devam etsin diye aynı dosya adlarını koruyun. Tarayıcılar simgeleri yoğun biçimde önbelleğe alır, bu yüzden yenisinin geri dönen ziyaretçilere görünmesi biraz sürebilir. HTML'nizdeki bağlantılara favicon.ico?v=2 gibi bir sürüm parametresi eklemek tarayıcıları yeni dosyaları almaya zorlar.

Yayımlamadan önce kontrol listesi

Yayımlamadan önce dört şeyi kontrol edin. favicon.ico dosyası tarayıcıda alan-adiniz/favicon.ico adresinde açılıyor. HTML parçası ana sayfanızın head bölümünde. Apple simgesinin düz bir arka planı var ve siteyi bir iPhone ana ekranına eklediğinizde iyi görünüyor. Manifest adı ve tema rengi markanızla eşleşiyor. Bunlar yerindeyken simgeniz sekmelerde, yer imlerinde, arama sonuçlarında ve ana ekranlarda tutarlı biçimde görünür ve ziyaretçiler sitenizi bir bakışta tanır.

Kaynak dosyaları saklamak

Orijinal logoyu ve ZIP'i projenizde bir arada tutun. Renkleri değiştirdiğinizde veya logoyu sonradan yeniden tasarladığınızda aynı ayarlarla tüm seti bir dakikada yeniden oluşturabilirsiniz ve her boyut tutarlı kalır. Manifest ve simgeler yeniden markanızla eşleşsin diye kullandığınız tema rengini de saklayın. Logo, ayarlar ve oluşturulan dosyaların bulunduğu düzenli bir klasör, gelecekteki siz dahil siteyi sizden sonra yöneten herkese zaman kazandırır.