Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.
Gambar yang digunakan sebagai
favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui
sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun
dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya
(dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg,
tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon anda dapat menggunakan file gambar berformat gif.
Berikut langkah-langkah
pembuatannya:
1.
Siapkan gambar yang hendak anda
jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan
gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated
favicon gratis. Gunakan keyword "free favicon/animated favicon image"
di Google.
2.
Untuk membuat file ico, anda dapat
menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat
animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa
langkahnya, dan download file hasilnya.
3.
Upload
file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger
tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk
hosting gambar ico dan gif ini untuk mengupload favicon anda seperti PicPanda.com
4. Copy terlebih dahulu direct link dari gambar yang telah
diupload.
5. Kemudian masukkan url-nya ke
script tag berikut ke bagian antara <head>
dan </head> di template HTML anda. Saya
sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser
namun tidak mengganggu meta.
Untuk favicon file ico:
<link href='url gambar .ico anda'
rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Untuk animated favicon file gif:
<link href='url gambar gif anda'
rel='icon' type='image/gif'/>
Untuk menggunakan kedua-duanya dan
berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan
kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
<link href='url gambar .ico anda'
rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
seperti :
<link
href='http://www.picpanda.com/viewer.php?file=xbvc6h86vkijeiotrbno.ico'
rel='shortcut icon' type='vnd/microsoft.icon'/>
<link
href='http://s1291.photobucket.com/user/andinifs/media/animated_favicon1_zpseab5a74c.gif'
rel='icon' type='image/gif'/>
6. Preview dan save.
7. Done!
salam Teknik Komputer POLSRI
Tidak ada komentar:
Posting Komentar