PDA

View Full Version : Favicon - cara menampilkan icon di browser


akupasrah
10-28-2008, 02:48 PM
Apakah kamu 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.

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.

Eclipse
10-28-2008, 02:53 PM
Ukurannya bisa juga 32 X 32 px...

Laler
10-28-2008, 07:19 PM
Ini kalau males nyari cara utk bikin file .ico:

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

Bisa buat bikin icon Windows juga.

Bikin aja gambarnya di photoshop, save for web > png 24 transparent (kalo transparan), dan upload!

:D

Eclipse
10-28-2008, 09:34 PM
Ini kalau males nyari cara utk bikin file .ico:

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

Bisa buat bikin icon Windows juga.

Bikin aja gambarnya di photoshop, save for web > png 24 transparent (kalo transparan), dan upload!

:D
Kl di windows bisa juga direname langsung bro....tapi sebelumnya opsi hide extension for know file di folder option di harus uncheck dulu....

setelah itu langsung rename ma extension nya juga...misalnya favicon.png --> rename jadi favicon.ico

Selama ini gw pake cara ini bro...:dd

btw dynamicdrive web favorite gw tuh bro.... :d