Mengubah Favicon di Blogger

Alhamdulillah, Allah memperkenankan aku untuk mempertahankan blog ini. Terserah, mau dibaca orang atau nggak, tapi kebanyakan di sini aku cuma mau berbagi aja, kok!^^ Kali ini, aku mau berbagi tentang sesuatu yang menarik, dan pasti sangat diinginkan oleh banyak orang. Ini tentang favicon.


Pertama, apa itu favicon?

Favicon (kependekan dari favorite icon), atau juga dikenal sebagao shortcut icon, website icon, URL icon, atau bookmark icon adalah sebuah file yang memuat sebuah ikon atau ikon yang lebih kecil, biasanya berukuran 16×16 pixels, yang berkaitan dengan sebuah website atau web page. Seorang designer web bisa membuat sebuah ikon dan memasangnya pada sebuah website atau web page dengan banyak tujuan, dan web browser grafis akan menggunakannya. Browser yang menyediakan fasilitas favicon biasanya menampilkannya di address bar dan selanjutnya akan ditampilkan juga di nama halaman di daftar bookmark. Browser yang mendukung tabbed document interface (bisa menampilkan beberapa website atau web page dalam satu waktu dalam beberapa tab) biasanya menunjukkan favicon halaman tersebut di dekat judul halaman di tab, dan  browser SSB menggunakan favicon sebagai desktop icon.

Diambil dari Mbah Wikipedia. :)

Bagaimana bentuk favicon?

Gambar, dong! :P Mau lihat contohnya?


Nah, yang disebuh favicon itu adalah gambar Doraemon di address bar maupun di tab. Kelihatan juga, kan, banyak website lain yang menggunakan favicon. Misalnya, aku punya blog di Wordpress, dan di sana ada ikonnya, yaitu UFO. Di sebelahnya juga ada MEGAUPLOAD, yang punya favicon huruf M. Jadi, udah jelas, kan, seperti apa favicon itu? Kalo udah, kita akan lanjut.

Kita bisa bikin favicon?

Dilihat dari gambar sebelumnya, kok kelihatannya aku nggak pernah bikin favicon sendiri, ya? Tapi, jangan salah! Kalo Anda pintar manggambar, bukan tidak mungkin Anda membuat favicon Anda sendiri. Di internet, beredar banyak website yang menyediakan layanan pembuatan favicon. Kita bisa pakai itu, atau kita buat sendiri tanpa itu, dan nanti kita upload ke internet untuk kemudian digunakan di website atau web page kita.

Beberapa website penyedia layanan pembuatan favicon:
  • http://www.favicon.cc/ - membuat favicon sendiri, langsung ada previewnya di browser kita, dan setelah didownload, bentuk filenya adalah .ico
  • http://www.htmlkit.com/favicon/ - membuat favicon dari gambar yang ada di komputer kita. Lumayan, bisa masukin foto sendiri! Bahkan ada layanan Twitternya, di mana kita bisa langsung bikin favicon dari gambar Twitter kita. Ditambah lagi, kita bisa bikin favicon kita bergerak. Ini udah lumayan sekali!
  • http://www.favicon.co.uk/ - ini juga layanan bikin favicon dari gambar di komputer, dan kita bisa menentukan ukurannya. File yang akan didownload juga berbentuk .ico
  • http://www.favicon.com/ - di sini kita bisa minta dibikinin favicon, tapi perlu dicatat: TIDAK ADA YANG GRATIS DI DUNIA INI. Jadi, bayar, deh! $125 kalo nggak salah lihat.
Mungkin ada yang lain, tapi kayaknya yang disebutin itu aja, deh! Selebihnya, tanya sama Dukun Super Google aja, lah! :P Cara lainnya adalah, kita bikin gambar sendiri, terus kita masukin ke image hosting di internet, macem Photoshop atau TinyPic. Oh, ya, semua file yang udah kita download dari program-program di atas itu juga perlu diunggah ke internet, biar bisa kebaca sama browser. Oke?

Cara Menampilkan Favicon

Ini dia yang sedari tadi ditunggu. Iya, kan? =] Oke, daripada penjelasannya makin panjang dan berbelit-belit, kita langsung aja!


  1. Masuk ke Blogger.
  2. Pilih menu Design (Rancangan) > Edit HTML.
  3. Di bagian Template Edit, ada textbox dengan banyak tulisan, kan? Cari kode semacam ini, gampangnya pake Ctrl+F:

    ]]></b:skin>

  4. Copy kode di bawah ini, paste di bawah kode yang tadi.

    <link href='url-gambar.ico' rel='shortcut icon'/>

    atau

    <link href='url-gambar.gif' rel='icon' type='image/gif'/>

    Jangan lupa, ganti tulisan berwarna merah dengan url favicon anda tadi.

  5. Simpan template.
Mudah, ya!

Nah, mudah, kan? Setelah ini, Anda bisa berkreasi dengan website Anda, lebih baik lagi! :)

Selamat mencoba! Semoga bermanfaat!

Leave a Reply

(: my notes of thoughts :)
Powered by Blogger.