Membuat Favicon Blog dan Website Sendiri

Daftar Isi

Cara mengganti dan membuat favicon untuk sebuah blog dan web sebenarnya mudah tidak terlalu ribet dan sulit untuk kamu terapkan di blog dan web milik kamu sendiri.

Apa itu Favicon ?

Favicon adalah kependekan kata dari favorite icon, nama lain dari favicon yaitu shortcut icon, website icon, URL icon, atau bookmark icon. Gambar icon tersebut muncul di pojok kiri address bar browser dan bookmark browser. Seperti contoh dibawah ini.

Favicon memiliki ukuran 16x16, 32x32, 48x48, 64x64 dan 128x128 disarankan untuk menggunakan ukuran 16x16. Favicon ini bisa berupa gambar icon animasi yaitu icon yang bergerak dan miliki format gif, namun kebanyakan web dan blog jarang menggunakan favicon gif ini. Tapi jika kamu ingin menggunakan favicon gif silahkan ikuti tutorial pada artikel ini karena caranya sama saja. 

Apakah Favicon penting ?

Favicon itu penting untuk kamu gunakan karna dengan menggunakan favicon berarti blog dan web kamu memiliki identitas. Sebuah web dan blog yang memiliki identitas akan mudah di ingat oleh pengunjung dan dapat mudah di temukan di mesin pencarian. Favicon juga merupakan bagian syarat untuk website dan blog terlihat SEO Friendly.

---

Cara Membuat Favicon

Cara ini direkomendasikan untuk kamu yang tidak punya keahlian mendesain pakai photoshop karna cara ini menggunakan tool online atau dibuat secara online. Ikuti langkah - langkah di bawah ini.

Sebelum ke tutorial kamu di haruskan mempunyai logo atau gambar untuk dijadikan favicon, Jika belum silahkan kamu buat terlebih dahulu logonya secara online di situs penyedia logo gratis di bawah ini :

• graphicsprings
• wix
• placeit

Jika kamu sudah mempunyai logo atau gambar silahkan ikuti cara berikut :

1. Kunjungi Situs berikut http://www.html-kit.com/favicon/ .
2. Klik 'Choose File', lalu pilih gambar kamu.

3. Kemudian klik 'Generate FavIcon.ico'.

4. Setelah itu klik Download only favicon.ico. jika Anda menggunakan favicon animasi silahkan Download only animated_favicon.gif.

Sampai sini kamu sudah mempunyai favicon sendiri tinggal kamu upload ke website atau blog kamu.

---

Cara Memasang Favicon 

Pada tahap ini saya akan memberikan cara memasang favicon di blogger, wordpress, web hosting dan HTML. berikut langkah - langkahnya.

Cara Memasang Favicon di Blogger / Blogspot

1. Login ke akun blogger kalian

2. Pilih "Tata Letak" pada menu dropdown

3. Klik "Edit" di bagian Favicon, Lihat gambar berikut

4. Klik "Choose File", Pilih gambar favicon yang sudah kamu buat tadi lalu klik "Simpan".

Sampai sini kamu sudah bisa memasang dan mengganti favicon di blogger.

Cara manual memasang dan mengganti favicon di blogger : 

1. Login ke Blogger.

2. Klik Template / Tema.

3. Klik Edit HTML.

3. Copy kode dibawah ini lalu pastekan di atas kode </head>.

<link href='URL ICON' rel='icon' type='image/gif'/>

Keterangan:

Ganti 'URL ICON' dengan URL atau link gambar favicon kamu.

4. Simpan template dan lihat hasilnya.

---

Cara Memasang Favicon di Wordpress

1. Buka admin dashboard.

2. Klik menu Appearance lalu pilih Customize.

3. Klik Site Identity

4. Klik Select logo 

5. Klik Select Files

6. Pilih favicon lalu klik Open. 

 7. Terakhir klik Select

Sampai sini kamu sudah bisa memasang dan mengganti favicon di wordpress.

Cara manual memasang dan mengganti favicon di blogger : 

1. Akses file tema melalui FTP client atau File manager.

2. Cari folder /wp-content/themes/your-theme.

3. Upload favicon ke folder tema. Disarankan untuk menguploadnya ke subfolder seperti Assets.

4. Cari file bernama function.php dan tambahkan kode berikut.

function add_favicon() {
  echo '';
}
 
add_action('wp_head', 'add_favicon');

5. Baris setelah href=”’.get_template_directory_uri() adalah path ke favicon kamu. Pastikan kamu juga memiliki nama file yang tepat. Jika kamu menggunakan format file .ico, maka kode nya seperti berikut.

function add_favicon() {
  echo '';
}
 
add_action('wp_head', 'add_favicon');

---

Cara Memasang Favicon di Web Hosting

Pada tahap ini saya menggunakan Filezilla untuk menghubungkan ke FTP server, jika kamu belum mengerti apa itu Filezilla dan cara menggunakannya silahkan pelajari terlebih dahulu. Jika kamu sudah mengerti Fillezilla silahkan ikuti langkah - langkah berikut ini.

1. Sambungkan koneksi hosting Anda ke Filezilla.

2. Perhatikan di kolom sebelah kanan Filezilla ada Remote Site, yaitu file dan folder di website kamu. Kemudian klik folder public_html.

3. Perhatikan di kolom sebelah kiri Filezilla ada Local Site, yaitu file dan folder yang ada di komputer kamu. Kemudian upload file favicon.ico. Jangan lupa untuk memberi nama favicon.ico karena browser hanya bisa membaca nama file tersebut untuk kemudian memunculkan favicon blog atau website Anda. 

Sampai sini kamu sudah bisa memasang dan mengganti favicon di web hosting.

---

Cara Memasang Favicon di HTML

Cara ini untuk kamu yang ingin belajar memasang favicon di HTML dan web yang kamu buat masih bersifat offline atau masih di jalankan di localhost. Berikut langkah - langkahnya.

1. Buka file index.html atau index php.

2. Copy kode berikut dan pastekan di bawah tag kode <head>

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

Keterangan :
Ganti Share28s.ico menjadi nama favicon kamu dan pastikan formatnya benar, Jika kamu menyimpan file gambar terpisah dari folder index dan menyimpannya di folder lain seperti contoh kamu menyimpan di folder images maka kode nya menjadi seperti berikut.

<link rel="shortcut icon" href="images/Share28s.ico">

4. Simpan kode. .

Sampai sini kamu sudah bisa memasang dan mengganti favicon di HTML. 

---

Kesimpulan

Menggunakan favicon dalam blog dan website itu sangat penting agar pengunjung bisa familiar dengan sebuah website dan blog yang di kunjunginya dan pengunjung bisa mudah menemui website dan blog yang mempunyai favicon karena ada perbedaan yang menonjol diantara yang lainnya, website dan blog yang memakai favicon akan terlihat profesional.

Pembahasan mengenai bagaimana cara membuat hingga memasang favicon di blog atau website sudah saya sampaikan. Silahkan kamu coba tutorial lainya pada website ini yang mungkin bisa membantu kamu untuk menyelesaikan masalah. Semoga bermanfaat!.