Templates by BIGtheme NET

วิธีใส่ 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” />

<html>
<head>
<title>…</title>
<link rel=”shortcut icon” href=”http://www.enjoyday.net/images/youricon.ico” />
</head>
<html>

</html>

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

<html>
<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

คุณอาจสนใจเรื่องนี้

dmoz-thumb

รู้จักกับ DMOZ : Open Directory Project ที่ใหญ่ที่สุดในโลก

enjoyday พึ่งจะติด DOMZ วันนี้ก็เลยอยากจะมาแนะนำให้ได้รู้จักกันค่ะ ^^ ODP (Open Directory Project) เป็น Web Directory มาตรฐานสูง ที่รวบรวมเว็บไซต์ต่างๆ จัดไว้เป็นหมวดหมู่ ...

4 ความคิดเห็น

  1. ทำไมทำแล้วใน IE มันไม่ขึ้นครับ
    โคม ไฟฟอกขึ้นหมด

  2. มันติด cache ของตัว IE หรือป่าวครับ ลองสั่งเคลียร์ค่า cache ออกก่อน แล้ว refresh ใหม่น่าจะขึ้นแล้วนะครับ

  3. ขอบคุณครับเดียวลองดูใหม่

  4. clear cache แล้วก็ไม่โชว์เหมือนเดิมค่ะ เราใช้ ie9

Leave a Reply

Your email address will not be published. Required fields are marked *