เปลี่ยน Favicon ให้กับ Blogger

Blogger change faviconเบื่อมั้ยครับกับ favicon เดิมๆที่ให้มากับ Blogger ไม่ว่าจะเข้าเว็บไหนของใครเมื่อใดก็เป็น favicon สีส้มๆกับตัวบีเหมือนกันหมด อย่าดูถูก Favicon ไปนะครับเพราะ Favicon สามารถเพิ่มเอกลักษณ์และความน่าจดจำให้กับเว็บเราได้มากเลย ยิ่งถ้าเปิดหลายๆเว็บพร้อมกันก็จะช่วยให้ผู้ใช้สามารถหาเว็บของเราได้มากขึ้นแน่นอนครับ วันนี้มาเปลี่ยน Favicon เพื่อเพิ่มเอกลักษณ์ให้กับ Blog ของเรากันเถิดพี่น้อง เห็นแค่ Favicon ก็จำได้ทันทีเลยว่า Blog เรา
Favicon คืออะไร Favicon หรือ Favorite Icon นั้นก็คือ Icon เล็กๆขนาด 16x16 pixels ที่ทำหน้าที่คล้ายๆกับ Icon ของ Shortcut บน Desktop ครับ แต่ favicon เป็น Icon สำหรับเว็บซึ่งจะเห็นได้เมื่อเข้าไปยังเว็บนั้นๆ
blogger - change - favicon
Favicon ยังถูกเก็บเอาไว้เมื่อเราทำการเก็บเว็บนั้นๆเป็น Favorite หรือ Bookmark อีกด้วย ถ้าดูจากรูปด้านบนจะเห็นเลยว่าเว็บ youtube ที่มี favicon นั้นเด่นชัดมากๆไม่ต้องเสียเวลากวาดสายตาหานาน


วิธีเปลี่ยน favicon 1.สร้างรูปที่ต้องการให้มีขนาด 16x16 pixel และบันทึกรูปเป็น format png จริงๆแล้วสามารถใช้ format อื่นได้แต่ PNG จะสามารถทำให้ฉากหลังใสได้และภาพมีขนาดเล็ก โหลดได้เร็ว
2.นำรูปไปฝาก และ Copy URL ของรูปมา แนะนำ Picasa เพราะว่าฟรีและเป็นของ Google
3.ก็อป Code ด้านล่างนี้ไปแล้วแทนที่ yourURL ด้วย URL ของรูปที่เราฝากไว้ <link href='yourURL' rel='icon' type='image/png'/> ตัวอย่าง ผมนำรูปไปฝาก และได้ URL ของรูปคือ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAc43h9_iL6IskArVUGXSx2nZtEcGH7CQqBVIYFXDek6I2LVMUiNUIyWbObOgNlZKbNg9ZkO6eim3CpaNdCReinqAAD3G6I2THXIcxhdvE0KrvqHCXzmpf0AnfrdInvybP5UqeqWCkM0/ เมื่อนำมาแทนที่ตามข้อ 3 จะได้ว่า <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAc43h9_iL6IskArVUGXSx2nZtEcGH7CQqBVIYFXDek6I2LVMUiNUIyWbObOgNlZKbNg9ZkO6eim3CpaNdCReinqAAD3G6I2THXIcxhdvE0KrvqHCXzmpf0AnfrdInvybP5UqeqWCkM0/' rel='icon' type='image/png'/>
4.ล็อกอินเข้าสู่ Blogger

blogger - change - favicon
5.กด Layout ที่ Blog ที่เราต้องการเพื่อแก้ไขข้อมูล

blogger - change - favicon
6.กด Edit HTML จาก Tab ด้านบนแถวที่สอง

blogger - change - favicon
7.ในส่วน Edit Template ให้ค้นหาคำว่า </html>

blogger - change - favicon
8.นำ Code จากข้อ 4 ไปใส่เหนือ </html> แบบในรูป
9.กด Save Template เพื่อทำการบันทึก เรียบร้อยแล้วครับ!