JSF

JSF Dersleri-Favicon Kullanılması

Merhaba arkadaşlar. Bu yazıda tarayıcıdaki sekmemizde nasıl sayfamıza ait resim (favicon) gösterebileceğimizi öğreneceğiz.

İlk olarak yapmamız gereken NetBeans kullanıyorsanız Web Pages altına, Eclipse kullanıyorsanız WebApp altına resources adında bir klasör açmamızdır. Bu klasörü açtıktan sonra içine bir de images adında klasör açalım ve tabda görünmesini, favicon olmasını istediğimiz resmi klasöre koyalım.

Ben bu yazı için şu resmi favicon olarak seçtim:

kod5

Xhtml sayfamız içinde herhangi bir şey yapmadan önce tarayıcıdaki sekmemizde Apache Tom EE Sunucusunun logosu görünüyor.

Screen Shot 2015-08-28 at 15.43.53

index.xhtml

Bir xhtml sayfamızda favicon kullanabilmek için yapmamız gereken head etiketleri arasında link etiketini kullanmaktır. Bu etiketin rel özelliğine ne tanımlamak istediğimiz belirtiyoruz. Örneğin bu rel özelliği ile CSS tanımlaması da yapabilirsiniz. Biz favicon kullanacağımız için shortcut icon ataması yapıyoruz. Type özelliğine tanımlamak istediğimiz şeyin türünü belirtiyoruz. Biz image/x-icon türünde olacağını söyledik. Href özelliğine de resmin nerede olduğunu söylüyoruz. Biz bir resources klasörü altındaki images klasörüne resmimizi koyduğumuz için href içindeki resource ifadesi ile resources klasörü altını tarayacak.  Köşeli parantezler arasında tek tırnak içinde resmin resources altındaki yolunu söylüyoruz.

Bunun dışında resources tanımlamadan direk Web Pages altında images tanımlayıp resmi onun içine atabilirdik. O zaman href’e direk images/kod5.png atamasını yapmamız da yeterli olurdu. Resources klasörü tanımlamak css,resim dosyalari vs. gibi dosyaların daha düzenli tutulmasını sağlar ve daha kullanışlı olur.

Screen Shot 2015-08-28 at 16.00.03

Gördüğünüz gibi belirlediğim resim sekmede favicon olarak görünüyor.

Hepsi bu kadar arkadaşlar. 🙂 Başka bir yazıda görüşmek üzere sağlıcakla kalın.