cara menampilkan gambar disamping alamat (url) website atau blog

Favorites Icon (favicon), menampilkan icon di browser anda

penulias asli nya Dhimas Ronggobramantyo saya cuma ng-arsip aja….Peace?

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 16×16 piksel.

Dibawah ini merupakan beberapa contoh favicon yang dibuka melalui browser Opera.

Contoh posisi favicon Contoh posisi favicon

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 16×16, 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 16×16. 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.

13 Comments to “cara menampilkan gambar disamping alamat (url) website atau blog”

  1. ok makasih sudah saya praktekan hasilnya topbgt

  2. makasih gan…ilmunya udh bisa saya pake tuh…

  3. mas, saya ga bisa kesulitan ngikutin cara ini…
    setelah saya cari kode HTMLnya cuma kaya gini:



    ~

    mohon pencerahannya yaaa… thanks…

  4. Terima kasih atas artikel nya mas. Mau saya coba di situs saya http://www.sofwan.net. Silahkan bisa di lihat hasil nya … :)

  5. mantap juga mas, coba di praktek ya…salaing berkunjung ya mas.terimakasih dan salam sukses

  6. wah akhirnya ketemu juga ni tutorial, susah carinya
    trims bro’

  7. keknya masih bingung aku, coba cari info lagi
    makasih ya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: