Favicon Nedir? Nasıl oluşturulur?

Eğer dikkatlice bakarsanız bazı sitelere girdiğimizde adres çubuğunda küçük resimcikler olur. Örnek olarak Google’ın faviconu  budur. Eğer yeni nesil bir Web Tarayıcısı kullanıyorsanız. Bu sizin daha da ilginizi çekecektir. Şimdi favicon hakkında birkaç şey daha öğrenip, basitçe bir favicon’u nasıl yapabileceğimizi görelim.

Favicon’un Anlamı

Favicon, Favourite Icon yani favori ikon’un kısaltılmışıdır ve sitelerin kendilerini belirlemeleri için ufak bir süstür. Bir Favicon ziyaretçinin adres çubuğunda görebileceği ve bookmark (yerimlerine) sizi eklediğinde de görünecek siteniz için bir çeşit logodur. Favicon dosyaları 16×16 px olan .ico dosyalarıdır ama yeni nesil tarayıcılar artık png veya gif formatlarını da favicon olarak gösterebilmektedirler. Yine de bana sorarsanız bütün tarayıcılarda görünmesi açısından 16×16 px olarak oluşturduğunuz ico dosyasını kullanmanız daha mantıklı olur.
Bu Faviconlar Tarayıcılarda nasıl görünüyor diye düşünüyorsanız. Bir kaç örnek vermek istiyorum. Aşağıdaki resimlere bakarak faviconların nasıl göründüğü hakkında fikir edinebilirsiniz.

 

Favicon Nasıl Oluşturulur?

Bir resim düzenleme programı aracılığıyla kendinize bir logo düzenleyin. Ondan sonra http://www.favicon.cc/ sitesine gidin. Buraya gitmemizin sebebi site yaptığınız resim dosyasını kendi içinde ico ya döndürebiliyor. Bu da bize zaman kazandırıyor. Siteye girdiğinizde Sol menüdeki Import Image‘a tıklayın. Gelen ekranda Ortadaki Image File altındaki Dosya Seç‘e tıklayın ve demin yaptığınız logoyu seçin. (Logonun dosya türü  jpg, jpeg, gif, png, bmp türlerinden biri olmalı yoksa dönüştüremez) Burada Keep dimensions‘ı seçili bırakırsanız. Boyutu aynı tutup çevirim yapacaktır. Zaten yaptığınız logo dosyası kareyse yani pikselleri eşitse (16x16px yada 100x100px gibi) bunu seçin. Eğer dikdörtgen bir logo yapmışsanız Shrink to square icon‘u seçin ki Logoyu kenarlardan kesmek yerine karenin içine koyabilsin. Dediğim ayarları yapmışsanız Upload’a tıklayabilirsiniz. Dediklerimi yaptığınız taktirde aşağıdaki gibi bir sonuç elde edeceksiniz.

Burada aşağıdaki Download Favicon’a basıp ico dosyanızı bilgisayarınıza atın.

 

Favicon’u Siteye Entegre Etme

Şimdi sıra yaptığımız favicon’u siteye eklemeye geldi. Biraz önce indirdiğiniz dosyayı Bir FTP programı aracılığıyla sitenizin yada temanızın kök klasörüne atın. Eğer FTP adresiniz yoksa FTP account u olan bir arkadaşınıza da rica edebilirsiniz. Hareketli faviconlar için böyle bir şey yok çünkü onlar gif uzantılı olduğundan doğrudan istediğiniz yere atabiliyorsunuz. Şimdi hangi kodları nereye yazmanız gerektiğine gelelim. Favicon ile ilgili kodlar <head> … </head> başlıkları arasına yazılır. Ben hemen <head> in altına yazıyorum. Gerekli yerleşim hemen alttadır.

<link rel="shortcut icon" href="http://www.websiteniz.com/favicon.ico" />

Hareketli faviconları büyük sitelerin çoğu kullanmıyor. Bu yüzden onun kodunu yukarı eklemedim ama siz bir hareketli favicon yapmışsanız onun içinde bu kodların altına aşağıdaki kodu eklemelisiniz.

<link rel="icon" href="http://www.websiteniz.com/favicon.gif" type="image/gif" />

Eğer favicon’u siteniz kök dizinine atmışsanız. Href in karşısına favicon.ico yani icon dosyanızın tam adını yazmanız yeterlidir. Eğer hareketli bir ikon yapmışsanız aşağıdaki kod’a favicon.ico yerine favicon.gif yazılmalıdır. Örnek gösterimler aşağıdadır. Eğer WordPress kullanıyorsanız. WP’nin kurulu olduğu kök dizine favicon’unuzu atıp aşağıdaki kodu temanız içindeki header.php içinde olması gereken yere yazarsanız favicon doğru olarak çalışmaktadır.

<link rel="shortcut icon" href="favicon.ico" />
<!-- Eger Hareketli Favicon dosyaniz varsa asagidakini de ekleyin -->
<link rel="icon" href="favicon.gif" type="image/gif" />

Umarım yazı işinize yarar. Sorun yaşadığınız bir yer olursa bize yorum aracılığıyla ulaşabilirsiniz.

DAHA FAZLA İÇERİK

RAM Nedir? Neden Bozulur? RAM Nedir? Neden Bozulur?

24 Aralık 2015, Perşembe

SİZDE YORUM YAPIN

5G Neden Bu Kadar Önemli?

5G Neden Bu Kadar Önemli? 17 Nisan 2015, Cuma

4G Ne Zaman Başlayacak

4G Ne Zaman Başlayacak 15 Nisan 2015, Çarşamba

Android Öğreniyorum Android Dersleri

Android Öğreniyorum Android Dersleri 5 Mayıs 2016, Perşembe