İnsanlara genel çevrimiçi markalaşma stratejilerine bir faviconun önemini anlatmaya başladığımda, genellikle aynı şeyi söylüyorlar: “Bu markalama meselesini biraz fazla çekmiyor musunuz?”
Cevabım genellikle şöyle: “Kendi markalaşma çabalarınız konusunda ciddi değil misiniz?”
Bu doğru, favicons çok küçük şeyler, muhtemelen bir sitenin en az önemli bit, ama bir site öne çıkaran detaylara dikkat; ve kulağa çılgınca gelse bile, bir marka bakış açısından favişler çok önemlidir.
WDD'nin bir tasarımcı kitlesine yönelik bir web sitesi olduğunu düşünürsek, tahminimce birçoğunuz hangi faviçlerin olduğunu ve bunları nasıl oluşturacağınızı zaten biliyorsunuz; Ancak bu makale hala neden bunları yapmanıza gerek olmadığını ve aynı zamanda iyi bir kaynak sayfası olarak hizmet etmenize yardımcı olabilir.
Aşağıda favicon ile ilgili kaynaklar içeren büyük bir liste paylaşıyorum. Bu nedenle, ileride başvurmak üzere bu sayfaya yer işareti koymayı düşünün. Oh, ve eğer yaparsanız, yer işareti listenizde WDD favicon'ına dikkat edin;)
Sadece bir tasarımcı ya da favicon-sanatta herhangi bir türden kara kuşak olmadığınızı düşünürseniz, bu makale muhtemelen 16 16 16 piksel olan bu zorlu kareler hakkında bilmeniz gereken her şeyi ve hatta bazı ilginç lehçeleri de kapsar. . Tadını çıkar!
Faviconlar, web tarayıcısı tarafından, tarayıcının adres çubuğunun sol tarafında ziyaret edilen sitenin grafiksel bir temsilini göstermek için kullanılan, genellikle 16 × 16 piksellik küçük kare görüntülerdir. Ne olduklarını bilmiyor olsanız bile, daha önce çok sayıda favicon görmüşsünüzdür. Şüpheniz varsa, aşağıdaki resim yardımcı olacaktır.
Google Chrome sekmeli tarayıcısında iki örnek favicon.
İnternet geçmişini anlamakla ilgileniyorsanız, ilginç bir gerçek:
Favicon kelimesi “favori” ve “simge” sözcüklerinden oluşan bir portamentau'dur ve ilk olarak Microsoft'un Internet Explorer 5'i tarafından desteklendiği ve IE'yi kullanmamanız durumunda, bu tarayıcı yer imi özelliği olarak adlandırılmıştır. favoriler denir.
İnternetin ilk günlerinde, Google Analytics gibi araçlar birkaç web kullanıcısının akıllarında sadece birer rüyalardı. Bu nedenle, kulağa garip gelse de, web sitesi trafiğini tahmin etmek için faviconlar kullanıldı. Sayfayı işaretleyen ziyaretçilerin sayısını saymak. (İnternet tarihinin başka bir ilginç pasajı!)
Ancak ilginç gerçekleri bir yana, günümüzde favicon'lara sahip olmanın temel nedeni kullanıcı deneyimini iyileştirmektir. Faviconlar, tüm modern tarayıcılarda adres çubuğunda, bağlantı çubuğunda, yer imi alanında ve tarama sekmelerinde kullanılır. Bunun yanı sıra, masaüstünüzdeki ve mobil cihazınızdaki ilgili web sitesi için bir kısayol bağlantısı oluşturduğunuzda, birkaç tarayıcı da favicons gösterir.
Şüphesiz, bir favicon sahibi olmanın temel nedeni, kullanıcı deneyimindeki bariz iyileştirmedir. Tek bir web sitesi, yukarıda bahsettiğim tüm etkileşim noktaları üzerinde genel bir tarayıcı sembolü gösterecek ve kullanıcı deneyiminizi önemsediğinizde, favişleri önemsemelisiniz.
Ancak markalaşma, uzmanlık alanım sayesinde bir şeyleri görmekten kaçınamıyorum, bu yüzden faviconların marka bakış açısından daha uygun olduğunu düşünüyorum. Yine, pek çok etkileşim noktasıyla, onları marka bilincini artırmak için kullanmamak bir suçtur. Gerçek şu ki, çevrimiçi markanızı geliştirmek için yaratıcı yollar bulmak her zaman zorlu bir iştir ve bir favicon'a sahip olmak bunun kolay ve basit bir yoludur. Kendine bir arkadaşımı al!
Bir web sitesi favicon oluşturmak pasta gibi kolaydır. Aslına bakarsanız, bunu yapmak için bir tasarımcı olmanıza bile gerek yok. Eğer becerilerinizi işe yarayacak ve gerçekten göze çarpan bir şey yaratabildiğinizden emin olabilirsiniz, ama daha az teknoloji meraklısı bile doğru araçları kullanarak 5 dakika ya da daha az bir sürede bunu yapabilir.
Aşağıdaki listede bulunan web siteleri, önceden varolan bir resmi yükleyerek bir favicon oluşturmanıza olanak tanır. Yani markanız için bir favicon oluşturmak istiyorsanız, yapmanız gereken tek şey logonuzu aşağıdaki sitelere yüklemek ve favicon dosyasını indirmek. Kolay peasy, limon squeezy.
İşte aradığınız Favicon jeneratör listesi:
Yukarıdaki web siteleri elde ettiğiniz sonuç açısından çok farklıdır; özellikle dosya boyutu ve uzantısı açısından. Mümkün olan en uyumlu dosyayı elde etmek istiyorsanız, “ico” formatında 16 × 16 boyutunda bir görüntüyü indirmenizi tavsiye ederim.
İlhama ihtiyacınız varsa, aşağıdaki favicon galerilerini kontrol etmeyi deneyin:
Favicon'unuzu dikkatli bir şekilde tasarladıktan sonra, sunucunuza yüklemek iki kolay adımda birkaç dakikadan fazla sürmemelidir. Bunun için web sitenizin kök klasörüne ve web sitenizin HTML kodunu değiştirmek için bir metin düzenleme aracına erişmeniz gerekir.
“Favicon.ico” dosyasını sunucunuza yüklemeniz gerekir. Bunu yapmak için tarayıcınızın adres çubuğunu FTP sunucunuza yönlendirin; URL’niz buna benzer görünmelidir:
ftp://[email protected]
Enter tuşuna basın ve tarayıcı dosya sunucusuna erişim vermeden önce bir kullanıcı adı ve şifre isteyecektir. Giriş yaptıktan sonra "favicon.ico" dosyasını kök klasöre yüklemeniz yeterlidir.
Artık, tarayıcıların favicon resminizi bulmasına yardımcı olmak için web sitenizin HTML sayfasını düzenlemeniz gerekiyor. FTP pencerenizi açık tutun, sunucunuzdan “index.html” veya “header.php” dosyasını bulun ve indirin ve aldığınız dosyaya göre aşağıdaki adımları izleyin:
Web siteniz düz HTML'den yapılmışsa, aşağıdaki kodu "index.html" dosyasının HEAD alanına ekleyin ve kendi web sitesi adresiniz için "sitenizi.com" olarak değiştirmeyi unutmayın.
WordPress kullanıyorsanız, aşağıdaki kodu “header.php” dosyanızın HEAD alanına yerleştirin.
Bu işlemle, dosyayı aldığınız yere geri yükleyin. Sen bittin!
Nitekim, çoğu modern tarayıcı favicon dosyanızı herhangi bir kod parçası olmadan bile bulabilecek kadar akıllıdır, ancak sadece favicon görüntüsü 16 × 16 piksele sahip olduğu sürece “favicon.ico” olarak adlandırılmıştır ve web sitesi klasörünüzün kök klasörüne kaydedilir.
Favicon'unuzu oluşturmanıza yardımcı olacak pek çok araçla, neden zorlu bir yola girip Photoshop'ta oluşturmak istiyorsunuz? Eh, eğer bir tasarımcıysanız ve favicon'unuzdan en iyi şekilde yararlanmak istiyorsanız, kesinlikle bunu yapmanın profesyonel yolu budur. Buradaki hile, Photoshop'un “ico” dosyalarını yerel olarak desteklememesidir. Bu eklentiyi Telegraphics'den indirin .
Aşağıdaki eğiticiyi izlemeden önce kurduğunuzdan emin olun. Photoshop onsuz çalışmayacak.
Eklentinin yüklü olduğunu onaylamak için Photoshop “Farklı Kaydet” kutusundaki “ICO” seçeneğine bakın.
Photoshop'ta “Dosya” ve aşağıdaki “Yeni” seçenek öğesini seçerek yeni bir belge oluşturun ve ardından kancanızı 64 × 64 piksel olarak ayarlayın. Niye ya? 16 × 16 final favicon boyutunun çok küçük olması nedeniyle, üzerinde çalışmak için daha büyük bir branda olması, yaratıcı meyve suyunuzun akmasını sağlar. Ardından logonuzu dokümana yapıştırın ve sihirli tek boynuzlu at-yaratıcı gücünüzü serbest bırakın.
İşiniz bittiğinde, “Görüntü” menüsünü ve aşağıdaki “Görüntü Boyutu” seçeneğini seçip resmi 16 × 16 piksele indirmeniz yeterlidir. “Resample Image” seçeneğine tıklamayı ve “Bicubic Sharper” ı seçmeyi unutmayın; bu, yeniden boyutlandırıldığında görüntünün bulanıklaşmamasını sağlamaktır. Son sonucu beğenmediyseniz, “AltCtrl / AltCmd + Z” ile yaptığınız son değişiklikleri hemen geri alın ve mutlu oluncaya kadar tasarım üzerinde çalışmaya devam edin.
Favicon'unuzu bitirmek için yapmanız gereken tek şey “File” (Dosya) ve “Save As” (Farklı Kaydet) seçeneklerine tıklamaktır. Burada dosyanızı “favicon.ico” olarak adlandırabilirsiniz. Bir kez daha, iş bitti!
Favicons'lar genellikle çok fazla dikkat etmediğimiz küçük şeylerden bir tanesidir, fakat gerçek şu ki, önemsiz olmaktan çok uzaktırlar, hem web arayüzü açısından hem de bir markalama noktasından, web'in çok önemli bir parçasıdırlar. arasında görünümü.
Bazıları, büyük şeylerin küçük boyutlarda geldiğini söylüyor ve bence faviconlar için de geçerli, çünkü her zaman müşterinin sitesine ait olsa bile müşterilerinin sitelerine favicon eklemeye zaman ayıran web tasarımcıları ve / veya marka uzmanları. Bir favicon'un ne olduğu fikri, büyük bir profesyonellik ve detaylara dikkati gösterir; Her müşterinin takdir ettiği kalite.
Müşterileriniz için favicons oluşturuyor musunuz? Çok az ödül için çok fazla sorun mu var? Yorumlarınız ile düşüncelerinizi öğrenmemize izin verin.
Öne çıkan görsel / küçük resim, şaşkın görüntü Shutterstock üzerinden