Membuat icon halaman web

Selain layout, desain dan content yang baik, ada satu cara sederhana lagi yang bisa membuat halaman web tampil lebih profesional, yaitu menggunakan icon halaman web tersendiri.

tut-1-icon1

tut-1-icon2

Langkah 1: Desain icon

Pertama-tama yang kita lakukan tentu saja mendesain iconnya. Gunakan aplikasi pengolah gambar mana saja yang kamu kuasai. Dalam tutorial ini aku pake Photoshop. Yang penting adalah membuat gambar berukuran 16×16 pixel dengan resolusi 72 dpi.

tut-1-icon3

tut-1-icon4 Kita menggunakan ukuran 16×16 pixel sebab inilah ukuran icon yang digunakan dalam jendela aplikasi (dalam kasus kita, web browser). Selain ukuran tersebut, ukuran-ukuran yang valid lainnya untuk sebuah icon adalah 24×24 px, 32x32px dan 48x48px. Kamu juga bisa mendesain icon dengan menggunakan ukuran-ukuran ini tapi pada akhirnya kamu tetap harus mendownsizenya ke 16×16 px. Resolusi 72 dpi digunakan karena merupakan resolusi standar penggunaan image pada layar, beda dengan keperluan cetak yang umumnya menggunakan 300 dpi.

Kamu tidak harus mendesain icon berbentuk kotak (mengambil penuh ukuran kanvas). Gunakan kreatifitas dan ciptakan bentuk-bentuk yang unik. Bila kamu membuat icon seperti ini, nonaktifkan layer paling bawah sehingga icon menempati bidang transparan. Setelah puas dengan desainnya, simpan gambar dalam format PNG. Format ini kita gunakan karena ia mendukung transparansi alpha–persentase transparansi dari 0% (betul-betul transparan) sampai 100% (betul-betul opaque)–sehingga kualitas transparansi gambar tetap oke; daerah gambar yang bersebelahan dengan area transparan akan memblend dan membuatnya lebih halus. Beda dengan format GIF yang juga mendukung transparansi tapi hanya mendukung dua nilai; transparan atau tidak transparan. Format GIF menyebabkan pinggiran gambar transparan terlihat jaggy.

Langkah 2: Ubah ke format ICO

Selanjutnya adalah merubah gambar PNG yang telah kita buat menjadi file icon. Gunakan aplikasi pembuat icon yang banyak tersebar di internet, salah satunya Microangelo. Cara masing-masing aplikasi berbeda tapi intinya kita mempersiapkan kanvas icon 16×16 px dan mengimpor gambar PNG yang sudah kita simpan. Lalu simpan/ekspor menjadi file icon.

tut-1-icon5

Sebagai tambahan; yang kita perlukan adalah aplikasi yang mendukung pembuatan icon untuk Windows XP (mendukung icon dengan transparansi alpha). Mengapa? Sebab kualitas icon yang digunakan dalam Windows XP lebih baik dan kita menginginkan agar icon kita disiapkan untuk itu.

tut-1-icon9 Lebih jelasnya lihat gambar di samping. Gambar ini membandingkan icon ukuran 16×16 px dengan True Color dan transparansi yang bisa digunakan sampai Windows Me dan dengan sistem icon transparansi alpha Windows XP. Dua icon berukuran 48×48 px adalah gambaran jika iconnya kita perbesar 300%.

Icon akan menampilkan kualitas terbaik yang diizinkan oleh kompi. Kualitas icon yang kita persiapkan “untuk” Windows XP hanya akan turun jika ditampilkan pada OS di bawahnya. Hasil paling “parah” yang kita dapatkan adalah icon dengan True Color seperti dalam gambar di atas. Tidak sebaliknya, jika icon kita persiapkan hanya dengan True Color dan transparansi biasa maka itulah kualitas terbaik yang akan kita dapatkan dan pengguna Windows XP tidak akan melihat peningkatan kualitas seperti yang bisa mereka peroleh.

Langkah 3: Upload file icon

Gampang, upload file icon yang sudah disimpan ke web kamu. Pastikan pathnya bisa diakses oleh semua halaman yang bakal menggunakan icon ini. Kalau gak mau susah, langsung upload ke root atau yang satu direktori dengan file index.

Langkah terakhir: Menambahkan satu baris kode di file halaman.

Setiap halaman yang akan menggunakan icon ini harus diedit agar mengenalinya. Baris berikut boleh diletakkan di sembarang tempat di dalam bagian <head>.

<link rel="shortcut icon" type="image/x-icon" href="path/nama-icon.ico" />

Bagian yang diubah adalah path yang menunjukkan lokasi di mana icon berada dan nama-icon.ico yang merupakan nama file iconnya. Contoh:

<link rel="shortcut icon" type="image/x-icon" href="http://andi.saleh.web.id/favicon.ico" />

Simpan file, selesai! Buka halaman dengan web browser lalu liat icon yang sudah kamu buat.

Semoga bermanfaat.

Catatan:

Gak usah repot-repot buka dengan Internet Explorer 6 ke bawah. IE6 gak dukung icon untuk halaman web.
Animated icon juga bisa digunakan untuk icon halaman web. Punya icon web yang bergerak-gerak kayaknya keren juga.

