Tutorial dasar dan singkat kali ini Satelitweb akan membahas mengenai favicon.

Favicon adalah icon atau gambar kecil, biasanya berukuran 16 x 16 atau juga 32 x 32 dari website Anda yang akan muncul di lokasi bar dan bookmark menu browser pengunjungnya. Hal ini dilakukan dan sangat baik sekali untuk melakukan salah satu teknik branding merek dan logo perusahaan Anda daripada hanya mengunakan icon default.

Lihat letak dan contoh favicon Komisi Pemilihan Umum (KPU) dan Facebook :

Ok, sekarang kita mulai membuatnya lewat Photoshop, salah satu aplikasi pengolahan pixel paling top di dunia.

Pertama buatlah satu file baru di Photoshop dengan ukuran 16 x 16 pixels seperti gambar di bawah :

Zoom sampai kanvas kerja Anda hingga terlihat besar, dan silakan Anda buat dan kreasikan sesuai kemauan, bisa dengan alat bantu tool pen maupun teks.

Berikut hasil akhir contoh favicon yang Satelitweb buat :

Kemudian simpan icon sebagai favicon.ico.

Setelah itu, favicon yang sudah Anda buat diunggah ke direktori website Anda.

Sekarang silakan Anda memasangkanya ke website Anda dengan cara menambahhkan kode di bawah ini sebelum tag </head>.

<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico” />

Catatan : 

Selain dengan cara ini, ada juga dengan cara lain yang lebih mudah yaitu dengan mengunggah logo / gambar Anda ke aplikasi online yang khusus mengubahnya menjadi favico.ico.

Demikian tutorial dasar singkat ini dibuat, terima kasih dan semoga bermanfaat. 🙂