HOMEArtikel HTML
Favorites Icon (favicon), menampilkan icon di browser anda
Ditulis oleh Dhimas Ronggobramantyo
Kategori: HTML
Dibaca 7017 kali
Apakah anda pernah melihat icon yang muncul disebelah URL website pada address bar browser? Jika pernah, itu disebut favicon. Tutorial ini akan menjelaskan pada anda bagaimana cara anda memasang favicon pada website.
Favicon
Favicon merupakan singkatan dari "Favorites Icon". Favicon pertama kali dipopulerkan karena kemunculannya pada Favorite Folder didalam browser Internet Explorer. Tetapi sekarang browser-browser seperti Netscape, Opera dan Mozilla dapat menampilkan favicon di address bar. Favicon merupakan file icon (.ico) yang kecil. Kenapa kecil? karena ukurannya hanya 16x16 piksel.
Dibawah ini merupakan beberapa contoh favicon yang dibuka melalui browser Opera.
Anda lihat icon kecil yang dipanah? itulah favicon, kita akan segera membuatnya.
Buat file favicon.ico
Karena favicon.ico merupakan file icon, maka anda memerlukan software untuk dapat membuat icon. Ada banyak macamnya salah satunya adalah Axialis Icon Editor dan Gif Movie Gear, keduanya bisa mengubah file photoshop (.psd) langsung menjadi file .ico. Karena ukurannya yang kecil yaitu 16x16, maka anda tentu sangat sulit berkreasi dan membuat icon dengan ukuran seperti itu. Cara yang paling gampang adalah dengan membuatnya dengan ukuran yang agak besar, kemudian anda stretch ke ukuran 16x16. Tetntu saja anda perlu sangat kreatid agar icon anda yang berukuran kecil tetap sedap dipandang. Setelah icon anda jadi simpanlah dengan nama favicon.ico.
Memasang favicon.ico
Simpanlah file favicon.ico di root direktori dari website anda.
Oh iya saya pernah mengalami beberapa kasus web hosting tidak bisa membuat
favicon bekerja. Jika anda menemui masalah ini email saja web hosting anda untuk
menanyakan masalahnya. Tetapi sebagian besar web hosting dapat menampilkan
favicon. Setelah file favicon.ico anda tersimpan dengan baik , anda perlu
memanggilnya melalui kode HTML diantara tag <head>. Anda perlu menggunakan kode berikut ini:
<link rel="Shortcut Icon" href="favicon.ico">
Kode lengkapnya adalah seperti ini:
<html>
<head>
<title>Judul Website</title>
<link rel="Shortcut Icon" href="favicon.ico">
</head>
<body>
</body>
</html>
Sekarang buka browser anda dan periksalah favicon anda akan muncul disebelah URL anda. Perlu di ingat jika anda menggunakan Internet Explorer 6 kebawah favicon hanya muncul jika anda telah memasukkan website anda ke folder favorites. Atau untuk mudahnya anda gunakan saja Opera atau Mozilla atau Internet Explorer 7 Beta yang semuanya telah dapat memunculkan favicon pada address bar.
Mungkin favicon terlihat sederhana, tetapi dapat membuat website anda terlihat sedikit lebih menarik.
Komentar [10]
Dikirim oleh pemula pada 05 Desember 2007 02:25:01 WIB
Suatu ketika pernah saya mengirim komentar di salah satu web yang ada security number nya juga, dan pada saat itu saya salah masukin secure number nya. dan semua komentar yang saya tulis tidak terkirim dan hilang begitu saja. Jadi, saya harus mengetik ulang lagi komentar yang sudah saya tulis panjang lebar.
yang ingin saya tanyakan :
Kenapa harus ada security number di form kirim komentar ?
Mohon pencerahannya
thanks,
pemula
Dikirim oleh pemulajuga pada 27 Desember 2007 09:03:16 WIB
menjawab pertanyaan mas pemula, security number dibuat dengan maksud untuk memastikan bahwa komentar ini ditulis memang dari site yang bersangkutan. bukan berasal dari site yang lain.
Dikirim oleh wulan pada 15 Januari 2008 10:49:02 WIB
mas,kalo naruh di blog gmn caranya
Dikirim oleh Aswan pada 26 Mei 2008 01:05:14 WIB
Maaf tanya:
Seandainya dari file berextention jpg atau gif lalu kita ganti menjadi extention ico bisa nggak ya ?
misal logo.gif kita ganti menjadi file favicon.ico
kemudian file tsb kita jadikan untuk icon
trim's
Dikirim oleh djhoel pada 05 Juli 2008 09:19:06 WIB
kalo di blog caranya gimana mas
Dikirim oleh milani pada 21 Agustus 2008 10:58:38 WIB
pakai script ini tapi gak bisa tampil di ie7, kenapa yah? please help.
Dikirim oleh milani pada 21 Agustus 2008 11:11:43 WIB
Nambah yah, boleh kan hehehe seperti pertanyaan no 4, boleh gak kita pake image untuk iconya dari yg berextension .gif or .jpg misalnya.. kalo di browser firefox sih jalan.. tapi di ie versi 7 tetep gak jalan tuh..
Dikirim oleh ncyt pada 29 Agustus 2008 04:14:06 WIB
mau nanya,,
coding itu diletakkan di file index.html atau disemua file,,
maklum baru belajar,,
saya sudah mencoba,,tapi tidak keluar,,knp yah kira2,,saya juga sudah membuat iconnya,,
Dikirim oleh THE XCORNER pada 25 Januari 2009 03:38:23 WIB
aduh mas saya udah coba berulang2 dan ucah cek smuanya ..n udah muter2 liat google dan saya sudah coba smuanya tp kok gx bisa y...??
mohon pencerahannya y....
tolong balas komentarnx di blog sederhana sya y... thanks before
http://dxcorner.co.cc
Dikirim oleh hans pada 29 Januari 2009 04:09:19 WIB
maaf mas,sy br pemula. sdh sy cb di web saya ko tetep gak bisa y...?pdhal dh sy upload berkali2....
trimakasih atas pencerahannya.
RSS Feeds
Valid XHTML Strict