Bagaimana Memasang Favicon di Website Sendiri

Raden Ikram | HTML
22 Jan 2010

Favicon adalah icon kecil yang muncul di Browser URL tab, contohnya seperti gambar diatas.

Sekarang bagaimana cara memasang favicon tersebut di website anda sendiri.

Langkah Pertama (1)

Persiapkan dulu gambar yang akan digunakan untuk menjadi favicon tersebut, format gambar biasanya adalah .ico namun bisa juga menggunakan .png, .gif, .jpeg (menggunakan selain .ico mungkin tidak berfungsi di beberapa browser)

Ukuran gambar yang disiapkan adalah 16 x 16 pixel

Anda yang menggunakan windows biasanya memakai photoshop untuk mengolah gambar, dan mungkin akan bertanya-tanya karena tidak bisa save file dengan ekstensi .ico, namun tidak perlu khawatir, solusinya download plugin berikut .ico photoshop

Setelah download dan install, maka pada photoshop jika save as image akan ada pilihan untuk save dalam format .ico

Jika menggunakan Linux, biasanya memakai GIMP bisa langsung save as dengan ekstensi .ico

Masih kesulitan juga untuk mempersiapkan file favicon.ico, tenang masih ada jalan lain yaitu menggunakan favicon generator, gampangnya menggunakan yang online sehingga anda tinggal upload, dan kemudian tinggal download file .ico yang dihasilkan

beberapa favicon generator

http://www.favicongenerator.com/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.cc/

Langkah Kedua (2)

Gambar sudah siap. Upload file favicon.ico tersebut ke folder website anda

Langkah Ketiga (2)

Sekarang tinggal memasukkan sedikit script kedalam file index.html (homepage) anda

copy script berikut, pilih salah satu sesuai tipe image yang digunakan (pastikan ubah href untuk menunjukkan dimana gambar berada pada folder website anda)

<link rel="icon" type="image/vnd.microsoft.icon" href="http://yourweb.com/image.ico" />
<link rel="icon" type="image/jpeg" href="http://yourweb.com/image.jpeg" />
<link rel="icon" type="image/png" href="http://yourweb/image.png" />
<link rel="icon" type="image/gif" href="http://yourweb.com/image.gif" />

Langkah Keempat (4)

Buka file index.html anda (atau file lain yang digunakan sebagai home). cari baris <head> dan </head> paste kan script yang di copy tadi di antara keduanya

contoh