1. Guru Blogger ID
Cara Merubah Logo Blogger & Mengganti Favicon di address Bar

Cara Merubah Logo Blogger & Mengganti Favicon di address Bar

Ada 2 jenis logo dalam sebuah blog, yaitu logo yang terletak di bagian header website dan logo favicon yang ada di browser


Dalam tutorial kali ini GuruBlogger akan sedikit membahas tentang bagaimana cara membuat logo sekaligus cara merubah logo di blogger




Perbedaan Favicon dan Logo Pada Blog




Pengertian Favicon


Favicon adalah singkatan dari favorite icon yang juga dikenal dengan sebutan shortcut icon, website icon, tab icon, URL icon, atau bookmark icon

Fungsi favicon adalah untuk mengidentifikasi sebuah blog atau website dengan cepat pada tab browser, toolbar, bookmark, history dll



Dengan favicon maka halaman blog / web kita mudah diidentifikasi dan dibedakan dengan halaman website lain

Favicon sendiri adalah sebuah gambar dengan format .ico dengan ukuran 16 pixel X 16 pixel,

Cukup kecil memang namun memberikan perbedaan yang signifikan terkait branding dan legitimasi website kita




Logo


Logo adalah sebuah tulisan atau gambar yang digunakan untuk merepresentasikan sebuah brand atau merek

Ada 2 buah jenis logo yang dikenal masyarakat yaitu logo type (logo yang berupa tulisan) dan logo mark (logo berupa simbol atau gambar)


pengertian-logo-blogger

Tanpa harus mnyebut kedua logo diatas, semua netizen pasti mengenalnya





Cara Membuat Logo Dan Favicon Untuk Blog


Untuk yang sudah terbiasa berkecimpung dalam dunia design, membuat sebauh logo itu mudah

Namun bagi blogger pemula terkadang membuat logo yang bisa sinkron dengan tema dan warna website agak susah, begitupun favicon

Gurublogger memiliki sedikit tips terkait bagaimana cara mudah membuat logo dan favicon untuk blog

Beriku ini adalah website yang sering digunakan oleh gurublogger untuk mebuat logo dalam bentuk logotype



  1. Flammingtext
  2. Cooltext

Pada kesempatan kali ini gurublogger akan menggunakan Flammingtext sebagai contoh

membuat-dan-merubah-logo-blogger
  1. Kunjungi flamingtext.com kemudian ketik nama logo dan tekan tombol go seperti contoh gambar diatas




membuat-dan-merubah-logo-blogger
  1. Selanjutnya akan diperlihatkan preview logo yang kita buat, pilih logo yang cocok dengan cara menavigasi tombol pada langkah 2
  2. Bila dirasa sudah menemukan logo yang cocok tinggal klik pada logo tersebut


membuat-dan-merubah-logo-blogger
  1. Langkah selanjutnya silahkan klik pada edit logo untuk melakukan beberapa penyesuaian




membuat-dan-merubah-logo-blogger
  1. Selanjutnya silahkan sesuaikan logo sesuai dengan keperluan, apakah background transparen, font menggunakan arial, penyesuaian besar font dll. Bila sudah sesuai selanjutnya klik tombol next




membuat-dan-merubah-logo-blogger
  1. Klik download untuk mengunduh logo

Siapa bilang mendesain logo itu sulit?

Untuk membuat favicon caranya kurang lebih sama, teman teman harus mendesain logo untuk favicon terlebih dahulu seperti yang dicontohkan dalam contoh membuat "logo blog" diatas


Gunakan huruf pertama sebagai favicon

Bila favicon sudah siap selanjutnya convert file png atau jpg yang hendak dijadikan favicon menjadi file ber exstensi .ico menggunakan favicon generator

Teman teman bisa memilih berbagai macam dimensi, namun pada umumnya dimensi favicon adalah 16px X 16px




Cara Merubah Logo Blogger dan Favicon


Bila logo dan favicon blog sudah siap, maka sekarang saatnya mengganti favicon default blogger menggunakan favicon dan logo buatan sendiri




Cara Merubah Logo Blogger


Tampilan logo di blog secara default berada di sebelah kiri atas blog kita

cara-mengganti-logo-blogger-di-address-bar


Mengganti Logo Blogger dengan Text

cara-mengganti-logo-blogger-di-address-bar

Secara default logo blogger sudah dalam bentuk text, bila tidak maka untuk merubah kembali logo ke dalam bentuk text adalah sebagai berikut



  1. Login ke backend blogger kemudian pilih theme
  2. klik edit (tanda pensil pada logo)
  3. Isikan Blog title (logo dalam bentuk text)
  4. Isikan Blog description (snippet dibawah logo)
  5. Pilih Behind title and description
  6. Save



Mengganti Logo Blogger dengan Gambar


cara-mengganti-logo-blogger-dengan-gambar
Bila ingin mengganti logo blogger dalam bentuk gambar (bukan text) caranya adalah

  1. Login di blogger kemudian klik theme
  2. Edit header dengan cara meng klik tombol pensil
  3. Pada bagian image silahkanpilih from computer kemudian upload gambar, atau dalam contoh kali ini gurublogger menggunakan from the web paste an image url (paste link gambar yang sebelumnya sudah diupload)
  4. Selanjutnya pilih instead of title and description
  5. Save

catatan: jangan lupa menyesuaikan lebar dan tinggi logo sesuai dengan lebar dan tinggi container header agar tidak overflow (melewati batas kontainer)




Cara Mengganti Favicon Blogger


Setelah merubah logo, sekarang waktunya mengganti favicon default blogger dengan favicon buatan sendiri agar terlihat lebih profesional

Terkadang menggunakan favicon blogspot memang memberi kesan kita tidak profesional dan terlihat hanya seperti sebuah blog gratisan yang umum beredar

Walaupun kenyataannya memang hanya sebuah blogspot namun tampil profesional bukanlah hal yang sulit



cara-mengganti-logo-blogger-di-address-bar


cara-mengganti-logo-blogger-di-address-bar

Pada tampilan blogger baru, menu favicon berada di setting >> Basic

  1. Login di Blogger kemudian pilih >> Setting
  2. Pada bagian Basic >> Klik pada menu favicon



cara-mengganti-logo-blogger-di-address-bar
  1. Selanjutnya klik pada >> choose file
  2. Browse lokasi kita menyimpan gambar favicon
  3. Pilih file favicon dengan ekstensi .ico
  4. Open file
  5. Kemudian save


Setelah itu kita refresh browser, dan sayangnya terkadang favicon tidak langsung tampil di browser

Hal itu disebabkan karena browser masih menyimpan cache favicon lama

Caranya adalah gunakan browser lain yang tidak pernah digunakan untuk mengakses blog kita, atau clear cache dan refresh kembali browser

Bila tidak ingin repot repot maka biarkan saja, setelah selang beberapa waktu maka favicon akan ditampilkan oleh browser.



Selamat Belajar...

Komentar

Silahkan, saya ga nggigit !