Zaten bir logonuz var. İhtiyacınız olan şey, o logonun bir tarayıcının beklediği minik simge dosyaları yığınına dönüştürülmesi — bir favicon.ico, belirli boyutlarda birkaç PNG, bir web manifest ve hepsini bağlayacak HTML. O dönüşüm mekaniktir ve hiçbir şey kurmadan yaklaşık bir dakikada yapabilirsiniz.
Püf noktası, her logonun zarifçe küçülmemesidir. Dolayısıyla bu, hem hızlı yolu hem de 16 pikselde lapaya dönen bir logonun nasıl düzeltileceğini anlatıyor.
Kısa hali
- Logonuzu kare bir görsel olarak alın — ideal olarak 512×512 ya da daha büyük, saydam ya da düz bir arka planda.
- Onu Favicon Oluşturucuya bırakın.
- Üretilen seti indirin ve dosyaları site kökünüze bırakın.
- Sağlanan HTML parçacığını
<head>'inize yapıştırın.
İşin tamamı bu. Oluşturucu favicon.ico, 16, 32, 48, 180, 192 ve 512'de PNG'ler, bir webmanifest ve tam <link> etiketlerini çıkarır — böylece altı görseli elle kırpmaz ya da manifest söz dizimini tahmin etmezsiniz.
Önce logonuzu hazırlayın — kalitenin kazanıldığı ya da kaybedildiği yer burasıdır
Bir favicon tarayıcı sekmesinde 16×16'da yaşar. O boyutu atlatamayan her ayrıntı ziyan olur. Burada iki dakika harcayın ve sonuç her yerde keskin görünsün.
Kare yapın. Faviconlar karedir. Geniş, yatay bir logo mektup kutusuna alınır ya da ezilir. En tanınabilir öğeye kırpın — genellikle işaret ya da tek bir baş harf — ve onu kare bir çerçevede ortalayın.
Kelime işaretini atın. Şirket adınız tam haliyle sekme boyutunda okunabilir olmaz. "Acme Corporation" gri bir lekeye dönüşür. Sembolü ya da tek bir harfi tutun ve adı sekme başlığının taşımasına izin verin.
Her iki temaya karşı kontrastı kontrol edin. Tarayıcı sekmeleri açık ve koyu gelir. Koyu lacivert bir simge koyu bir sekmede kaybolur; soluk bir simge açık bir tanesinde kaybolur. İşaretiniz tek düz bir renkse, o rengin her ikisinde de okunduğundan emin olun. İnce bir dış hat ya da küçük bir düz arka plan çipi yardımcı olabilir.
Nefes alma alanı bırakın. Kare içinde biraz dolgu ekleyin, böylece simge kenarlara sıkışmaz. Her slotta daha dengeli görünür.
Büyük başlayın. Bir 512×512 (ya da daha büyük) kaynak, oluşturucuya küçültmek için temiz ayrıntı verir. Önce minik bir logoyu büyütmek yalnızca bulanıklığı pişirir.
Saydam mı düz arka plan mı?
Her ikisi de çalışır — istediğiniz görünüme bağlıdır.
- Saydam sekmenin ya da ana ekranın arka planının görünmesini sağlar. Temiz ve modern ve açık/koyu çevreye uyum sağlar. İşaretiniz belirgin bir şekilse en iyisidir.
- Düz arka plan çipi (işaretin arkasında renkli, yuvarlatılmış bir kare) arkasında ne olursa olsun simgenin okunmasını garanti eder. Çoğu uygulama simgesinin yaptığı budur ve logonuz ince ya da düşük kontrastlıysa daha güvenli seçimdir.
Emin değilseniz, marka renginizde düz bir çip sağlam seçenektir — eşleşen bir arka plana asla kaybolmaz.
İndirdikten sonra: dosyalar nereye gider
Oluşturucu size bir dosya seti ve bir parçacık verir. İki yerleştirme kuralı bunu kapsar:
favicon.icosite kökünüze gider (/favicon.ico). Tarayıcılar ve Windows onu bir<link>etiketi olmadan bile orada ada göre arar.- Geri kalan her şey, HTML parçacığındaki yollar eşleştiği sürece istediğiniz yerde yaşayabilir. Çoğu kişi hepsini köke bırakır ve parçacığı olduğu gibi yapıştırır.
Sonra yalnızca <head> parçacığıdır — simge bağlantıları, apple-touch-icon ve manifest referansı. Yapıştırın, dağıtın, zorla yenileyin ve logonuzu sekmede görmelisiniz.
Neden tarayıcıda yapmalı?
Çünkü logonuz makinenizden asla ayrılmaz. Tüm süreç — görseli okumak, her boyuta yeniden boyutlandırmak, .ico'yu paketlemek, manifest'i yazmak — Canvas kullanarak tarayıcınızda yerel olarak gerçekleşir. Hiçbir şey bir sunucuya yüklenmez, kayıt ya da filigran yoktur ve ilk ziyaretinizden sonra araç çevrimdışı çalışır. Henüz yayımlamamış olabileceğiniz bir marka varlığı için, onu üçüncü taraf sunuculardan uzak tutmak mantıklı varsayılandır.
Logonuz kare, yüksek kontrastlı ve küçükken okunabilir olduğunda, tam seti üretmek kolay kısımdır.