Favicon? Makhluk apa itu?  (thinking)

Buat yang belum tahu, Favicon adalah ikon yang muncul di bagian address atau title bar browser, persis di sebelah kiri alamat URL atau judul situs.

Hampir pasti setiap browser akan menampilkan favicon ini. Kalau kamu tidak menambahkan favicon sendiri, yang ditampilkan pada browser adalah ikon default yang tentu biasa-biasa saja.

Kalau ingin browser menampilkan favicon yang khas, ya tentu harus bikin sendiri. Trus bagaimana caranya menambahkan favicon di blog?

Yang pertama jelas kamu harus punya ikon. Ukuran yang disarankan adalah 16×16 pixel. Ada banyak situs yang bisa membantu pembuatan ikon ini. Googling aja pake kata kunci “create favicon” atau “favicon generator”. Salah satunya adalah favicon.cc.

Baca Juga
BCA Gelar Roadshow Finhacks 2018 #DataChallenge di Yogyakarta

Ikon bisa “digambar” sendiri atau mengambil dari foto/gambar yang sudah ada. Sangat disarankan untuk menyimpan ikon dalam format ICO.

Setelah jadi, upload ikon tersebut ke folder public_html blog atau situsmu. Berikutnya, sunting bagian header HTML dengan menambahkan tag berikut:

<link rel="shortcut icon" href="http://myblog.com/myicon.ico" />
<link rel="icon" href="http://myblog.com/myicon.ico" type="image/x-icon" />

Gantilah nama domain dan nama file ICO sesuai dengan nama domain dan file ICO buatanmu.

Untuk pengguna WordPress (self-hosted), penyuntingan bagian header bisa dilakukan dengan masuk ke menu Appearance > Editor lalu pilih header. Pastikan tag di atas terletak di dalam tag <head>.

Simpan perubahan tersebut dan panggil kembali blog/situsmu dengan browser. Naaah, sekarang faviconnya sudah muncul.

Baca Juga
Test Smilies

Favicon ini bisa ditambahkan ke blog atau situs yang memiliki nama domain sendiri atau self-hosted. Kalau blogmu “nebeng” di WordPress atau Blogspot, ya mau tidak mau pakai favicon milik mereka. Atau barangkali ada trik khusus untuk bikin favicon di free account WordPress/Blogspot yang saya belum sempat ngoprek, silakan beri tahukan di bagian komentar. Gak bayar kok (ya iyalah).

Follow me on social media:

16 Comments

christin males login · 07/02/2013 at 6:39 pm

aku udah pake favicon sendiri :))

    Oom Yahya · 07/02/2013 at 7:54 pm

    Siiip :))

sabaiX · 07/02/2013 at 7:09 pm

rrr… I’m happy with my browser as it is. Makin simple, slim dan sesedikit mungkina makan tempat makin baik (efisien). Perlu nambahin favicon juga gak?

    Oom Yahya · 07/02/2013 at 7:56 pm

    Rrrrr, keknya salah paham nih kak Sabai. (lol)
    Ini bukan masalah browser, tapi menampilkan logo blog/situs di bagian address atau title bar browser.
    Coba lihat deh logo di sebelah address yahyakurniawan.net atau judul blog di atas

sandalian · 08/02/2013 at 12:57 am

Ada cara yang lebih simpel Mas, yaitu filenya diupload ke public_html (root web directory) dengan nama favicon.ico. Ga perlu nambah script apapun.

Hanya saja akan ke override kalo di header ada script yang manggil favicon lain.

    Oom Yahya · 08/02/2013 at 11:20 am

    Wah, makasih infonya, ndal. (worship)

erricgunawan · 08/02/2013 at 8:50 am

Untuk nambahin favicon di WordPress.com bisa kok Pak.
Ini buktinya: http://ericgunawan.wordpress.com/

Kalo gak salah ada di bagian Setting. Lupa persisnya di mana. Sayangnya, saat komentar ini diturunkan sy gak bisa masuk WordPress.com, gara-gara koneksi lagi down mungkin (taser)

Yang baru sy cari itu, cara nambahin favicon di aplikasi RSS Reader semacam Google Reader. Kalo yang dari WordPress.com malah bisa otomatis. (doh)

Oom Yahya · 08/02/2013 at 11:23 am

Matur tengkiu, kak Eric. Ditunggu info lebih lengkapnya. (drinking)

Billy Koesoemadinata · 08/02/2013 at 3:22 pm

oh, jadi di html-nya. kirain ada plugin-nya kalo pake wordpress. *mikir kapan mau bikinnya*

    Oom Yahya · 08/02/2013 at 5:13 pm

    Gak wajib kok Bill, take your time :))

Ceritaeka · 08/02/2013 at 5:02 pm

Aku udah pake favicon sendiri dunk oom.. Tapi dulu caranya gimana, lupa. Hahaha

    Oom Yahya · 08/02/2013 at 5:16 pm

    Baguslah kalau begitu. Blognya diperbaiki lagi biar kalau pada komentar, gak moderasi melulu (ngacir)

bocah petualang · 23/02/2013 at 12:04 pm

Di WordPress.com itu ada di bagian Pengaturan Umum (General Setting) di sebelah kanan.
Di Blogspot sama dengan cara di artikel Om Yahya, tinggal edit template aja pake editor yang disediakan blogger.com :)

    Oom Yahya · 23/02/2013 at 12:42 pm

    Wokeee (drinking)
    Makasih banyak buat infonya (worship)

indra · 28/03/2014 at 12:42 am

makasih ya gan,ilmu yang bermanfaat :D

Ponsel baru · 26/03/2015 at 8:18 am

terimakasih infonya ya mas….
nambah ilmu buat saya.hehe

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.