Mengganti favicon blogspot dengan gambar sendiri


Yaa,, seperti yang kalian ketahui favicon adalah icon blogspot. Biasanya saat pertama kali kita membuat blog di blogspot, pasti tampilan icon pada address bar bentuknya kayak gambar diatas. Well, pada tutorial kali ini kita akan membahas tentang bagaimana mengganti favicon dengan gambar kita sendiri.Terus gimana caranya biar icon blogspot itu diganti dengan icon milik kita. Caranya mudah kalau kamu mengikuti langkah - langkah dibawah ini dengan benar.

1. Login blogspot >> Dashboard
2. Masuk ke Design >> edit HTML
3. Copy code dibawah ini


<link href='URL your image' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

dan pastekan dibawah kode  

<title><data:blog.pageTitle/></title> 

Sehingga bentuknya kan seperti ini

4. Ganti tulisan merah URL your image dengan kode URL icon kamu.
Kalau kamu ngambil iconnya dari internet, kamu tinggal klik kanan pada iconmu terus pilih "Copy Image URL" . Tapi kalau kamu buat sendiri, kamu harus upload dulu icon kamu.

5. Save Template.
Sekarang liat blog kamu, apakah sudah berhasil. Harusnya sih berhasil ^^

BAGIAN KEDUA
Sekarang kita setting favicon pada Page Halaman, kalau tadikan pada bagian Edit Halaman Sekarang kamu pindah ke bagian Page Halaman. Tujuannya agar saat kamu di follow blog lain, tampilan icon blog kamu tidak kembali lagi ke icon blogspot.
Ikuti langkah berikut yaa :

1. Masuk ke Design >> Page Halaman
2. Klik edit pada kotak favicon


3. Pilih choose file dan cari icon yang akan kamu upload.
Nah kalau ini, kamu harus download icon kamu dulu (kalau ngambil dari internet).
Kalau upload gagal dan ada tulisan "Not Square Image" atau "This file is too large. You can upload a file up to 100kb in size" ini berarti icon kamu harus diedit.
Baca ketentuannya dibagian atas :

Please use a square image that's less than 100 KB.

Ini artinya bahwa icon yang kamu upload harus berbentuk PERSEGI (Square) bukan yang lain dan ukurannya harus kurang dari 100 KB.
So, edit icon kamu. Gunakan photoshop saja. Buat agar panjang dan lebarnya saja.
Kalau masih bingung mengubah ukurannya, begini caranya :

  • Buka icon kamu di Adobe photoshop
  • Pilih menu Image >> Image size
  • Hilangkan tanda centang di kotak  Constrain Proportions
  • Ganti Width dan Height pada bagian Pixel Dimensions dengan ukuran yang sama.
  • Klik OK 
  • Save icon kamu

4. Kalau icon kamu muncul dan tidak ada tulisan seperti diatas berarti berhasil. 
Sekarang icon blog kamu sudah 100% berganti dengan icon kamu :)


Mengalami kesulitas dalam tutorial ini ?? Silahkan bertanya dikotak komentar ^^

17 comments:

Badrina Ibtisam said...

Nice tutorial lah!! :'))

vien said...

tanks infonya... :)

- said...

aku masih bingung

Tri Melia said...

bagian kedua berhasil, tapi bagian pertamanya ga,
kira2 apa yg salah?

Unknown said...

ukuran icon'a seberapa?

suci marlina said...

mksih mimin.....
(y)

MELYANA said...

thank for your inform :)

Unknown said...

aku udah berhasil ngupload dan settingnya udah slsai., stlah di liat kok ttep icon standart??

Widia Ningsih said...

kok punya gue gak muncul ?

Widia Ningsih said...

Udah sempet bisa, besoknya di liat .. udah gak ada faviconnya .. gimana dong ? bantuin ge .. gua udah ganti gati gambar favicon yang lain.. tetep gak bisa .. :(

Amelindha Vania said...

favicon udah berhasil di upload. tahap pertama dan kedua udah dilakuin. tapi tetep aja logo tab nya gak berybah,, tetep logo "blog" . apa ya yg salah ?

Unknown said...

Gak ada yang berubah,malahan malah jadi link http:// blabla yah? kok bisa???

Unknown said...

masih bingung untuk ganti favicon,tp sedang di coba gan,

Unknown said...

msh tetep gk kluar favicon ny, :'(
mohon bntuan ny

Lukman said...

URL Image kagak ketemu" :(

Unknown said...

info-infonya berguna banget :)
jangan lupa mampir yaa syouknows.blogspot.com

Unknown said...

okay....tnks saranya gan...
kunjung balik ya...
preview-in.blogspot.com

Post a Comment

Ketentuan comment :
1. Jangan comment SARA dan menghina
2. Gunakan bahasa sopan dan jelas
3. Jangan tinggalkan link mati (dead link)

Template by:

Free Blog Templates