Langsung ke konten utama

Cara Mengganti Icon Favicon di Blogger

Pada tutorial kali ini saya akan membagikan tutorial tentang cara mengganti icon favicon yang ada di Blogger. Kita sering melihat icon favicon ini di atas address bar, biasanya pada saat awal pembuatan sebuah blog, kita akan mendapati tampilan default dari icon favicon tersebut.


Favicon sendiri berasal dari kata "Favorites Icon" yang berarti ikon favorit, tetapi jangan takut gambar yang kalian ingin masukan tidak sesuai, karena untuk mengupload icon ini, bisa menggunakan gambar format png ataupun gif.
Cara Mengganti Icon Favicon di Blogger

Favicon Icon ini bisa kalian buat sendiri menggunakan berbagai macam tools, asalkan ukuran tinggi dan lebar dari gambar tersebut sama.

Kenapa sih kita harus mengganti Icon Favicon?

Jawaban yang paling tepat adalah karena Icon ini melambangkan secara umum bagaimana karakter dari blog yang kita miliki, seperti dari warna, bentuk gambar ataupun bentuk teks.

Lalu bagaimana cara membuat Favicon seperti blog Tutorial Umum?

Karena disini saya menggunakan perpaduan teks dan flat desain jadi di sini saya menggunakan 2 tools online, yaitu Transparent Text Generator dan Flat Icon Generator. Nah, sebelum mengganti icon favicon yang akan kita gunakan, ada baiknya kita membuat icon favicon yang ingin kita buat terlebih dahulu. Untuk cara membuat icon favicon, ikuti langkah-langkah dari saya berikut ini.

Cara Membuat Icon Favicon Flat Design di Blogger

  1. Langkah pertama kalian masuk ke halaman Transparent Text Generator, untuk menentukan teks yang ingin digunakan.
  2. Di kolom Text, sebaiknya kalian isi dengan singkatan kata dari blog kalian, misalnya Tutorial Umum yaitu TU.
    Cara Mengganti Favicon pada Blog
  3. Setelah itu langsung saja ke kolom Text Color, dan masukan warna yang kalian inginkan.
  4. Untuk pengaturan lainnya, kalian bisa melihatnya di artikel saya tentang Cara Membuat Judul Blog dengan Gambar Teks Keren.
  5. Pilih font yang kalian inginkan, kemudian klik Generate, setelah itu klik Download Image untuk mendownload gambar.
    Cara Mengganti Icon / Favicon pada Blogspot
  6. Setelah selesai, masuk ke halaman Flat Icon Generator.
  7. Silahkan klik UPLOAD AN ICON, kemudian cari gambar yang sudah di download tadi.
    2 Cara Mengganti Tampilan Icon Favicon di Blog
  8. Untuk pengaturannya, kalian bisa melihat artikel saya tentang Cara Membuat Gambar Flat Design Secara Otomatis.
  9. Setelah selesai mengatur, pilih DOWNLOAD.
    Cara Mengganti Icon Favicon Blogger Pada Address Bar
  10. Kemudian kita siapkan untuk mengganti icon yang lama.


Untuk cara mengganti icon favicon yang baru di blogger, ikuti langkah-langkah dari saya di bawah ini.

Cara Mengganti Icon Favicon di Blogger

Cara Upload Icon Favicon di Blogger

  1. Masuk ke akun Blogger kalian.
  2. Pilih menu Tata Letak.
  3. Di halaman Tata Letak, klik edit di widget Favicon.
    Cara Mengganti Logo Blogger Pada Address Bar Dengan Logo Sendiri
  4. Setelah masuk ke widget tersebut, klik Pilih File untuk mengupload file yang ingin di jadikan icon.
    Cara Membuat dan Mengganti Icon (Favicon) Blog
  5. Setelah selesai, klik Simpan.
  6. Jika berhasil maka icon akan muncul di address bar blog kalian.
    CARA MENGGANTI FAVICON BLOGSPOT


Untuk cara mengganti icon favicon yang lama, atau sudah terpasang tidak jauh berbeda, tetapi kita harus menghapus icon yang lama terlebih dahulu, berikut adalah langkah-langkahnya.

Cara Mengganti Icon Favicon yang Sudah Terpasang di Blogger

  1. Langkah pertama masuk ke akun Blogger kalian.
  2. Pilih menu Tata Letak, klik edit di widget Favicon.
  3. Klik Hapus, kemudian klik Pilih File untuk mengupload icon yang ingin di ganti.
    Cara Mengganti Logo Blog [Favicon] Dengan Gambar Sendiri
  4. Setelah selesai, klik Simpan.
  5. Sekarang icon kalian berhasil di ganti dengan yang baru.
    Mengganti Icon Favicon Blogger pada Address Bar


Catatan : Jika icon favicon belum muncul, silahkan bersihkan cache dan history browser kalian.

Demikian artikel dari saya mengenai cara mengganti icon favicon di blogger. Jika ada pertanyaan mengenai hal yang berkaitan dengan artikel di atas, silahkan tetap kunjungi blog Tutorial Umum.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai tutorial blogging, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger - Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, kali ini saya akan membagikan widget yang sama tapi dalam bentuk yang berbeda. Apa bedanya ? Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini. (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini. Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger Langkah pertama masuk ke akun blogger kalian Kemudian pilih menu Tata Letak , kemudian pilih lokasi widgetnya Pilih Tambahkan Gadget , kemudian pili...

Cara Membuat Button Responsive 13 Gaya dengan CSS

Button atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css . Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja. (Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya : 6 warna Biru Orange Merah Hijau Ungu Putih 4 ukuran XS (Extra Small) SM (Small) MD (Medium) LG (Large) 2 pengaturan Block Buttons Outline(Accessibility) Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/ . Tampilan Gaya Button Slant, Unite, Float Tampilan Gaya Button Pill, Material - flat, Material - circle Tampilan Gaya Button Fill, Gradient, Jelly Tampilan Gaya Button Stretch, Minimal, Bordered...

Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger

Tombol download dan demo sangat di butuhkan pada saat kita membagikan sesuatu di blog yang kita miliki. Apalagi untuk kalian yang memiliki blog seperti blog share template, software, film, musik, dan lain sebagainya. Untuk itu kali ini saya akan membagikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Responsive 13 Gaya dengan CSS ) Kenapa saya bilang ringan, karena tombol ini hanya menggunakan css jadi tidak masalah karena tidak menggunakan javascript yang berlebihan. Cara konfigurasinya sangat mudah kalian tinggal memasukan link demo atau download kalian. Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tema , kemudian pilih Edit HTML . Cari script ]]></b:skin> atau ...

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit Setelah sebelumnya saya membagikan template Hijau Magazine v1.0 , kali ini saya akan membagikan template versi terbaru dari Template Tutor Magazine , yaitu Template Tutor Magazine 3D v1.0 . (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Mengapa 3D ? Karena saya sudah menyesuaikan beberapa CSS yang ada, agar tampilannya terlihat 3D atau terlihat seperti nyata. Di Template Tutor Magazine ini, saya juga sudah memperbarui beberapa bug yang ada di Template Tutor Magazine sebelumnya. Untuk keterangan beberapa bug dan update terbaru diantaranya adalah. Perbaikan Thumbnail Gambar menu Postingan Perbaikan Thumbnail Gambar menu Postingan  Perbaikan Primary menu dan Judul Blog  Perbaikan Primary menu dan Judul Blog   Update H2 Update H2  Popular Posts update style  Popular Posts update style  Perubahan Posisi & update beberapa fitur.  Perubahan ...