Membuat Favicon Blog Sendiri dengan Photoshop

Posted on

Kali ini dalam artikel tips komputer saya akan mengajak teman-teman semua yang memiliki blog dan ingin membuat favicon atau favorites icon sendiri, nah simak artike saya ini.

Favicon juga dikenal sebagai website icon, shortcut icon, url icon, atau penunjuk icon. Favicon berdimensi 16 x 16 pixel yang berkaitan dengan gambaran umum dari suatu situs atau blog yang diwakilinya. Saat ini Favicon sudah dapat ditampilkan hampir pada semua browser seperti Mozilla Firefox, Opera, Internet Explorer, dan sebagainya dengan syarat situs atau blog tersebut  sudah mempunyai favicon-nya sendiri.

Untuk membuat Favicon kreasi kita sendiri, kita dapat melakukannya dengan menggunakan software pengolahan gambar seperti Adobe Photoshop CS dan plugins File Format photoshop agar hasil gambar yang kita buat dapat di simpan dengan format Windows Icon yang extention *.ico . Disini saya mencontohkan membuat Favicon untuk blog Aditya Perdana ini yang menggunakan engine blog wordpress.

Untuk plugins File Format (Icon) photoshop dapat didownload disini. Disana Anda pilih sesuai sistem operasi yang Anda gunakan. Setelah Anda donwload, extraklah (bagi yang menggunakan sistem opreasi windows xp) di dalam folder “\Plug-ins\File Formats” pada folder program file-nya Adobe. Dalam kasus saya, saya mengextraknya pada folder “C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats” .

Setelah selesai Anda dapat membuka Adobe Photoshop CS Anda, dan ikuti langkah-langkah sederhana ini :

  • Buatlah gambar baru untuk Favicon Anda dengan dimensi 16 x 16 pixel
  • Hasilnya adalah bidang kerja yang sangat kecil, untuk memudahkan Anda membuat desain atau gambar silahkan diperbesar dengan fasilitas zoom yang ada
  • Setelah selesai dengan desain Fovicon baru Anda, simpanlah dengan extention Windows Icon (*.ICO)
  • Selamat Anda telah selesai membuat desain Favicon Anda sendiri

Langkah selanjutnya adalah mengupload Favicon baru Anda ke directory public blog atau website Anda. Anda dapat menggunakan FTP tentunya. Setelah Anda upload Anda harus menambahkan 1 baris script sederhana untuk memanggil Favicon baru Anda agar dapat terlihat pada web browser.

Hal terakhir yang perlu kita lakukan adalah meng-edit file header.php yang ada pada template wordpress yang kita gunakan kemudian menambahkan kode dibawah ini diantara tag <head> dan </head>. Setelah selesai simpan kembali.

Kode utnuk wordpress

<link rel="shortcut icon" href="favicon.ico">

*Catatan : Jika blog Anda terletak di dalam folder/directory setelah directory root public, misalnya public_html/blog. Maka Anda harus membunya kodenya seperti ini :

<link rel="shortcut icon" href="/blog/favicon.ico">

Kode untuk blogspot

<link rel="shortcut icon" href="http://www.abc.com/favicon.ico" >

*Catatan : Untuk blogspot menggunakan url sendiri untuk file gambar (favicon-nya) jadi sesuaikan alamat favicon tempat Anda meletakan gambarnya pada kode script.

Sekarang selesai sudah semua hal yang perlu kita lakukan. Untuk melihat hasilnya silahkan buka kembali blog Anda. Jika masih blom muncul perikasa kembali apakah masih ada kesalahan atau ada yang terlupakan. 😀

Selamat mencoba dan semoga bermanfaat…

6 comments

Leave a Reply

Your email address will not be published.