Web Varlığı ve Markalama İçin Favicon Kullanımı
Bir web sitesinin profesyonel görünümü ve kullanıcı deneyimi, tarayıcı sekmelerinde, yer imlerinde ve mobil cihazların ana ekranlarında beliren küçük simgelerle doğrudan ilişkilidir. Favicon ve site simgeleri, ziyaretçilerin açık sekmeler arasında sitenizi kolayca tanımasını sağlar ve markanızın dijital dünyadaki imzasını oluşturur. Modern web standartlarında, yalnızca tek bir simge dosyası kullanmak yeterli değildir; farklı cihazlar, işletim sistemleri ve ekran çözünürlükleri için optimize edilmiş bir simge setine ihtiyaç duyulur.
Farklı Platformlar İçin Simge Türleri ve Boyutları
Web ekosisteminde kullanılan simgeler, işlevlerine ve görüntülenecekleri platformlara göre çeşitlilik gösterir:
- Tarayıcı Sekme Simgeleri: Klasik masaüstü tarayıcı sekmelerinde görüntülenen simgelerdir. Genellikle 16 × 16 ve 32 × 32 piksel boyutlarında PNG veya ICO formatında sunulurlar.
- Apple Touch Simgeleri: iPhone ve iPad cihazlarında, kullanıcılar web sitenizi ana ekranlarına kısayol olarak eklediğinde bu simge kullanılır. Apple cihazları için standart boyut 180 × 180 pikseldir.
- PWA (Aşamalı Web Uygulaması) Simgeleri: Android işletim sistemli cihazlarda ve yüklü web uygulamalarında kullanılan büyük boyutlu simgelerdir. Bu platformlar için 192 × 192 ve 512 × 512 piksel boyutlarında PNG formatında simgeler üretilir.
Kaynak Görsel Seçimi ve Çözünürlük Kuralları
Üretilecek simgelerin tüm cihazlarda keskin ve net görünmesi için kaynak görselin seçimi büyük önem taşır.
Eğer kaynak görsel olarak bir SVG (vektör) dosyası kullanırsanız, vektörün kendisi de simge paketine dahil edilir. SVG dosyaları matematiksel eğrilerden oluştuğu için her boyutta mükemmel keskinlik sağlar.
PNG veya JPG gibi raster formatlar kullanılacaksa, kaynak görselin en az 512 × 512 piksel boyutunda olması önerilir. Bu sınırın altındaki görseller yüklendiğinde araç, "Küçük kaynak ({w} × {h} px): büyük simgeler bulanık görünebilir. En iyi sonuçlar için 512 × 512 veya daha büyük bir görsel — ya da bir SVG — kullanın." uyarısını verir. Araç en fazla 50 MB boyutundaki dosyaları desteklemektedir; bu sınır aşılırsa "Bu dosya 50 MB'ın üzerinde. Daha küçük bir kaynak görsel kullanın." hatası gösterilir.
Kare Olmayan Görsellerin Hizalanması ve Arka Plan Seçimi
Simgeler standart olarak her zaman kare biçimindedir. Kare olmayan bir kaynak görsel yüklendiğinde, görselin en-boy oranının bozulmaması ve esnetilmemesi için iki farklı yöntem sunulur:
- Sığdır (boşluk bırak): Görselin tamamı görünür kalır ve kare alanın ortasına yerleştirilerek etrafında boşluk bırakılır.
- Doldur (kırp): Görsel kare alanı tamamen dolduracak şekilde ölçeklenir ve taşan kenarlar kırpılır.
Arka plan tercihi de simgelerin görünümünü doğrudan etkiler. Varsayılan olarak şeffaf arka plan seçilidir. Şeffaf arka planlar tarayıcı sekmeleri için oldukça uygundur. Ancak, iPhone ve iPad ana ekranları şeffaf alanları siyaha boyadığı için, mobil uyumluluk adına bir arka plan rengi seçilmesi daha güvenlidir.
Tarayıcı İçi İşlem ve Veri Gizliliği
Favicon Üretici, tüm dönüştürme işlemlerini doğrudan kullanıcının tarayıcısında gerçekleştirir. Görseliniz tarayıcınızda simgelere dönüştürülür ve BroBroGo'ya hiçbir şey yüklenmez. Bu sayede yerel kaynaklar kullanılarak işlem tamamlanır.
Simge Paketinin Kurulumu ve Web Sitesine Entegrasyonu
Üretim işlemi tamamlandığında, tüm simgeleri içeren bir ZIP dosyası ve web sitenizin <head> bölümüne eklemeniz gereken HTML kod snippet'i hazırlanır.
Paket içerisinde şu dosyalar yer alır:
- favicon.ico: İçerisinde 16, 32 ve 48 piksel sürümlerini barındıran klasik sekme simgesi.
- PNG Simgeleri: 16, 32, 180, 192 ve 512 piksel boyutlarında hazırlanan simgeler.
- site.webmanifest: Büyük simgeleri listeleyen ve cihazlara bu simgelerin nerede olduğunu bildiren küçük bir metin dosyası.
- SVG: Eğer kaynak dosya SVG ise, her boyutta keskinlik sağlayan vektör dosyasının kendisi.
Kurulumu tamamlamak için ZIP içerisinden çıkan tüm dosyaları web sitenizin kök klasörüne yerleştirmeniz ve ardından üretilen HTML kod satırlarını sitenizin her sayfasındaki <head> etiketleri arasına eklemeniz gerekir.
Sıkça Sorulan Sorular
Simge paketinde hangi dosyalar var?
İçinde 16, 32 ve 48 piksel sürümleri bulunan favicon.ico, 16, 32, 180, 192 ve 512 piksel boyutlarında PNG simgeleri ve büyük simgeleri listeleyen bir site.webmanifest dosyası. Bir SVG ile başlarsanız, vektörün kendisi de dahil edilir. Tek bir ZIP dosyası her şeyi barındırır.
Kaynak görselim hangi boyutta olmalı?
Bir SVG idealdir — her simge vektörden çizilir, böylece 16 piksel bile keskin kalır. PNG veya JPG için en az 512 × 512 boyutundan başlayın; daha küçük görseller ölçeklendirilirken netliğini kaybedebilir.
Arka plan şeffaf mı yoksa renkli mi olmalı?
Sekme simgeleri şeffaf olarak gayet iyi görünür. Ancak iPhone ve iPad ana ekranları şeffaf alanları siyaha boyar — insanların sitenizi ana ekranlarına ekleme ihtimali varsa, bir arka plan rengi seçin.
Kare olmayan bir görsele ne olur?
Simgeler karedir, ancak görseliniz asla esnetilmez. Varsayılan olarak etrafında boşluk bırakılarak ortalanır; bunun yerine uzun kenarları kırpmak için "Doldur (kırp)" seçeneğine geçiş yapın.
Dosyalar sitemde nereye yüklenmeli?
Bunları sitenizin kök dizinine yükleyin, böylece favicon.ico dosyasına /favicon.ico adresinden ulaşılabilir olsun, ardından üretilen satırları sayfalarınızın <head> bölümüne yapıştırın. Tarayıcılar doğru boyutu kendileri seçecektir.