Membuat Favicon/Icon dengan Photoshop CS2

Bagi anda yang memiliki website/blog, 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.

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 disini.

Setelah anda mendownloadnya, silahkan download file ICOFORMAT.8BI.zip, kemudian ekstrak sehingga menjadi ICOFORMAT.8BI dan 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.

Langkah-langkah membuat Favicon :

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.

2. Buat gambar ataupun logo sesuai keinginan

3.  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.

4. 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.

5. 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 :

Demikian cara membuat favicon dengan Photoshop CS 2, semoga dapat membantu.