Loading ...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 
Apakah itu Favicon dan Apakah Kegunaannya?
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 Website/Blog pada Address Bar Browser (Firefox, Internet Explorer, Flock, dll) Internet anda.
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 Plugin 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? 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 … 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
- 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”>
- jika icon dalam *.ico bisa gunakan ini:
- 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
Loading ...
kok rasanya susah banget ya buatnya, soalnya saya tidak ada darah seni
Ya itulah desain grafis… penuh mistery… ilmu yang ga wajib dipelajari di bangku kuliah, ilmu yang butuh inspirasi untuk menciptakannya… tapi ga ada salahnya terus mencoba kan
terimakasih komentarnya
alhamdulillah, nemu artikel keren! thanks mas! salam kenal…hehe
Terimaksih saya juga banyak mengulas dari blog Import kok, saya coba suguhkan yang terbaik saja untuk para designerlistic
@ Tutorial Memulai Membuat Favicon 16×16 Pixel.
Hahaha…ternyata yg dicari selama ini ada disini. hmmm… nice tips!
Oh ya mas, gimana dengan cara “Save for Web & Device”? saya selalu menggunakan fasilitas tsb untuk me-resize gambar, tapi hasilnya masih kabur & detailnya kurang…
Sebetulnya save for web itu memang untuk keperluan tampilan di Internet biar ringan, kalo untuk keperluan Digital Printing sebaiknya disave biasa saja dengan DPI diatas 300…
Atau bisa juga dicoba pilih format PNG ketika save for web jangan GIF/JPG…
Selamat mencoba
slamat malam bang, gmana cara unduh Photoshop Plugin? sy sdh masuk tp bingung, klik yg mana untuk downloadnya?
dengan adanya designerlistic magazine,saya merasa terbantu untuk keperluan usaha digital printing……thank u banget yach
Sama-sama
malahan saya yang belum juga terealisasi membuat perusahaan Digital Printing-nya hehe…