PC Guru – Share Our Knowledge Computer

Menghiasi Situs anda dengan Favicon Sendiri

March 13th, 2009 |

Author: OQ

favicon02 Menghiasi blog memang tiada bosan dan abisnya. Salah satu contohnya yang mengasikkan adalah menambahkan atau mengganti favicon pada blog menjadi icon yang mencerminkan blog anda. Untuk membuat favicon sebenarnya tidaklah sulit. Asal punya keahlian sedikit mengolah gambar, hal ini tidak terasa sulit lagi.

Dahulunya saya mengenal favicon ini mempunyai format .ico. Tetapi sekarang kita sudah bisa menggunakan berbagai macam format gambar standar seperti .png, dan .gif. Apa yang membedakan hal format ini ? Jika kita menggunakan .ico, untuk menjadikannya format .ico, dibutuhkan software khusus. Tetapi jika menggunakan format gambar seperti .png atau .gif, kita cukup membutuhkan software pengolah gambar yang banyak dikenal seperti adobe photoshop.

Untuk membuat favicon, kita cukup menyiapkan sebuah gambar dengan ukuran sama besar. Usahakan gambar tidak lebih dari 32 x 32 pixel. Atau lebih baik gunakan ukuran 16 x 16 pixel. Kemudian designlah favicon anda. Jika sudah siap, kita simpan dengan format .png atau format .gif Jika ingin menyimpan menjadi format .ico, kita dapat menggunakan Favicon Generator yang bisa langsung digunakan secara online.

Bagaimana memasukkan favicon kedalam blog atau website ?

Langkah yang pertama yang anda lakukan adalah menyiapkan favicon pilihan anda. Dan upload disitus anda. Jika sudah ada, kita hanya perlu memasukkan kode berikut diantara tag <head> … </head>.

Jika anda menggunakan format .GIF.

^?View Code HTML

<head>
<link rel="shortcut icon" href="http://nama-blog.com/favicon.gif" type="image/gif" />
</head>

Format ini mempunyai ciri yang unik. Karena format .gif bisa dibuat bergerak (animasi). Contoh :

Jika anda menggunakan format .PNG

^?View Code HTML

<head>
<link rel="shortcut icon" href="http://nama-blog.com/favicon.gif" type="image/png" />
</head>

Jika anda menggunakan format .ICO

^?View Code HTML

<head>
<link rel="shortcut icon" href="http://nama-blog.com/favicon.gif" type="image/vnd.microsoft.icon" />
</head>

Nah bagi anda pengguna Blogspot, anda copy kode diatas tepat seperti berikut :

^?View Code HTML

<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link rel="shortcut icon" href="http://nama-blog.com/favicon.gif" type="image/gif" />

Biar tidak penasaran, silahkan dicoba dulu deh.

Berikut ini adalah daftar situs Favicon Generator yang bisa anda coba :
http://www.favicon.cc/

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

http://www.html-kit.com/e/favicon.cgi

http://www.degraeve.com/favicon/

http://antifavicon.com/

http://www.favicongenerator.com/

http://www.genfavicon.com/

http://www.webscriptlab.com/favicongenerator.php

http://favicon-generator.org/

http://www.favicon.co.uk/gallery.php

http://www.faviconprime.com/