Tutorial, Tips & Trik Membuat Favicon.ico dengan Adobe Photoshop

Apakah itu Favicon dan Apakah Kegunaannya?

Bagi anda yang belum terlalu mengerti tentang Apakah itu Favicon dan Bagaimana Cara Membuat Favicon.ico?, saya rasa postingan saya kali ini akan sangat menginspirasi anda… karena sayapun demikian :)

Favicon.ico adalah sebuah file Icon Windows yang ber-extentions (berakhiran file) *.ico. Custom Icon imut ini memang biasanya berukuran sangat kecil yaitu 16×16 pixel saja. Perbedaaan antara Favicon (Favorite Icon) dengan Windows Icons biasa adalah kegunaanya yang terbilang sangat unik, yaitu sebagai ‘inisial’ logo sebuah Website/Blog yang muncul tepat disebelah kiri alamat URL. Selain itu juga Favicon.ico biasa muncul pada situs/page yang anda Bookmarked (Tandai), Pada Tabs Browser ataupun sebagai Icon Shortcuts/Folder di Operating System Windows anda.
Sekilas Tentang Adobe Photoshop .


Apakah itu Photoshop Plugin? Anda mungkin tahu saat ini hampir semua Program Aplikasi Grafis ‘menyediakan‘ suatu menu interaktif bagi para Coder/Programer untuk mengembangkan menu-menu tambahan yang dapat di-’colokin’ (Plug In) dengan mudah dan sesuka hati oleh User sesuai dengan jenis-jenis Plugin yang mereka butuhkan.
Biasanya Plugin-plugin ini secara mandiri dibuat oleh Programer di seluruh dunia secara cuma-cuma alias GRATIS, tentu saja pasti ada tujuan dibalik semangat gratis tersebut , apalagi kalo bukan Traffic, Popularity dan Bussiness.


Free Download Photoshop Plugin *.ico File Format Exporter

Seperti yang dijelaskan sebelumnya tentang fungsi dari Plugin Photoshop, berikut ini adalah satu buah Plugin Gratisan yang benar-benar bermanfaat sekali untuk pembuatan Custom Favicon atau Favorites Icon buatan sendiri, silahkan download langsung dari website penciptanya:

Free download favicon maker plugin from Telegraphics.com.au »»

Bagaimanakah Cara Menginstall Favicon Plugin dari Telegraphics

Sebenarnya mengenai cara menginstall dan sebagainya, semuanya sudah tercatat lengkap di file README.html di file hasil download diatas… namun jika anda benar-benar Newbie atau memang belum terlalu paham saya kasih sedikit tutorial instant dech :) :
Ketika file *.zip telah sukses anda extract maka disana akan terdapat file-file berikut ini : ICOFormat.8bi, gpl.html, README.html
Yang perlu anda lakukan adalah Copy-Paste file ICOFormat.8bi ke:
Drive System Windows (c:\) » Program Files » Adobe » Adobe Photoshop (CS/CS2/CS3/CS4) » Plug-Ins » File Formats (Paste di folder ini!!)







Tutorial Memulai Membuat Favicon 16×16 Pixel Blog/Website Anda

Secara default ukuran sebuah Favicon agar tampil sempurna dan cepat dalam proses loading adalah bentuk persegi dengan ukuran Width (lebar) 16 pixel dan Height (tinggi) 16 pixel. Permasalahan yang muncuk ketika mendesain icon dengan ukuran tersebut adalah ‘terlalu kecilnya’ area kerja setting design yang kita lakukan :( untuk itu jika anda sudah biasa menggunakan Adobe Photoshop dan berencana membuat logo icon untuk weblog anda berikut adalah beberapa TIPS & TRIK dari saya:


Buatlah file baru dengan image size 64x64px, yaitu melalui FILE » NEW »
Buatlah desain sesuka hati anda, dan ingat! background favicon bisa dibuat transparant seperti layaknya kita melakukan desain untuk mode *.gif atau *.png
Jika anda telah selesai dalam tahapa design masuklah ke menubar IMAGE » Image Size dan ketikan width:16 dan Height:16 Pixel

TIPS UNTUK PENGGUNA VERSI CS: ketika memperkecil sebuah image gunakanlah/centang opsi Resample Image dan pilih “Bicubic Sharper” pada menu Image Size diatas, ini akan mengurangi gambar kabur (Blur) yang mengakibatkan favicon menjadi tidak jelas.

TIPS EXTRA RETOUCH: Jika anda merasa masih kurang maksimal dalam tingkat ‘jelas’ tidaknya image favicon buatan anda ketika diperkecil… cobalah teknik standart berikut:
Undo atau kembali ke ukuran 64×64 pixel sebelum anda rubah ukuran imagenya
Pada menubar pilih FILTER » Sharpen » Sharpen
Masih kurang? :D masuk ke menubar IMAGE » Adjustment » Hue/Saturation » Geser Slider Saturations ke Kanan hingga warna tampil lebih kontras
Kembali rubah ke ukuran 16x16px + “Bicubic Sharper” » OK!
Save As Desain Favicon Buatan Anda dengan Nama favicon.ico

Ini dia hasil akhir pembuatan desain favicon dengan akhiran file (format) favicon.ico, caranya sangat-sangat dan sangat mudah :D… jika anda telah sukses menginstall Plugin ICO Format yang dijelaskan di sub bab sebelumnya, maka ketika anda melakukan proses Save As maka akan muncul satu buah pilihan format file baru dengan mode *.ico (lihat gambar), selamat mencoba :)
Bagaimanakah Cara Menginstall Script Favicon Agar Muncul di Website/Blog Anda

Secara konsep sebenarnya ini sangat mudah untuk dilakukan oleh Blogger yang sudah terbiasa bongkar pasang kode HTML dan PHP di wordpress themes (seperti saya :) ), namun sekedar mengingatkan saja berikut adalah langkah-langkah mudah memunculkan favicon.ico di Blog/Web anda:
Upload file favicon.ico hasil kreasi anda di Adobe Photoshop ke folder Root/www (top level) agar bisa muncul otomatis dan mudah terbaca oleh Browser.

TIPS: Gunakanlah progam aplikasi FTP Client kesukaan anda untuk melakukan ini :D
Buka dan edit file header.php di folder themes pada template WordPress anda, dan diatara tag <head> … </head> selipkan kode tambahan seperti berikut ini:
jika icon dalam *.ico bisa gunakan ini:
<link rel=”Shortcut Icon” href=”/favicon.ico”>
jika icon dalam *.ico bisa juga gunakan ini:
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
jika icon dalam *.ico + bekerja di IE 7+ gunakan 2 kode ini:
<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”icon” type=”image/ico” href=”favicon.ico”>
jika icon dalam *.png (non-IE) gunakan ini:
<link rel=”icon” href=”/favicon.png” type=”image/png”>
jika icon dalam *.gif (non-IE) gunakan ini:
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>
Jangan lupa Upload file header.php hasil editan anda ke folder “www/wp-content/themes/nama-themes-anda/” sehingga antara file & script diatas bekerja dengan maksimal
Lakukan Testing Hasil Hacking Themes Anda

Saya asumsikan anda telah sukses melakukan kedua hal diatas dengan benar, maka dari itu cobalah Refresh Browser anda dan masuk kembali ke URL Blog/Web anda, jika masih belum juga lakukan metode Clear Cache pada menubar OPTIONS di browser anda :)

TIPS: Anda juga dapat menambahkan akhiran ‘?’ di akhir alamat url Web/Blog anda agar Browser menganggap halaman tersebut adalah 100% baru