Web tasarımında, muhtemelen bildiğiniz gibi her ayrıntı önemlidir. Kaynağınıza geçiş yapan kişi, öğelerin her birini ayrı ayrı görmez, görüntünün tamamını diğer küçük ayrıntılardan oluşan bir paket olarak algılar. Bu nedenle, kaynağınızı geliştirme sürecinde bir şeyi kaçırırsanız, bu ayrıntı daha sonra tüm kompleksi, tüm kompozisyonu bozabilir.
Böyle bir önemsememek, örneğin bir düğmenin arka planı, bazı küçük öğelerin yanlış seçilmiş bir yazı tipi ve hatta bir favicon olabilir. Gerçekten de, kendiniz görün - büyük, iyi bilinen sitelerin, kullanıcının tarayıcısının "Yer İşaretleri" bölümünde bunu gösteren ayrı bir simgesi vardır. Onsuz, kaynağın geliştiricileri başlangıçta çabaladıkları kompozisyonu oluşturamazlardı.
Bu nedenle siteniz için bir tasarım oluştururken favicon gibi bir detaya dikkat etmelisiniz. Bu yazımızda kaynağın genel stiliyle nasıl eşleştirileceğinden ve bu görselin hangi boyutlarda olması gerektiğinden bahsedeceğiz.
Site simgesi
Önce bu elementin ne olduğunu tanımlayalım. Şimdi, tarayıcı sekmenizin başlığına bir göz atın. Gördüğünüz gibi, solunda kaynağın logosunun basitleştirilmiş bir versiyonunu gösteren küçük bir resim var. Aynı resim, arama sonuçlarında görüntülenen site adının yanındadır. Kullanıcı başlığı gördüğünde bu şekilde yönlendirilir.
Birçok web yöneticisi böyle bir resmin gerekli olduğunu anlıyor - ancak çok az kişi site için hangi favicon boyutunun en uygun olacağını biliyor. Bu yüzden bu yazımızda sadece böyle bir ikonun nasıl yapılacağı ve kaynağınıza nasıl yükleyebileceğiniz hakkında bilgi vermekle kalmayacak, aynı zamanda resim boyutlarından da bahsedeceğiz.
Favicon'un amacı
Yani, site başlığının yanındaki resim tanımlama için kullanılır. Asıl amacı bu: adını gördüğümüz siteyi ifade etmek ve diğerlerinin gözünde öne çıkarmak. Bu, grafiklerin kullanılmasıyla mümkün olduğunca basit bir şekilde yapılır: Resimlerdeki bilgileri metin biçiminden çok daha hızlı ve daha kolay sezgisel olarak algılarız. Favicons tam da bunu yapmamıza yardımcı oluyor. Ancak favicon'un boyutunun kullanıcının gözünde minimum olduğunu unutmayın. Bu, sitenin "başlığında" yer alan ve yazılar, bazı açıklamalar veya iletişim bilgileri şeklinde ek bilgiler içerebilecek bir logo değildir. İsmin yanındaki simgede görüntülenebilen her şey, mümkün olduğunca favicon boyutuna uygun olmalıdır. Ve daha önce belirtildiği gibi, sadece minyatür (sadece 16'ya 16 piksel).
Nasıl seçilirfavicon?
Öyleyse bir web yöneticisi, sitesi için nasıl bir simge tasarlayabilir? Site logosunu basitçe sıkıştırmanın çoğu zaman işe yaramayacağına dikkat edilmelidir. Belirli bir kaynağın logosu şeklinde yerleştirilen amblemlerde, genellikle minyatür bir biçimde her zaman doğru şekilde görüntülenmeyecek olan çeşitli öğeler görünür. Böyle bir girişimi derhal terk etmek daha iyidir.
Tabii ki, favicon'un boyutu, oraya sadece bir yazı eklemekten bahsetmeye izin vermiyor. Bu çözünürlükte herhangi bir metin görünmez olacaktır. Sitenin stilini yansıtacak yeni bir ikon geliştirmemiz gerekiyor. Çözüm bulmak için yine en büyük sitelere dönelim.
Birçok kişi, hizmet adının stilize edilmiş ilk harfini favicon olarak kullanır. Bu şekilde, örneğin, Bing, Yahoo, Yandex, Wikipedia, Google. Başka bir yaklaşım daha var - kısa bir site adınız varsa, onu simgenizin arka planı olarak ayarlayabilirsiniz. Favicon'un (ulaştığı piksel cinsinden, tekrar ediyorum, 16'ya 16 piksel) boyutunun bu yazıyı doğru bir şekilde gösterebilmesi için 3 harften uzun olmaması gerekir. Örneğin Aol hizmeti bunu yapar.
Favicon nasıl oluşturulur?
Site adı için simge oluşturmanın birkaç yolu vardır. Elbette en kolayı farklı hazır çözümlerle çalışmaktır. Tam teşekküllü bir görüntüden küçülterek bir simge yapmanızı sağlayan bazı hizmetlerden veya programlardan bahsedebiliriz. Ancak, böyle bir logoyu kendi başınıza geliştirmenizi tavsiye ederim. Bu öncelikle verecekbir şeyler öğrenme fırsatı; ve ikincisi, daha fazla araç sağlayacaktır. Bunun için bilmeniz gereken tek şey ne çizeceğiniz ve ayrıca son sürümde favicon'un hangi boyutta olması gerektiğini de bilmeniz. Sitenin simge boyutu hakkında biraz sonra konuşacağız, ancak şimdilik bu tür görüntülerle çalışmanın bazı inceliklerini not edeceğiz. Özellikle site için favicon boyutundan bahsetmeden böyle bir görselin formatı netleştirilmelidir. Deneyimli tasarımcıların belirttiği gibi, resim-p.webp
Resmi, örneğin, amblemin çizileceği Photoshop kullanarak kaydedebilirsiniz.
Favicon boyutları
O halde şimdi arama sonuçlarında site adının yanında gördüğümüz resmin ne kadar büyük olması gerektiğinden bahsedelim. Varsayılan olarak, daha önce de belirtildiği gibi, boyutu yalnızca 16 pikseldir (her iki tarafta). Ancak bu görüntüyü Photoshop'ta düzenlemeye çalışırsanız, bunun ne kadar sakıncalı olduğunu kendiniz göreceksiniz. Bu nedenle, gelecekte kenarlarından kolayca sıkıştırılabilecek ve gerekli biçimde kaydedilebilecek büyütülmüş bir resimle çalışmanızı öneririz.
Multiplatform
Ancak, sitenizde favicon'un ne kadar büyük olması gerektiğinden bahsetmişken, akılda tutulması gereken bir şey daha var. Tüm platformlar bir kaynak görüntüsünü aynı şekilde göstermez. Örneğin, Retina ekranlı cihazlar site simgenizi 32 x 32 piksel olarak "görür". Ve Safari'de ve yeni Windows platformunda ve bu simgeler 64 boyutuna ulaşıyor.piksel.
Bu nedenle, simgenin farklı sürümlerini kaydetmenizi ve gelecekte kullanıcının platformuna bağlı olarak değişmesini sağlamanızı öneririz. Bir başka ilginç nokta - tarayıcıya bağlı olarak "küçüleceği" gerçeğine güvenerek simgeyi en geniş biçimde yüklemeyi deneyebilirsiniz.
Dış editörler
Tabii ki Photoshop'ta iyiyseniz ve favicon'un hangi boyutta olması gerektiğini ve görüntünüzü kaydederken bunu nasıl elde edeceğinizi biliyorsanız bu iyidir. Ancak, daha önce grafik düzenleyicilerle bu kadar yakından karşılaşmamış, bu nedenle istenen görüntüyü bu kadar kolay çizemeyen birçok yeni başlayan kişi var. Bu tür web yöneticilerine yardımcı olmak için ilgilendiğiniz simgeyi otomatik olarak oluşturmanıza izin veren çeşitli hizmetler vardır. Hatta birçoğu ücretsizdir, bu da kullanıcıdan herhangi bir yatırım gerektirmez.
Bazen çalışmak için sadece kayıt olmanız gerekir, ancak anladığınız gibi, bu bir kez yapılır - sonuçta şirketler favicon'larını çok sık değiştirmezler. Her gün logosunu değiştiren ancak simgeye dokunmayan Google'a bir göz atın.
Favicon nasıl kurulur?
Genel olarak, sitenizi ihtiyacınız olan görseli doğru şekilde gösterecek şekilde ayarlamak çok basittir. Arama motorlarının yanı sıra basit tarayıcıların bilgileri okumasını sağlayacak bir dizi basit adımı gerçekleştirmeniz yeterlidir.
Bunu yapmak için, ortaya çıkan görüntü ile kaydedilmelidir.favicon.ico olarak adlandırılır ve kaynağınızın köküne yerleştirilir. İşte bu, şimdi resminiz otomatik olarak tanınacak ve bir süre sonra sitenize bağlanacak.
Bu bağlamaya ek olarak, simgenizin bulunduğu yeri "önerecek" bir satır daha ekleyebilirsiniz. Şuna benziyor:
Kodu sitenin başlığına yükleyin.
Sonuçlar
Yani, makalemizi okuduktan sonra, bir site için bir favicon'un ne boyutta olması gerektiğini ve ne olduğunu anladınız. Ayrıca, kaynağınız için doğru simgeyi bulmanın bir zorunluluk olduğunu anladığınızı düşünüyorum, çünkü hem tanınırlığı artırma hem de rakipleriniz arasında bazı ek öne çıkma açısından işinize yarayacaktır. En azından en büyük siteler aynı şeyi yapıyor, bu da en iyi örnek olarak alınabilir. Ayrıca, fazla çaba gerektirmez - bir kez favicon yapıp sitenize doğru bir şekilde yükledikten sonra, önümüzdeki birkaç ay boyunca onu unutabilirsiniz.
Bu nedenle, denemekten çekinmeyin, yeni bir şeyler bulun, deneyin - ve her şey yoluna girecek!
