Twitter'da takip et
Ana Sayfa

Baz? web sayfalar?n?n adreslerinin hemen ba??nda zel ikonlar?n bulundu?unu mutlaka fark etmi?sinizdir. Siz de blogunuz iin bunlardan bir tane haz?rlayabilirsiniz. Bunun iin sadece bir foto?raf dzenleme 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 Icondan k?salt?lm??t?r. Bu favicon dosyas? blogunuz 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 grnecektir. 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 gsterebilmektedirler.

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-ini a?a??daki adresten indirmelisiniz;

Favicon dosyan?z? .ico d???ndaki formatlarda haz?rlayacaksan?z bu plug-ine ihtiyac?n?z olmayacak.

16×16 piksellik bir alanda al??mak kolay olmayaca??ndan 64×64lk bir al??ma alan? kullanmak daha ak?ll?ca olacakt?r. Alan? “File > New” (ya da CTRL+N) ile a?lacak menden ayarlad?ktan sonra tasar?m?n?z uygulay?n. Tasar?m ile i?iniz bitikten sonra “Image > Image” size ile a?lacak menden “Width” ve “Height” de?erlerinin her ikisi iin 16 girin ve en alttaki “Resample Image” blmnde “Bicubic Sharper”? sein ve uygulay?n. E?er yeni grnt ho?unuza gitmezse i?lemleri “Bicubic Smoother” seerek tekrarlay?n.

Grntden tatmin oldu?unuzda “File > Save” seene?i ile dosya kaydetme mensn a?n ve oradan .ico, .png veya .gif formatlar?ndan birisini seerek “favicon” olarak kaydedin. E?er .ico olarak kaydetmek istiyorsan?z stte bahsedilen adresteki plug-ini yklemeniz gerekti?ini unutmay?n, aksi takdirde seenekler aras?nda .ico format?n? gremezsiniz.

Faviconun yerle?tirilmesi

Olu?turdu?unuz (veya internetten buldu?unuz) favicon dosyas?n? sunucunuzun kk dizinine gnderin. E?er kendi sunucunuz yoksa, di?er bir ifade ile blogunuz 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 gderdikten sonra adresini al?n ve a?a??daki gibi bir kod olu?turun. Favicon dosyan?z? kendi sunucunuza gnderdiyseniz 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 ierisinde <HEAD> etiketinin alt?na yap??t?r?n ve kaydedin. ?ablonunuzu gncelledikten sonra faviconunuz adresinizle birlikte grnmeye ba?layacakt?r.

Kolay gelsin.

Kaynaklar;