Tyo

Salam kenal.. Wah, nice tutorial mas.. Bisa link exchange?

jaBRix

wah wah wah..ini nih yang gua cari2…thnks atas infonya..

kunjungi balik yah
http://formansupradinata.wordpress.com/

Rahmat

Thanks….

rifdeweb

Pak, ngasih informasi tambahan nih..
Gak usah repot-repot menggunakan tool untuk convert ke file icon (.ico), tinggal di rename aja dari *.png ke *.ico atau kalau gak mau repot lagi biarkan tetap .png trus di dikode HTMLnya jadi:

*Btw, desain webnya bagus, ..

rifdeweb shares Membuat Dropdown atau Combobox mirip Facebook

wimpy

wah info yang bagus nie.. nice share yah mas..

wimpy shares Review buku Jhon Tefons`s Special F/X

riski

mantab tutorialnya mang..

zahra

ih…….. gmn sich???
aq coba kok pecah sich waktu gambar na di import di microangelo???
Mohon bantuannya
^_^

andi

numpang saran…bagi temen – temen yang mau buat favicon secara ringkas bisa kunjungi favicon.cc, icon ini juga bisa beranimasi klo menggunakan format *.gif…thx

andi shares Tentang andihuget!

Gunn

Makasih tipsnya mas…Siip

Gunn shares MENYAMARKAN FILE RAHASIA

#10

koza

mantap om

koza shares Mengubah embel-embel blogspot menjadi .co.cc

ini nih yang dinamakan anak bangsa, yang berbakti untuk kemajuan bangsa kita “bangsa indonesia” ^^

makasih ya tipsnya…^_^
semoga ilmunya bertambah banyak lagi …^^

#13

Dhee

Yup.. yup… yup… makaci info na mas… ^_^V

#14

Rifqi

Thanks ya. Dari aku baca aku bisa membuat icon
.-= Rifqi´s last blog ..Your Comment =-.

#15

viraflea

mangstab gan inponya..saya coba langsung..:beer:

#16

yudz

waah, akhirnya blog saia tambah cantikk…. huft, mkin cinta ajja. mkasih ya mass….hehee
.-= yudz´s last blog ..Selamat jalan mbah surip =-.

#17

jun

saya mau tanya mas. gimana membuat icon untuk ditampilkan di desktop agar bisa ling langsung keinternet, jadi gak usah pakai program lagi, misalnya icon google, facebook dan lain-lain. makasih
balas ya ke email

#18

ahmad gitu loh

Makasih atas infonya.jangan lupa kunjungi situs percobaan yrnazwa.tk ini

#19

yoe

wah, ini dia info yg saya cari.. nti mau taa coba ah.. makasihh yah
.-= yoe´s last blog ..Hei, Mau Jadi Orang Kaya???!!! =-.

#20

saripudin

kalo mau bikin ico gampangnya pake online aja nih alamatnya

http://www.icoconverter.com/
.-= saripudin´s last blog ..Bilangan Imajiner yang Penuh dengan Khayalan =-.

#21

Insomnia

Thank Gan, Atas postingannya,,,
.-= Insomnia´s last blog ..Download Free Hide Folder for Windows =-.

#22

ben

bagus infonya.. kebetulan sy lg nyari2 aplikasinya..

Thanks broo….

Nice info, bisa dicoba nih…

#25

rochsid

mas mau tanya, gimana sih bikin image yang menempel pada background bisa kelihatan menyatu, bisanya imagenya ada dibayangi sedikit warga backgorund.. contohnya gambah mas andi yang ini: http://andi.saleh.web.id/wp-content/themes/bin-v1/images/teaser2.gif.. terima kasih

good..thanks.

nice share terima kasih

#28

adi_boy

…thanks banget mas..!! info yang bermanfaat.. please visit me..!!

#29

ANDI WONG

kalo yg ini gw udsah bisa gan..

#30

Kangisa

Salam blogger nih…. infonya bagus juga… salam knal ya….

#31

intan

thx bgt bgt bgt buat info nya mas.. :-bd

#32

Sarmani yup

Mantap imformasinya mas. Visit balik juga ya:-)

#33

Melkyman ^^

Wow… Sepp bro… semangat always ^^

mantabs gan

Makasih banyak info nya.
ini nich artikel yang ladi dicari2

#36

tips komputer

makasih buat tips nya mas, langsung saya coba ah..

nice info.. thank’s

wah
keren gan
thx y ?

#39

KuroV

wah dari kemarin cari2 baru nemu ne caranya , Nice man

#40

bogie

manteb sy mo bikin nih yg bginian

#41

putra

wah makasih bgd nih.. infonya kebetulan msh
belajar n butuh byk sumber…. kalo ada waktu
silahkan berkunjung ya ke http://cakraindah.net/ terima kasih

#42

ahmad sewa laptop komputer

semoga artikelnya bisa saya laksanakan..
soalna dari kemaren sy cari2 artikel beginian, tp belum berhasil juga membuat icon di samping URL.. thank’s mas bro