Monday, November 23, 2009

Cara merubah icon url pada blog (favicon)

12:04 PM

Sudah tahu yang namanya favicon? Kalau belum, favicon adalah ikon kecil yang muncul di pojok kiri address bar dan pojok kiri tab. Secara default favicon blog berbasis Blogger/Blogspot adalah simbol B dengan background jingga. Tentunya anda ingin punya favicon sendiri untuk branding blog anda kan? Bagaimana cara membuat favicon yang gampang, lalu menampilkannya di blog? Ikuti langkah-langkahnya.

  • Pertama-tama anda haruslah memiliki gambar untuk favicon. Untuk anda yang memiliki keterampilan grafis, bisa membuat sebuah logo dengan menggunakan software Adobe Photoshop, Corel Draw atau software lainnya yang anda kuasai, di export ke format .gif atau .png atau .jpg . Jika anda tidak memiliki keterampilan grafis, maka bisa juga mencari icon gratis di google atau bahkan bisa juga menggunakan foto anda sendiri.
  • Setelah gambar/icon dipersiapkan, uploadlah file tersebut ke website FavIcon from Pics. Browse lah gambar yang telah disiapkan, Lalu klik “Generate Favicon.ico” Lihat gambar dibawah ini :
image
Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".
image
Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis seperti Google Pages, atau Photobucket.
Sekarang, login ke Blogger anda, Pilih Layout lalu klik Edit HTML.
Copy kode di bawah ini:
<link href='http://i576.photobucket.com/albums/ss209/kwangkxz/animated_favicon1.gif' rel='icon' type='image/gif'/>
Sebelumnya, rubahlah kode diatas yg berwarna merah, dengan link anda, Lalu paste persis di bawah baris kode berikut:
<b:include data="blog" name="all-head-content"/>
diatas kode ini :
<b:skin><![CDATA[
seperti gambar dibawah ini :
image

Setelah anda merubah alamat URL favicon dengan URL tempat anda menyimpan file favicon di file hosting. Lihat gambar di atas, Perhatikan, bagian yang di highlight adalah contoh URL yang telah diubah. Periksa lagi apakah alamat URL sudah benar.
Jika sudah klik Save Template dan lihat hasilnya.
Jika favicon belum muncul, refresh dahulu browsernya.
Selamat mencoba ! dan semoga informasi ini bermanfaat buat anda semua.
Terimakasih

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

7 komentar:

  1. mantap masss !!!
    berkunjung ke blogku yh

    ReplyDelete
  2. ya sama-sama,
    okeh deh sheevara meluncur ke blogmu ..
    heheheh

    ReplyDelete
  3. Aqilah said :

    mas kmarin blog aq masih kacau, skrg udah agak baekan...

    boleh meluncur sekali lgi gk ke blog aQ tuk ngasih input membangun gitu dehh,,,hehe wajar mas aQ pemuLa soaLee...

    ReplyDelete
  4. iya kemarin aq kesana gak bisa bisa post comment ,
    oke ke TKP langsung ... hehhe

    ReplyDelete
  5. said : ntu dya masalhx...aQ gk tau coding post comment...ada contoh scrypt ??? bagi ahhh...

    ReplyDelete
  6. gan...
    ko gw gk bisa masuk ke website FavIcon from Pics. ??
    gw pgn gntii logo'a nih..
    ada yang lain gk slain itu...

    plissssss :D
    makasiih

    ReplyDelete
  7. @arifki

    coba masuk ke situs ini http://www.favicongenerator.com

    ReplyDelete

Jika berkenan dan artikel ini bermanfaat tolong tinggalkan satu dua patah kata untuk membangun blog ini kearah yang lebih baik

 

© 2013 Setiawan Fajar Faluphi. All rights resevered. Designed by Templateism

Back To Top