Favicon: Pengertian, Ukuran, Fungsi, Cara Membuat, dan Memasangnya

Table of Contents

Favicon (Favorite Icon)

Pengertian Favicon

Favicon (favorite icon) adalah ikon utama yang muncul pada address bar suatu laman web dan merupakan logo dari laman web tersebut. Favicon dikenal juga sebagai shortcut icon, website icon, URL icon, atau bookmark icon.

Favicon berfungsi sebagai identitas visual website yang memudahkan visitor untuk mengingat blog atau website Anda. Dengan adanya favicon, blog atau website Anda akan lebih mudah untuk menonjol di antara website dan blog lain sehingga orang lebih mudah menemukan situs Anda.

Ukuran Favicon

Ukuran Favicon biasanya akan disesuaikan dengan jenis platform yang digunakan, entah itu Google maupun iPad dan iPhone. Berikut rekomendasi ukuran Favicon di  beberapa platform yang bisa dijadikan rujukan pada saat proses pembuatan di antaranya,
1. Platform Google dianjurkan memakai ukuran 96×96.
2. Platform Opera Coast memakai ukuran 228×228.
3. Platform iPad Retina untuk iOS 7 ke atas memakai ukuran 152×152.
4. Platform iPad Retina untuk iOS 6 ke atas memakai ukuran 144×144.
5. Platform iPad Mini iOS 7 ke atas memakai ukuran 76×76.
6. Platform iPad Mini iOS 6 ke atas memakai ukuran 72×72.
7. Platform iPhone Retina untuk iOS 7 ke atas memakai ukuran 120×120.
8. Platform iPhone Retina untuk iOS 6 ke atas memakai ukuran 114×114.

Fungsi Favicon

Sebagai mana sudah dipaparkan di atas, Favicon berfungsi sebagai tanda unik dari sebuah website atau blog. Sebagai lambang visual dari sebuah halaman web. Dengan melihat sebuah favicon, pengunjung jadi tahu secara refleks bahwa itu adalah penanda website tertentu.

Artinya favicon itu menjadi jembatan memory yang kuat bagi pengunjung untuk mengingat bahwa itu adalah perwakilan dari sebuah situs atau blog, walaupun halaman situs tersebut, belum terbuka, belum tampak nama websitenya, tapi secara refleks, mereka sudah langsung tahu.

Karena itulah desain favicon itu sangat menentukan. Dia adalah mercusuar atau lokomotif sebuah halaman web dan blog. Favicon yang menarik dan elegan, akan membangun citra yang bonafit dan profesional terhadap sebuah web dan blog.

Cara Membuat Favicon

Sebagai langkah awal dalam proses pembuatan, silahkan menentukan Favicon generator mana yang akan digunakan. Sebab beda generator yang dipakai maka beda pula langkah-langkah dalam pembuatannya.

Jenis generator yang secara umum digunakan juga beragam di antaranya Faviconit, Favicon.pro, Anti Favicon, Faviconr, dan lain sebagainya. Biasanya Anda hanya perlu mengunggah gambar atau logo yang akan dijadikan Favicon ke generator tersebut.

Oleh generator nantinya gambar akan disetting memiliki ukuran sesuai standar. Namun generator di atas biasanya digunakan jika sudah memiliki gambar atau logo yang sesuai. Jika belum, terdapat beberapa generator yang menyediakan fasilitas pembuatan Favicon secara online.

Misalnya saja generator Webestools, Favicon.cc, Logaster, atau mungkin Xiconeditor. Situs-situs ini akan membantu Anda mendesain gambar atau logo sesuai kebutuhan. Mempermudah Anda dalam membuat dan memasang Favicon, maka penjelasan berikut mengambil contoh dari generator Favicon.cc:
Akses Situs Favicon.cc
Favicon.cc merupakan generator online untuk pembuatan Favicon, sesuai dengan penjelasan apa itu Favicon di atas. Akses situs ini, dan bisa membuat ikon dari nol dan bisa pula dipakai saat ikon sudah dimiliki.

Jika sudah memiliki ikon yang dirasa sesuai dan diedit memakai aplikasi Photoshop atau Corel Draw, maka tinggal diubah format filenya menjadi .ico memakai situs generator ini. Berikut detail langkah-langkahnya:
1. Buka situs Favicon.cc
2. Pilih menu “Import Image” dan tentukan dimensi gambar yang akan dipakai dengan memilih antara “Keep Dimension” atau “Shrink To Square Icon”.
3. Setelah memilih dimensi yang dipakai klik tombol “Upload” dan cari gambar sesuai lokasi penyimpanan di perangkat yang dipakai.
4. Klik “Preview” untuk melihat hasil Favicon yang dibuat sebelum diunduh, dan menekan tombol “Download” untuk mengunduhnya.

Proses Pasang Favicon ke WordPress
Setelah memiliki favicon, maka langkah selanjutnya tinggal dipasang ke website. Berikut tutorial pemasangan melalui WordPress :
Login ke WordPress
Masuk ke menu “Tampilan” dan pilih “Sesuaikan”.
Akan masuk ke halaman What You See Is What You Get, dan cari menu “Identitas Situs” dan upload gambar Favicon yang dibuat di atas.
Klik tombol “Pilih” setelah gambar Favicon selesai di upload di WordPress .
Silahkan cek tampilan terbaru WordPress Anda di tab baru.

Sementara tutorial pemasangan melalui blogger:
1. Masuk ke Blogger.com, kemudian pilih Tata Letak.
2. Pilih Edit Pada Layout Favicon
3. Hapus Favicon Lama, Kemudian Pilih Gambar yang baru saja anda buat, dan simpan
4. Maka Favicon anda akan diganti dengan favicon yang baru.

Ketika Anda mengganti Favicon, kesalahan yang mungkin terjadi adalah Favicon Anda tidak berubah ketika Anda mencoba untuk melihat perubahan favicon tersebut. Sebenarnya pada saat itu, Favicon Anda sudah tergantikan, namun karena cache yang lama masih tersimpan, maka Favicon yang tampil adalah favicon yang lama.

Untuk mengatasi hal tersebut, Anda tinggal melakukan clear cache pada browser Anda. Maka secara otomatis, favicon yang baru akan tampil di blog Anda.

Dari berbagai sumber

Download

Lihat Juga 

Cara Membuat Blogger

Berikut beberapa tutorial tentang bagaimana membuat dan mempercantik blogger menjadi website profesional di antaranya,
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 1)
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 2)
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 3)
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 4)
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 5)
Cara Membuat dan Mempercantik Tampilan Blogger Menjadi Website Profesional (Bagian 6)