Enjoyday แนะนำการสร้างเว็บไซต์ สอนการใช้งาน CMS และเรื่องราวต่างๆ ที่เจ้าของบล็อกสนใจนั่นแหละ
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” />
<head>
<title>…</title>
<link rel=”shortcut icon” href=”http://www.enjoyday.net/images/youricon.ico” />
</head>
<html>
…
</html>
.
กรณีที่เป็นใช้เป็นภาพเคลื่อนไหว .gif และไฟล์ที่จะใส่ favicon เก็บอยู่ใน folder เดียวกับไฟล์ favicon
<head>
<title>…</title>
<link rel=”shortcut icon” href=”favicon.ico” />
<link rel=”icon” type=”image/gif” href=”animated_favicon.gif” />
</head>
<html>
…
</html>
ง่ายๆ แค่นี้แหละค่ะ
Last update: 01-04-2015
ทำไมทำแล้วใน IE มันไม่ขึ้นครับ
โคม ไฟฟอกขึ้นหมด
มันติด cache ของตัว IE หรือป่าวครับ ลองสั่งเคลียร์ค่า cache ออกก่อน แล้ว refresh ใหม่น่าจะขึ้นแล้วนะครับ
ขอบคุณครับเดียวลองดูใหม่
clear cache แล้วก็ไม่โชว์เหมือนเดิมค่ะ เราใช้ ie9