“Favicon nas?l olu?turulur?” başlıklı yazıya 36 yorum yapılmış

  1. s1m0ne demiş ki:
    20 October 2005, 7:37 pm

    ??te tam da bunu yapmay? istiyordum…
    Te?ekkr ederim,ok faydal? oldu…
    Bizi bilgilendirmeye devam edin (:

  2. denisutku demiş ki:
    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/

  3. ali demiş ki:
    21 October 2005, 11:54 pm

    Kullan??l? bir ara, kodun olu?turulmas? iin de bilgi verilmi?. Ke?ke yazmadan nce rastlasaym???m :)

    Te?ekkrler.

  4. Anonymous demiş ki:
    24 November 2005, 2:32 am

    te?ekkrler, gerekten i?ime yarad?, tam istedi?im gibi.

  5. Anonymous demiş ki:
    24 November 2005, 3:40 pm

    merhaba sitede yap?lanlar? uygulayarak gif olarak bire favicon olu?turdum.Byk ihtimal kodu yanl?? yere ekledi?imden explorerda resmim gzkmyo. mail adresinize mail at?yorum.yard?mc? olursan?z sevinirim. Site iin te?ekkrler…

  6. Cemil demiş ki:
    17 August 2006, 1:08 am

    Sunucunun kk dizinini ile neyi anlat?yorsnuz ,biraz acemiyim de a?klayabiilirmisiniz?Benim blog WordPress’te nas? yapacaz bu favicon i?ini…

  7. Bonjoka demiş ki:
    17 August 2006, 11:34 pm

    WordPresste teman?z?n header.php (st k?s?m) dosyas?nda dzenleme 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 kk dizini WordPresste wp-admin, wp-content, wp-includes klasrlerinin de bulundu?u dizindir.

  8. aziz (ihtiyar) demiş ki:
    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

  9. OrhaN demiş ki:
    16 January 2007, 10:58 pm

    T?k. ederim Elinize Sagl?k Bilgi Verdiginiz iin

  10. amarat demiş ki:
    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.

  11. ed-ad demiş ki:
    5 February 2007, 9:13 pm

    evet.. gerekten 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 gzel olur.. nk klasik template de bunu yapt???mda sizden grd?m bu yaz? ile yapm??t?m.. ama beta tarz? tempalterlde ( beta,new ne diyceimi ?a??rd?m :D ) olmuyor… ?imdiden te?ekkr ederim..

  12. atasagun demiş ki:
    2 April 2007, 2:49 am

    ok gzel bir dkman olmu?. Blogcu kullan?c?s?y?m, dener denemez al??t?r. Gayet ho? oldu. Bu faydal? dkman iin te?ekkrler.

  13. clone demiş ki:
    4 April 2007, 2:11 pm

    Son i?lem olarak olu?turdu?unuz bu kodu kopyalay?n ve tasar?m ?ablonunuzun HTML kodu ierisinde etiketinin alt?na yap??t?r?n ve kaydedin. ?ablonunuzu gncelledikten sonra faviconunuz adresinizle birlikte grnmeye ba?layacakt?r.

    bunu aarm?s?n karde?im

  14. o-kahn demiş ki:
    7 April 2007, 5:52 pm

    WordPress gnlklerine favicon eklemek iin bir eklenti yapt?m. Bu konuyu burada grnce yazay?m dedim. Bu eklentiyi deneme amal? yapt?m. E?er siz de denemek isterseniz http://comodos.110mb.com adresinden eklenti hakk?nda bilgi alabilir ve indirebilirsiniz.

  15. [email protected] demiş ki:
    10 April 2007, 7:28 pm

    Terbrik ederim gerekten son derece detayl? ve gzel bir dkman 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 ykleyin resim dosyas? otomotik olatak favicon.ico format?na dn?ecektir.

    http://www.html-kit.com/favicon/

  16. nilgun demiş ki:
    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!…

  17. semih demiş ki:
    31 May 2007, 9:39 am

    Bende dkman?n?zdan faydalan?p sitem iin bir tane haz?rlad?m. ?E7 de ?km?yor nedense ama firefoxta gzkyor. Payla??m iin te?ekkrler. Semih

  18. www.semih.gen.tr » Favicon olu?turma ve Sitenize favicon ekleme demiş ki:
    31 May 2007, 11:43 am

    […] yaz?da Acemi Blogcunun Favicon nas?l olu?turulur yaz?s?ndan faydalan?lm??t?r. Daha kapsaml? bir yaz?d?r okuman?z? tavsiye […]

  19. xpur.com demiş ki:
    14 July 2007, 1:50 pm

    eline sa?l?k gzel bilgi, bende Ave Iconifier2 tavsiye edeyim :P

  20. SablonTrk demiş ki:
    9 September 2007, 2:34 pm

    gerekten gzel bir yaz? olmu?.Klavyeye basan ellerine sa?l?k;=}

  21. Ferhat demiş ki:
    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 gzkmemi? ama operayla a?nca gzkm?. ?nternet explorerda nas?l aktif hale gelecek as?l nemlisi internet explorerda gzkmesi. te?ekkrler..

  22. Neo demiş ki:
    15 October 2007, 12:41 am

    localde olmuyor san?r?m bu?
    yada ?E demi grnmyor anlamad?m bir trl?

  23. Batcio demiş ki:
    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?ekkrlerimle

  24. atasagun demiş ki:
    21 May 2008, 7:32 pm

    Blogger da bu i?lem nas?l olacak, uygulad???m?zda sorun ya?ad?k. Nas?l etmeli?

  25. mertheper demiş ki:
    26 September 2008, 4:04 am

    gzel bilgi olmu? te?ekkrler

  26. Yasin demiş ki:
    27 October 2008, 3:50 pm

    Arkada?lar Haz?r icon olan site bilen yokmu hi ? Harf iconlari olan ?

  27. Bir ka teknik bilgi « GENCANAL?Z.ORG demiş ki:
    19 December 2008, 2:19 pm

    […] gzken kk logo.E?er wordpress.com ‘un cretsiz blog hizmetini kullanm?yorsan?z buray? t?klayarak favicon hakk?nda ayr?nt?l? bilgi alabilirsiniz.Fakat benim gibi wordpress.com kullan?yorsan?z […]

  28. mehmet_44 demiş ki:
    15 June 2009, 10:32 pm

    dediklerinizin hepsini yapt?m ama olamad?. wordpress kullan?yorum header blmne link reel kodu yap??t?rd?m fakat grnmyor. Yard?mc? olabilirseniz sevinirim.
    Ayr?ca faydal? bilgiler verdi?iniz iin te?ekrler

  29. Tolga demiş ki:
    19 June 2010, 8:40 pm

    Te?ekkr ederim, aynen sylediklerinizi yaparak kendime bir favicon olu?turdum :)

  30. » Favicon olu?turma ve Sitenize favicon ekleme demiş ki:
    2 December 2010, 9:12 am

    […] yaz?da Acemi Blogcunun Favicon nas?l olu?turulur yaz?s?ndan faydalan?lm??t?r. Daha kapsaml? bir yaz?d?r okuman?z? tavsiye ederim. […]

  31. Erol demiş ki:
    17 March 2011, 12:43 am

    ok te?ekkr ederim,yapabilece?imden ku?kuluydum fakat oldu.Sade anlat?m iin tekrar te?ekkrler :)

  32. 45 Maddede Blog Yazarl???-1 « aoozdemir | teknorbit demiş ki:
    14 August 2011, 8:45 pm

    […] ve ieri?ini en iyi ?ekilde ifade edecek bir logo, favicon ve ileride reklam vermek iin kullanabilece?iniz bannerlar?n?z? mutlaka haz?rlat?n. […]

  33. Seil Soylu demiş ki:
    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 gsterin ne olur

  34. Yakup ??M?EK demiş ki:
    8 September 2011, 9:35 pm

    Te?ekkrler.

  35. Dusuncesiz demiş ki:
    11 March 2012, 3:22 pm

    gerekten ok yard?mc? oldunuz te?ekkr ederim ama yaptt???m icon explorerde gzkyor mozillada gzkmyor

  36. hasan ozturk demiş ki:
    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? ?

Görüşünüzü bildirin

XHTML: Bu etiketleri kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>