About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3 Favorites Icon %E0%B9%83%E0%B8%AB%E0%B9%89%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C %28Website icon%29 [Article ID : 139]


เรื่อง : มาทำให้เว็บไซต์มี Favorites Icon กันเถอะ (Favicon)

มีแฟนเว็บสงสัยถามกันเข้ามาว่า...
ทำไมบางทีเข้าไปบางเว็บไซต์ เช่น pantip.com พอทำการ Add Favorite เว็บนั้นไว้แล้ว Icon เว็บถึงเปลี่ยนเป็นรูปต่าง ๆ ได้ หรือสังเกตที่ Address ของ Web Browser แล้วมีรูปไอคอนเล็ก ๆ ของเว็บเขาปรากฎแสดง ?
บทความนี้ DwThai.Com จึงมาแนะนำการทำ Favorite Icon ให้กับเว็บกัน ดังนี้

ตัวอย่างเว็บที่มีการใช้งาน Favorites Icon

วิธีการทำไอคอน Favorites ให้เว็บไซต์

สำหรับขั้นตอนการทำไอคอนของเว็บนั้น มีดังนี้

จัดเตรียมไฟล์ไอคอนที่ต้องการ

ก่อนอื่นเราต้องมีการจัดเตรียมไฟล์รูปไอคอนที่ต้องการนำมาใช้เสียก่อน โดยที่รูปไอคอนที่จะนำมาใช้ได้นั้น ต้องมีคุณสมบัติ ดังนี้
  • เป็นไฟล์ในฟอร์แมต *.ico (ปัจจุบัน *.png ก็ใช้ได้นะ)
  • กำหนดชื่อไฟล์ไอคอนนี้ว่า favicon.ico
  • ขนาดของไอคอน 16 x 16 pixel หรือ 32 x 32 pixel
  • เว็บไซต์สร้าง Icon : favicon.cc
*ตัวอย่าง

Insert Code

เมื่อได้เตรียมไฟล์สำหรับที่จะเป็นไอคอนแล้ว จากนั้นทำการใส่โค้ดดังต่อไปนี้ ลงไปที่ในส่วน Head ของเว็บเพจ ดังนี้
<head>
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
เพียงเท่านี้เว็บไซต์เราก็จะมี Favorites Icon แล้วครับ
ปัจจุบัน Web Browser ฉลาดพอทีจะค้นหาไฟล์ favicon.ico นำขึ้นมาแสดงที่ Address Bar โดยไม่จำเป็นต้องอาศัยโค้ดข้างต้น เพียงแต่ทำการอัพโหลดไฟล์ favicon.ico ไปไว้ที่ Root Directory ของเว็บไซต์ก็เพียงพอแล้ว แต่เขียนไว้ก็ดีครับ เพื่อ App อื่น ๆ ที่ต้องการใช้โค้ดนี้.
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

Insert Garuda (ใส่ตราครุฑ) for Google Docs

Insert Garuda (ใส่ตราครุฑ) for Google Docs ใช้เพื่อจัดทำเอกสารราชการ ที่ต้องมีการใช้งานตราสัญลักษณ์รูปครุฑ ...  

คุณสมบัติของเว็บไซต์ที่ดี (สำหรับเยาวชน) From :: thaicleannet

เรื่อง :: คุณสมบัติของเวบไซต์ที่ดี สำหรับเยาวชนwebmaster หรือผู้ที่จะจัดทำเว็บไซต์ขึ้นมาสัก 1 ไซต์ สิ่งที่เราควรคำนึ...  

การ Layout โครงสร้างหน้าเว็บ (Web Page Layout)

เรื่อง :: การ Layout โครงสร้างหน้าเว็บเพจหน้าเว็บเพจ การ Layout คือ การกำหนดโครงร่างหรือโครงสร้างของหน้า...  

DwThai.Com ใน นสพ.ไทยรัฐ ครั้งที่ 2

เรื่อง : เมื่อ DwThai.Com ได้ลงหนังสือพิมพ์ไทยรัฐ เป็นครั้งที่ 2 ผมได้ทราบข่าวจากแฟนเว็บไซต์ท่านหนึ่งทาง MSN ว่า DwThai.C...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*