simgesine tıklayarak ilginizi çeken yazıları site içi favorilerinize ekleyebilirsiniz.
Bazı web sayfalarının adreslerinin hemen başında özel ikonların bulunduğunu mutlaka fark etmişsinizdir. Siz de blog’unuz için bunlardan bir tane hazırlayabilirsiniz. Bunun için sadece bir fotoğraf düzenleme programı ve biraz yaratıcılığa ihtiyacınız var. Hatta işin yaratıcılık kısmı ile ilgilenmiyorsanız web üzerinde hazır bir çok ikona ulaşabilir ve onlardan beğendiklerinizi de kullanabilirsiniz.
Favicon dosyasının özellikleri
Favicon terimi İngilizce “Favorites Icon”dan kısaltılmıştır. Bu favicon dosyası blog’unuz ziyaret edildiğinde adres satırında belireceği gibi adresiniz sık kullanılanlara eklendiğinde de blog adınızın baş kısmında görünecektir. Favicon dosyası 16×16 piksel boyutlarında .ico uzantılı bir grafik dosyasıdır. Modern web tarayıcıları artık .gif ve .png uzantılı dosyaları da favicon olarak gösterebilmektedirler.
Nasıl oluşturulur?
Hazırlama işlemini yaygın kullanıma sahip Photoshop kullanarak anlatacağım. Eğer sizde Photoshop kullanacaksanız ve dosyanızı .ico uzantısı ile kaydedecekseniz gerekli plug-in’i aşağıdaki adresten indirmelisiniz;
Favicon dosyanızı .ico dışındaki formatlarda hazırlayacaksanız bu plug-in’e ihtiyacınız olmayacak.
16×16 piksellik bir alanda çalışmak kolay olmayacağından 64×64’lük bir çalışma alanı kullanmak daha akıllıca olacaktır. Alanı “File > New” (ya da CTRL+N) ile açılacak menüden ayarladıktan sonra tasarımınız uygulayın. Tasarım ile işiniz bitikten sonra “Image > Image” size ile açılacak menüden “Width” ve “Height” değerlerinin her ikisi için 16 girin ve en alttaki “Resample Image” bölmünde “Bicubic Sharper”ı seçin ve uygulayın. Eğer yeni görüntü hoşunuza gitmezse işlemleri “Bicubic Smoother” seçerek tekrarlayın.
Görüntüden tatmin olduğunuzda “File > Save” seçeneği ile dosya kaydetme menüsünü açın ve oradan .ico, .png veya .gif formatlarından birisini seçerek “favicon” olarak kaydedin. Eğer .ico olarak kaydetmek istiyorsanız üstte bahsedilen adresteki plug-in’i yüklemeniz gerektiğini unutmayın, aksi takdirde seçenekler arasında .ico formatını göremezsiniz.
Favicon’un yerleştirilmesi
Oluşturduğunuz (veya internetten bulduğunuz) favicon dosyasını sunucunuzun kök dizinine gönderin. Eğer kendi sunucunuz yoksa, diğer bir ifade ile blog’unuz ücretsiz bir sunucu üzerinde ise, yine ücretsiz olan grafik sunucularından faydalanabilirsiniz (örneğin; imageshack.us). Ama bu durumda favicon dosyanızı .png veya .gif olarak kaydetmeniz gerekecektir, çünkü ücretsiz resim sunucularının çoğu .ico desteği vermiyor.
Favicon dosyanızı bir suncuya göderdikten sonra adresini alın ve aşağıdaki gibi bir kod oluşturun. Favicon dosyanızı kendi sunucunuza gönderdiyseniz kodunuz şu şekilde olacaktır;
<link rel="shortcut icon" href="/favicon.ico">
Eğer ücretsiz bir sunucu kullandıysanız (örnekte imageshack.us kullanılmış) kodunuz şu şekilde olmalıdır;
<link rel="shortcut icon" href="http://img381.imageshack.us/img381/2363/favicon0nx.png">
Son işlem olarak oluşturduğunuz bu kodu kopyalayın ve tasarım şablonunuzun HTML kodu içerisinde <HEAD> etiketinin altına yapıştırın ve kaydedin. Şablonunuzu güncelledikten sonra favicon’unuz adresinizle birlikte görünmeye başlayacaktır.
Kolay gelsin.
Kaynaklar;
Yorumunuz gönderiliyor...
20 October 2005, 7:37 pm
İşte tam da bunu yapmayı istiyordum…
Teşekkür ederim,çok faydalı oldu…
Bizi bilgilendirmeye devam edin (:
21 October 2005, 9:35 pm
Cok guzel yazmissiniz. Photoshopla ugrasmak istemeyenler icin ben de asagidaki favicon generatoru oneriyorum.
chami.com/html-kit/services/favicon/
21 October 2005, 11:54 pm
Kullanışlı bir araç, kodun oluşturulması için de bilgi verilmiş. Keşke yazmadan önce rastlasaymışım :)
Teşekkürler.
24 November 2005, 2:32 am
teşekkürler, gerçekten işime yaradı, tam istediğim gibi.
24 November 2005, 3:40 pm
merhaba sitede yapılanları uygulayarak gif olarak bire favicon oluşturdum.Büyük ihtimal kodu yanlış yere eklediğimden explorerda resmim gözükmüyo. mail adresinize mail atıyorum.yardımcı olursanız sevinirim. Site için teşekkürler…
17 August 2006, 1:08 am
Sunucunun kök dizinini ile neyi anlatıyorsnuz ,biraz acemiyim de açıklayabiilirmisiniz?Benim blog WordPress’te nası yapacaz bu favicon işini…
17 August 2006, 11:34 pm
WordPress’te temanızın header.php (üst kısım) dosyasında düzenleme yaparak favicon elde edebilirsiniz. header.php dosyasının ilk satırlarında “meta name” ile başlayan satırlardan sonra “link rel” ile başlayan yazılar vardır. O kısma yazıda belirtildiği şekilde faviconun adresini kod halinde ekleyin.
Sunucunun kök dizini WordPress’te wp-admin, wp-content, wp-includes klasörlerinin de bulunduğu dizindir.
27 September 2006, 3:52 am
Sevgili Ali;
Zaman zaman blogunda okumadığım yer varmı diye karıştırırken FAVİCON meselesine takıldım. Yeni Beta Blogger da denedim ama olmadı. Senin tarifin nefis ancak Yeni Beta Blogger da nasıl yapılması gerekiyor tarif edersen sevinirim.Ara sıra başına bela oluyorum bencileyin ihtiyar bir adamım kusura bakma.Sevgi ve sağlıkla kal
16 January 2007, 10:58 pm
Tşk. ederim Elinize Saglık Bilgi Verdiginiz için
29 January 2007, 8:26 pm
alinin yazısı , denizutkunun program linki ve teknoseyirin kodu nereye ekleyecegimi bildirmesi yorumlardan , artık benimde bir faviconum var.
5 February 2007, 9:13 pm
evet.. gerçekten de new ( beta ) blogger’ da bunu nasıl yapıyoruz.. dahası yeni templatelerde.. eski templatelerde oluyordu ( yani klasik templatelerde oluyor.. ) ama beta versiyon ( new ) templatelerde yapamadım ben de.. yardımcı olur musunuz.. yazınızda bunu belirtseniz çok güzel olur.. çünkü klasik template de bunu yaptığımda sizden gördüğüm bu yazı ile yapmıştım.. ama beta tarzı tempalterlde ( beta,new ne diyceimi şaşırdım :D ) olmuyor… şimdiden teşekkür ederim..
2 April 2007, 2:49 am
Çok güzel bir döküman olmuş. Blogcu kullanıcısıyım, dener denemez çalıştır. Gayet hoş oldu. Bu faydalı döküman için teşekkürler.
4 April 2007, 2:11 pm
Son işlem olarak oluşturduğunuz bu kodu kopyalayın ve tasarım şablonunuzun HTML kodu içerisinde etiketinin altına yapıştırın ve kaydedin. Şablonunuzu güncelledikten sonra favicon’unuz adresinizle birlikte görünmeye başlayacaktır.
bunu açarmısın kardeşim
7 April 2007, 5:52 pm
WordPress günlüklerine favicon eklemek için bir eklenti yaptım. Bu konuyu burada görünce yazayım dedim. Bu eklentiyi deneme amaçlı yaptım. Eğer siz de denemek isterseniz http://comodos.110mb.com adresinden eklenti hakkında bilgi alabilir ve indirebilirsiniz.
10 April 2007, 7:28 pm
Terbrik ederim gerçekten son derece detaylı ve güzel bir döküman olmuş emeğine sağlık.
favicon.ico dosyasını oluşturamayanlar aşağıdaki linke girin ve bilgisayarınzda bulunan herhangi bir formata sahip resmi yükleyin resim dosyası otomotik olatak favicon.ico formatına dönüşecektir.
http://www.html-kit.com/favicon/
8 May 2007, 8:57 pm
selam,
site adi yazildigi zaman yaninda o siteye ozgu cikan ikonlara bayiliyordum…amator bir web tasarimcisi olarak ben de adimin yanina yaptiklarimla ozdes bir ikonum olsun istedim…
google’dan da size ulastim…
icerik olarak bana cana yakin ve samimi geldi siteniz.
sabahtan beri de zaman zaman ugrasiyorum ikon isiyle…
simdi ogrenmek istedigim:
“ikonadi.gif” dosyasini 16x16px olarak photoshopta hazirladim:
hosting firmasi da bana o dosyayi “httpdocs”kok dizinine(sizin tabiriniz ile…)yolladim…tabii hic bisi olmadi!…
ben o dosyayi nereye baglayacagim?:o verdiginiz html kodunu da soyle hazirladigimi dusunelim:
nereye yazacagim ben bu kodu?
hosca kalin!…
31 May 2007, 9:39 am
Bende dökümanınızdan faydalanıp sitem için bir tane hazırladım. İE7 de çıkmıyor nedense ama firefoxta gözüküyor. Paylaşım için teşekkürler. Semih
14 July 2007, 1:50 pm
eline sağlık güzel bilgi, bende Ave Iconifier2 tavsiye edeyim :P
9 September 2007, 2:34 pm
gerçekten güzel bir yazı olmuş.Klavyeye basan ellerine sağlık;=}
11 October 2007, 4:48 pm
Yaptığım favicon mozilla firefoxta çalışıyor ama internet explorerda çalışmıyor.Sadece bende değil sayfamın linkini başkasında yolladım ondada internet explorerda gözükmemiş ama operayla açınca gözükmüş. İnternet explorerda nasıl aktif hale gelecek asıl önemlisi internet explorerda gözükmesi. teşekkürler..
15 October 2007, 12:41 am
localde olmuyor sanırım bu?
yada İE demi görünmüyor anlamadım bir türlü?
14 November 2007, 2:35 am
konu ile ilgili çok siteden bilgi alıp uygulamaya çalıştım. ama her nedense sizin verdiğiniz bilgilerle başarıya ulaştım.
sonsuz teşekkürlerimle
21 May 2008, 7:32 pm
Blogger da bu işlem nasıl olacak, uyguladığımızda sorun yaşadık. Nasıl etmeli?
26 September 2008, 4:04 am
güzel bilgi olmuş teşekkürler
27 October 2008, 3:50 pm
Arkadaşlar Hazır icon olan site bilen yokmu hiç ? Harf iconlari olan ?
15 June 2009, 10:32 pm
dediklerinizin hepsini yaptım ama olamadı. wordpress kullanıyorum header bölümüne link reel kodu yapıştırdım fakat görünmüyor. Yardımcı olabilirseniz sevinirim.
Ayrıca faydalı bilgiler verdiğiniz için teşekürler
19 June 2010, 8:40 pm
Teşekkür ederim, aynen söylediklerinizi yaparak kendime bir favicon oluşturdum :)
17 March 2011, 12:43 am
Çok teşekkür ederim,yapabileceğimden kuşkuluydum fakat oldu.Sade anlatım için tekrar teşekkürler :)
7 September 2011, 10:39 am
Yaptım ama olmadı ,sorun ,eksiklik ne olabilir acaba .Şu anda WordPress ‘Twenty Eleven’ üst kısım yani header.php deyim .O kodu yapıştırdım dediğiniz yere ,online favicon generatorden indirdiğim :(( Bir yol ,bir ışık gösterin ne olur
8 September 2011, 9:35 pm
Teşekkürler.
11 March 2012, 3:22 pm
gerçekten çok yardımcı oldunuz teşekkür ederim ama yapttığım icon explorerde gözüküyor mozillada gözükmüyor
18 August 2014, 2:24 am
Beyler ben easy builder programı kullanıorum ve heat tagına nasıll gırıcemı bılmıorum yardımcı olurmusunuz verı tabanına gırıp ordan sız kod yazabılıosunuz ben nasıl gırıcegımı bılmıorum bır fıkrı olan varmı ?