Bir favori simge (favicon), nedir? Bir web sayfasını veya web sitesini ziyaret ettiğinizde yukarıda o simgeyi gördünüz mü? O küçük simge mi? Evet, işte tam da bir favicon orada. Genellikle 16x16 piksel boyutunda olan ve bir web sitesini/web sayfasını temsil eden bir simgedir. Ayrıca, mobil ana ekranlarda, bir tarayıcının yer imi çubuğunda ve arama sonuçlarında da favikonları bulabilirsiniz.
Boyut olarak "mini" olsa da, üzerinde büyük sorumluluklar var: Markanızı anında tanınabilir kılabilir, kullanıcı deneyimini iyileştirebilir ve marka kimliğini pekiştirebilir.
Dolayısıyla, markalama (uyumluluk, tanıma ve hatırlama) açısından önemli bir rol oynar. Aşağıda, logonuzdan bir favori simge oluşturma sürecini paylaşacağız. Teknik gibi mi geliyor? Size bunun öyle olmadığını kanıtlayacağız.
Hatta size nasıl hızlı bir şekilde yapılacağını - hatta tasarım deneyimi olmadan bile - ve web sitenize nasıl optimize edilip entegre edileceğini öğreteceğiz. Başlayalım.
Favikonları Anlama
Belirtildiği gibi, web sitenizi (WWW'deki eviniz) doğrudan temsil eden küçük bir resimdir. Görsel bir kısayol veya işaret gibi, kullanıcıların en az yedi tarayıcıyı aynı anda açık olsa bile hızlıca tanımasına olanak tanır.
Standart Formatlar
- .png: Kullanıcı dostu. Oluşturmak için özel grafik tasarım araçlarına ihtiyaç duymaz.
- .ico: Microsoft tarafından geliştirilen ICO, orijinal favicon dosya formatıdır. Bu format, aynı dosya içinde birden fazla küçük resmi destekler ve tüm tarayıcı türleri tarafından desteklenir. (Tarayıcılar tarafından en yaygın desteklenen)
- .svg: Hafif ve yüksek ölçeklenebilir, ancak şu anda mükemmel tarayıcı desteğine sahip değil. Ancak yükleme sürelerini feda etmez. (Yalnızca Opera, Firefox ve Chrome tarafından desteklenir)
Bunlar en yaygın olanlardır, ancak belirli cihazlar veya tarayıcılar için ek formatlar mevcut olabilir.
Önerilen Boyutlar (piksel cinsinden)
PNG (*Tarayıcılar herhangi bir kare resmi kabul eder)
16x16
32x32
ICO
16x16
32x32
48x48
Ancak, dikkat edin. Bazı web siteleri daha yüksek çözünürlükler gerektirebilir (örneğin, mobil cihazlar ve retina ekranlar için 64x64, 128x128 veya 512x512).
Logonuzu Bir Favicon İçin Nasıl Hazırlarsınız
İlk olarak: Tüm logolar favikon olamaz. Bazıları buna uygun değildir. Bu yüzden onları nasıl tasarladığınız önemlidir.
Karmaşık metin veya detaylar içeren bir logonuz mu var? Markalamanızdan bir monogram veya sembol gibi ayırt edilebilir bir öğe kullanmanızı öneririz.
Veya logonuz küçük metin veya detaylar içeriyor mu? Bu, küçültüldüğünde okunaksız olabilir. Maksimum görünürlük için yüksek kontrastlı veya hatta kalın öğeler kullanmanızı şiddetle öneririz.
Ayrıca, faviconunuzu farklı tarayıcı temalarıyla sorunsuz bir şekilde bütünleştirmesine izin veren şeffaf bir arka plan kullanmak akıllıca olacaktır, ancak simgenin netliğini artırıyorsa düz, düz renkli bir arka plan da iyi bir fikirdir.
Faviconunuzu cilalı ve kolayca tanınabilir hale getirmek istiyorsanız, dengeli bir tasarımda keskin kenarlar kullanın.
Logonuzdan Bir Favicon Nasıl Oluşturulur
Eğer zaten logogenie.com ile bir logo oluşturduysanız, şimdi bir favicon oluşturma zamanı. İşte bunu yapmanın popüler yolları.
Çevrimiçi Favicon Oluşturucuları
Favicon.cc, Favicon.io veya RealFaviconGenerator gibi çevrimiçi araçları/kurucuları kullanarak işlemi hızlı ve uygun hale getirebilirsiniz - logonuzu elle yeniden boyutlandırma ve dosya formatlarına dönüştürme gereksinimini ortadan kaldırmadan. [Doğru logo boyutları hakkında bir rehber de hazırladık.]
Marka logonuzu yükleyin ve farklı favicon boyutlarına dönüştürün (ve hatta uyumluluk için uygun gördüğünüz bir veya daha fazla çözünürlük oluşturun, böylece favori simgenizin cihazlar, tarayıcılar ve işletim sistemleri arasında uyumluluğunu sağlayın).
- Logonuzun resmini yükleyin.
- Çevrimiçi favicon oluşturucunun ayarlarını özelleştirin.
- Faviconunuzu indirin!
(Bazı araçlar ayrıca farklı favicon sürümlerini içeren bir paket sunar, böylece tutarlı bir görünüm sağlar ve yeniden boyutlandırma ve dönüştürme işlemlerini kendi başınıza yapmanızı sağlar.)
Grafik Tasarım Araçları/Yazılımları
Özelleştirilmiş bir favicon mu istiyorsunuz? Illustrator, Adobe Photoshop, Canva veya GIMP gibi araçları kullanmanızı öneririz. Başlamadan önce, en iyi sonuçlar için tuval boyutunu (boyutlar: 128x128 px veya 64x64px) ayarlayın.
Şirket logonuzu yeniden boyutlandırmanız veya ayarlamanız gerekebilir (veya önce bir iş logusu oluşturmanız gerekebilir) görünürlük ve netlik sağlamak için, hatta daha küçük boyutlarda bile. Daha iyi ölçeklenebilirlik için keskin ve temiz bir tasarım tasarlamayı öneririz.
Uyumluluk için PNG formatında kaydedin ve ardından uyumluluk için ICO gibi bir favicon formatına dönüştürün. [Photoshop'ta tasarlıyorsanız, dosya kalitesini ve boyutunu uygun şekilde optimize etmek için "Web'e Kaydet" seçeneğini seçin.]
Resmi Favicon Formatına Dönüştürme
Hazır JPG/PNG dosyanızı elde etmekle tasarım süreci bitmez çünkü tarayıcı uyumluluğunu sağlamak için onu ICO formatına dönüştürmeniz gerekir. Bunun için ICOConvert, ConvertICO ve Favicon.io gibi dönüştürme araçlarını kullanın.
Standart bir boyut tercih ederseniz (16x16 gibi), farklı cihazlar için doğru boyutun hemen kullanılabilir olmasını sağlamak için birden fazla boyut oluşturmanızı öneririz. WordPress ve diğer platformlar doğrudan bir PNG dosyası yüklemenize izin verse de.
Yine de, bir ICO sürümüne sahip olmak, birden fazla platformda maksimum uyumluluğu sağlayabilir.
Web Sitenize Bir Favicon Nasıl Eklenir
Şimdi, bir sonraki adıma geçelim. Faviconunuz hazır olduğunda, web sitenize yüklemeye devam edelim.
Kök dizinine gidin ve oraya yükleyin. Alternatif olarak, favicon dosyasını doğrudan /favicon.ico dizinine yerleştirebilirsiniz, böylece çoğu tarayıcı tarafından otomatik olarak algılanır.
Dorik, Wix, Shopify veya WordPress gibi kod gerektirmeyen bir web sitesi oluşturucu mu kullanıyorsunuz? Öyleyse, tema ayarlarına gidin ve faviconu oraya yükleyin. Ayarlar bölümünde nerede yükleneceğini bulamazsanız, ayrılmış favicon yükleme bölümüne gidin.
Ancak, manuel entegrasyon gerektiren özel bir web sitesine sahipseniz, erişilebilir bir konumda saklandığından emin olmalısınız.
HTML Kodunu Güncelleme
HTML kodunun bölümüne:
- Link etiketini içine ekleyin
- Favicon.png'yi gerçek favicon dosya yolunuzla değiştirin. Bazı web tarayıcıları ICO dosyası gerektirdiğinden ek bir etiketle uyumluluğu artırın.
Ek meta etiketleri ile Android cihazlar, Apple cihazları veya Windows için simgeleri tanımlayabilir veya belirtebilir ve böylece birden fazla favicon sürümüyle sorunsuz bir kullanıcı deneyimi sağlayabilirsiniz.
CMS veya WordPress Faviconunu Güncelleme
WordPress
Görünüm > Özelleştir > Site Kimliği'ne gidin.
Faviconu yükleyin.
Shopify
Ayarlar > Dosyalar veya tema düzenleyiciniz içinde gezinin.
*Squarespace veya Wix gibi diğer web sitesi oluşturucularının kendi yükleme seçenekleri olabilir, bunları Ayarlar bölümünde bulabilirsiniz. İPUCU: Faviconunuzu farklı tarayıcılarda ve cihazlarda kontrol edin ve doğru göründüğünden emin olun
Test Etme ve Sorun Giderme
“Faviconum görünmüyor. Ne yapmalıyım?” Tarayıcı önbelleğini temizleyin ve sayfayı yenileyin. Bazı tarayıcıların yeni favicon yüklemenizi tanıması zaman alabilir.
Ayrıca, faviconunuzun çevrimiçi bir favicon oluşturucunun denetleyicisi gibi araçlarla uygulandığını kontrol edin.
Favicon Tasarımı İçin En İyi Uygulamalar
Kullanıcıların ana ekranları ve yer imi listeleri gezinirken web sitenizi tanımalarına yardımcı olmak için logonuzu veya marka simgenizi kullanın.
Kare tuvale sığacak bir logomarkınız yoksa, en tanınabilir kısmını kullanmayı unutmayın.
Arka plan renkleri olan bir arka plan yerine şeffaf bir arka plan daha iyi bir seçenek olabilir. Bazı kullanıcılar, arka plan renkleri olanları çok karışık bulabilir ve genellikle eskimiş görünebilir. Ayrıca, şeffaf bir versiyon, cihazın, tarayıcının veya web sitesinin hangi arka plan renklerine sahip olduğuyla çelişmeyeceği için neredeyse her yerde paylaşılabilir veya yüklenebilir.
Basitlik etkili bir favicon için anahtardır!
Küçük boyutlarda bile karmaşık çizgiler veya karmaşık metinler kullanmayın. Ayrıca, uzaktan bile tanınabilir olmalıdır, bu nedenle ilk başta renkli ve karmaşık versiyonunu kullandıysanız logonuzun basitleştirilmiş ve yoğunlaştırılmış versiyonunu kullanmanızı öneririz.
Markalaşmayı göz önünde bulundurun
Web sitenizi ilk kez ziyaret eden kişiler tarafından nasıl görüneceğini veya algılanacağını düşünün? Tutarsızlık olmaması için mevcut marka stil kılavuzlarıyla uyumlu olduğundan emin olun! Unutmayın, bu daha büyük bir kimliğin bir parçası olduğundan, markanızın bir parçası gibi görünmesini sağlayın.
Tüm alanı kullanın
PRO ipucu: Alanı maksimize etmek için logonuzu/ikonunuzu ortaya eklemekten önce favicon tasarımınızın arka planını renklendirin.
Ancak, tüm alanı kullanmak için katı bir arka plana ihtiyacınız yoktur çünkü şeffaf arka planlar mükemmel çalışır. Genel olarak, alana ne koyarsanız koyun, favicon tasarımınızın sınırlarına daha yakın uzanabilmesini sağlayarak netliğini artırın.
Modern tarayıcılar için SVG dosyası kullanın çünkü mükemmel ölçeklenebilirlik sunar.
Vektör tabanlı olduğundan, boyuttan bağımsız olarak keskinliği koruyabilir, bu da web sitesi tasarımınızı geleceğe yönelik korumak ve yüksek çözünürlüklü ekranlarda ideal olmasını sağlar. Ayrıca hafif olduğundan, genel site performansını artırır ve yükleme sürelerini azaltır.
Son Düşünceler
Küçük boyutlarda bile fazla detay içermeyen, kolayca tanınabilir
