วิธีใส่ favicon ให้เว็บไซต์คุณ

favicon ย่อมาจาก Favorite icon บางทีก็เรียก shortcut icon, website icon, tab icon หรือ bookmark icon

favicon เป็นไฟล์รูปภาพ นามสกุล .ico นิยมใช้เป็นรูปโลโก้ของเว็บไซต์ หรือเป็นรูปที่มีรายละเอียดน้อยเพราะขนาดรูปเล็ก เพียง 16 x 16 pixel  ไฟล์ favicon จะถูก upload ไปไว้ยังเว็บไซต์ เมื่อเราเรียกดูเว็บไซต์ด้วยโปรแกรมเว็บเบราเซอร์ (เช่น IE, Chrome, firefox) โปรแกรมจะแสดงรูป favicon ที่แท็บหน้าต่างเว็บ, ในช่อง Address bar และในลิสต์รายการเว็บที่เรา bookmark ไว้ ค่ะ

ปัจจุบัน favicon จะเป็นไฟล์ .ico, .gift หรือ .png ก็ได้ค่ะ โปรแกรมเว็บเบราเซอร์เวอร์ชั่นใหม่ๆ สามารถที่จะแสดงผลได้ รวมถึงขนาดรูป จะเป็น 32×32, 48×48, หรือ 64×64 pixel ก็ได้ค่ะ

Browser	ICO	PNG	GIF	animated GIF	JPEG	APNG	SVG
Firefox	1.0	1.0	1.0	Yes	Yes	3.0	No
Google Chrome	Yes	Yes	4.0	4.0	4.0	No	No
Internet Explorer	5.0	11.0	11.0	No	No	No	No
Opera	7.0	7.0	7.0	7.0	7.0	9.5	Dropped
Safari	Yes	4.0	4.0	No	4.0	No	No

ข้อดีของการใส่ favicon ให้เว็บไซต์ ก็คือ ทำให้เว็บมีเอกลักษณ์ คนจดจำได้ง่าย

วิธีใส่ favicon ให้เว็บไซต์

1. อย่างแรกเลยคือเตรียมไฟล์ icon ซึ่งมีนามสกุลเป็น .ico ก่อน

อาจจะทำภาพ favicon ขนาด 16×16 pixel  แล้วนำรูปมาแปลงเป็นไฟล์ icon (.ico) ก็ได้โดยใช้โปรแกรมต่างๆ ช่วยแปลง เช่น picture to icon
http://www.sharewareconnection.com/download-picture-to-icon-from-sharecon.html

หรือเข้าไปใช้บริการแปลงไฟล์จากเว็บไซต์
favicon.cc     เว็บนี้เราสามารถที่จะทำรูปได้เอง จะทำเป็นภาพเคลื่อนไหว (.gif) ก็ยังได้ค่ะ
favicontool.com
animatedfavicon.com

2. จากนั้นเรียกไฟล์ เว็บเพจ ของเรามาแก้ไขที่ส่วน head ให้ใส่ code <link rel …. /> เพิ่มเข้าไป
(ถ้าเว็บไซต์ มีไฟล์ประเภท header.php ก็แก้ไขที่ไฟล์นั้นไฟล์เดียวได้เลยค่ะ)

<link rel=“shortcut icon” href=“http://example.com/myicon.ico” />
<link rel=“icon” href=“http://example.com/image.ico” />
<link rel=“icon” type=“image/gif” href=“http://example.com/image.gif” />
<link rel=“icon” type=“image/png” href=“http://example.com/image.png” />

.
กรณีที่เป็นใช้เป็นภาพเคลื่อนไหว .gif   และไฟล์ที่จะใส่ favicon เก็บอยู่ใน folder เดียวกับไฟล์ favicon

ง่ายๆ แค่นี้แหละค่ะ

Last update: 01-04-2015