Blog Dress Up: Favicon

Yippy!! Akhirnya sukses juga ngeganti Favicon di blogspot!

Oh yah, favicon itu adalah icon yang muncul di browser ato tab kalo kita masuk ke link tertentu. Kalo di blogspot, logo kuning kecil dengan huruf "B" warna putih itu lho

Gue berhasil mengganti favicon gue dengan sukses setelah googling dan mencoba beberapa sumber. Yah, maklum dari awam banget, jadi yah butuh beberapa kali trial and error deh hehehe..

Kalo ada yang mau baca dan nyoba, berikut cerita pengalaman gue membuat favicon..

Mempersiapkan Favicon
  • Buat gambar/logo yang mau dijadikan favicon. Sebaiknya buat dalam ukuran persegi, agar ketika dijadikan favicon, bentuk tetap proporsional
  • Buat favicon di web berikut favicon.cc. Caranya tinggal upload dan generate, lalu download dan simpan di komputer
  • Upload favicon ke situs tertentu. Gunanya, untuk mendapatkan URL link yang akan digunakan Blogspot untuk ambil favicon. Kalo gue pake Google Sites. Tinggal pake ID yang sama untuk login Blogspot, mudah dan gampang

Setelah selesai, lalu masuk ke akun Blogspot

Dress Up Blogspot
Login ke blogspot
  • Masuk ke Dashboard lalu pilih Layout
  • Klik bagian Edit HTML. Sebelum mulai edit, save template awal, incase terjadi salah-salah ketik
  • Gunakan fitur "find" untuk mencari kata </head>
  • Lalu, tepat di bawah kata </head> masukan kode berikut:
<link href='nama URL' rel='shortcut icon'/>
<link href='nama URL'/>

*thanks to freefavicon.com, sumber di mana gue mendapatkan kode di atas ^^
  • Ganti nama URL dengan URL tempat mengupload favicon di situs yang digunakan.
Contoh, URL yang gue pake:
http://sites.google.com/site/xxx/xxxxx/favicon.ico
Contoh kode yang udah dimasukan URL gue:
<link href='http://sites.google.com/site/xxx/xxxxx/favicon.ico' rel='shortcut icon'/>
<link href='http://sites.google.com/site/xxx/xxxxx/favicon.ico'/>
  • Klik preview untuk memastikan sebelum "save template"
Selesai..

Kalo udah menemukan cara yang mudah dipahami, ternyata ga susah lho.. Selamat mencoba dan semoga sukses dengan favicon-nya ^^


-Ling-

0 comments

Post a Comment