Membuat Favicon/Icon file dengan Photoshop

Written by Eka Putra

Saturday, 15 August 2009 11:14

Bagi anda yang memiliki website, pasti tahu dengan yang namanya Favicon kan?, atau bagi yang belum tahu, favicon adalah sebuah icon kecil akan terlihat di bagian paling kiri address bar pada web browser anda tepatnya sebelum URL website anda.

Pada screenshot di samping terlihat sebuah icon kecil berwarna biru sebelum alamat website saya, itulah favicon. Sebenarnya favicon ini hanyalah sebuah file berekstensi .ICO (file icon) dengan ukuran kira-kira 16x16 pixel.

Saya tidak tahu bagaimana dengan anda, tetapi buat saya favicon ini cukup penting karena membuat website kita terlihat lebih profesional, itu menurut saya....:-). Tentunya favicon itu sendiri harus mencerminkan website ataupun logo anda.

Bagaimana cara membuatnya?, sebenarnya gampang sekali. Sekarang dengan Photoshop pun kita dapat membuatnya dengan mudah. Namun sayangnya secara default photoshop tidak menyediakan pilihan buat kita untuk menyimpan file kita dalam format icon.

Namun dengan sebuah plugin Photoshop, semua itu akan dapat teratasi. Untuk pluginnya, silahkan anda bisa download pluginnya di http://www.telegraphics.com.au/sw/.

Baiklah setelah anda mendownloadnya, silahkan extract file Zip nya dan anda akan mendapatkan sebuah file ICOFORMAT.8BI. Langsung saja anda copy file tersebut pada direktori C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats. Disini saya asumsikan folder windows anda ada pada drive C, dan versi Photoshop yang digunakan adalah PS CS2. Pastinya semua itu dapat anda rubah sesuai komputer anda dan versi PS yang anda gunakan.

Sekarang akan kita coba praktekkan :

1. Buat file baru di Photoshop dengan ukuran Canvas 50x50 px.

Sebenarnya 50x50 px ini tidaklah mutlak, anda bisa bekerja dengan ukuran yang lebih kecil atau bahkan jika anda ahli dalam menggambar dalam pixel langsung saja buat file dengan ukuran 16x16 px.

Untuk mempermudah kita dalam bekerja, sebaiknya zoom Canvas baru kita tersebut secukupnya.

2. Buat gambar ataupun logo sesuai keinginan

Selanjutnya silahkan anda berkreasi dengan imajinasi anda untuk menghasilkan icon sebaik mungkin. Disini saya hanya menggambar sebuah kotak berwarna merah dengan hurup B diatasnya, yang merupakan inisial nama website ini (balitechy).

2. Resize gambar menjadi 16x16 px

Setelah anda selesai dengan design icon, sekarang saatnya kita me-resize gambar kita supaya menjadi berukuran 16x16 px. Caranya, pada menu di Photoshop bagian atas cari menu Image -> Image Size.. maka akan muncul:

Pada gambar di atas, yang kita harus rubah adalah pada Pixel Dimensions dari yang aslinya 50 x 50 kita jadikan 16 x 16 px. Kemudian tinggal OK saja.

Nah setelah kita meresize ukuran gambar kita, maka sekarang ukurannya adalah 16x16 px. Dan kita siap untuk menyimpannya sebagai file .ICO.

3. Simpan sebagai file Icon (.ico)

Caranya gampang sekali, pada menu Photoshop tinggal cari menu File ->Save As... dan pilih format .ICO setelah itu tinggal tekan tombol Save maka jadilah Favicon anda.

4. Pasang Favicon pada website

Supaya website anda bisa menampilkan favicon yang baru saja kita buat, maka kita perlu menambahkan satu baris kode HTML saja diantara bagian HEAD pada file website kita yaitu :

Setelah itu tinggal refresh browser anda dan ini dia hasilnya :

Mudah sekali bukan? sebenarnya plugin Photoshop ini bukan hanya untuk membuat Favicon untuk website saja, bagi anda yang sering bikin program komputer biasanya juga akan membutuhkan icon untuk aplikasi yang anda buat. Dengan Plugin Photoshop ini sekarang anda bisa dengan mudah membuatkan icon nya.