ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
ส่งอีเมล์ยืนยันการใช้งาน?
เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

หน้า: [1]   ลงล่าง
  ตอบ  |  ส่งหัวข้อนี้  |  พิมพ์  
ผู้เขียน หัวข้อ: เอาวิีธีการทำ favicon icon มาฝากจ๊ะ.  (อ่าน 18855 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Nathan_bc
อดีตกาลผ่านมาแล้วก็ช่างมัน
ทำเนียบรุ่น BC46
โปรแกรมเมอร์ระดับโคตรเทพ
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 2874


ปัจจุบันยังชีพอยู่สู้ต่อไป

one_bc@hotmail.com 085-8383607
ดูรายละเอียด เว็บไซต์
« เมื่อ: October 06, 2008, 11:52 AM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง


เอาวิีธีการทำ favicon icon มาฝากจ๊ะ....อ่านตามบทความด้านล่างเลยคับปม

favicon คืออะไร?
มันก็คือ icon ที่อยู่ตรง url หน้า http:// ที่บ่งบอกความเป็นเว็บของคุณนั่นเอง เช่นเดียวกับ icon ที่อยู่บนหน้า desktop น่ะแหละครับ



ทำไมต้องมี favicon?
1. ทำให้เว็บเราดูสวยขึ้นเล็กน้อย อย่างผิดหูผิดตา (ถ้ามีคนช่างสังเกต เพราะว่ามันเล็กมาก 16x16 เท่านั้น)
2. ทำให้ผู้เยี่ยมชมสามารถจดจำเว็บเราได้ จากภาพ หรือสัญลักษณ์ ทางวิทยาศาสตร์เขาว่า..ในเชิงการใช้สีหรือรูปสัญลักษณ์แทน สิ่งของหรือบุคคลนั้นๆ จะช่วยให้มนุษย์จดจำได้ดี ... เกี่ยวกันมั้ยหว่า 555
3. เวลาเรากด Bookmarks หรือ บันทึกหน้านั้นไว้เป็น รายการโปรด ของเราก็จะเห็นไอคอนนั้นได้เด่นชัด งดงามอร่ามศรี



ทำยังไง?
ก่อนอื่นก็ต้องมีโปรแกรมที่สามารถสร้าง .ico ได้ แล้วเราก็สร้าง icon ของเรา (ยากฮิ)

มีวิธีง่ายกว่านั้นมั้ย
ปัจจุบันนี้มีเว็บ tool ที่ช่วยให้เราสร้าง favicon ได้เพียงแค่ อัพ, คลิก, save 3 ขั้นตอนง่ายๆ ง่ายมั่กๆ ณ ที่นี้ผมจะยกตัวอย่างเว็บนี้มาแล้วกันครับ ลองมาหลายเว็บแล้ว อันนี้ เข้าใจง่ายสุด ไม่ยุ่งยากครับ

คลิกเข้าไปที่เว็บด้านล่างนี้กันเลยครับ!!



http://tools.dynamicdrive.com/favicon/


ทีนี้ท่านก็จะเห็น ปุ่ม Browser ใต้ปุ่มเขียนว่า "Supported file formats: gif, jpg, png, and bmp." เขารองรับภาพเกือบทุก format จริงๆ แจ่มๆ ทีนี้ท่านก็เลือกภาพเลยครับ อยากให้ภาพไหนมาเป็น icon ของท่าน ยัดมันเข้าไปเลย ผมจะใช้ภาพหลอดไฟ แบบในรูปนี้แล้วกันนะครับ อ่ะเดี๋ยวก่อน อ่านตรงนี้กันหน่อยครับ
# Use a gif or png with transparency if you require it.
# Maximum file size: 150.00 kB.

เขา ว่าถ้าภาพของเราเป็นแบบโปรงใส icon ก็จะโปร่งใสด้วยนะคร้าบ ว้าวว แจ๋วจริงๆ และขนาดไฟล์ของรูปที่เราจะใ้ช้ทำ icon ก็ต้องไม่เกิน 150.00kb นะครับ ภาพที่ผมใช้ 70 x 70 pixel ขนาด 2.83 KB


เมื่อ เลือกรูปแล้ว มาดูตรงนี้กันหน่อย สำหรับคนที่ไม่ได้ทำ Favicon สำหรับบนเว็บนะครับ ท่านสามารถทำ icon ใช้เองได้ เพียงแค่ติ๊กเครื่องหมาย ถูก ในช่องที่ท่านต้องการ (ลองทำกันดูนะ)


เมื่อได้แบบนี้แล้ว จะรออะไรอยู่ล่ะครับ กดดิ๊ Create icon


แต๊น แตน แต้นนนนน อะไรจะง่ายดายปานชะนี้ ได้มาแล้วครับ icon ของเรา กด download เลยครับเพื่อ save มาไว้ในเครื่องเรา


ในที่สุดผมก็ได้ icon ที่เป็นนามสกุล .ico มาเป็นของผมแล้ววววว 555+


เอามาใส่ยังไง?
ทีนี้เ็ป็นขั้นตอนสุดท้ายแล้ว ล่ะครับ ให้เอา favicon.ico มาเก็บไว้ใน

สำหรับ การติดตั้ง Favicon บนเว็บไซต์ สามารถทำได้โดยจัดเก็บไฟล์ favicon เข้าไปใน directory เดียวกันกับ directory หลักที่ใช้เก็บ Files webpage ต่างๆ เช่น www.dekitclub.com/forum/favicon.ico ซึ่งเป็นที่เดียวกันกับที่เก็บ www.dekitclub.com/forum/index.php

และ มันเป็นอย่างนี้ครับ การทำงานในขั้นแรก browser จะค้นหาไฟล์ favicon.ico ถ้าไม่พบ มันก็จะตรวจสอบใน "directory ระดับสูงสุดของ server" * เช่น www.dekitclub.com/favicon.ico

แต่ก็ใช่ว่า เราเอา favicon.ico ไปใส่แล้ว จะเห็น icon ของเว็บเราเสมอไปนะครับ เนื่องจากมันยังขึ้นอยู่กับ "ชนิด" และ "การตั้งค่า" ของ browser ด้วย ดังนั้น อีกวิธีหนึ่งที่ทำได้เหมือนกันก็คือ การประกาศไฟล์ favicon.ico ไว้ใน section <head> ของหน้าเว็บ โดยเพิ่ม tag บรรทัดล่างนี้เข้าไปครับ

<link rel="shortcut icon" href="favicon.ico">

ตัวอย่าง

โค๊ด:
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
 ...
 ..
 


เรียบ ร้อยแล้วครับ อิิอิ ไม่ยากเลยใช่มั้ยครับ ลองเอาไปประยุคกับ blog, hi5 ดูนะครับ ว่าได้หรือเปล่า ^^

เป็นใด๋ครับลองเิฮ็ดเบิงเด้อ...อิอิ


credit : http://www.dekitclub.com/forum/index.php?topic=880.msg7922

บันทึกการเข้า

koung
บุคคลทั่วไป


อีเมล์
« ตอบ #1 เมื่อ: May 22, 2010, 12:59 AM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

 ขอบคุนนะคะ ใช้ประโยชได้มั่กมากเลย >__"< ขอบคุนจิงจิ๊งงงง
บันทึกการเข้า
Maximus
บุคคลทั่วไป


อีเมล์
« ตอบ #2 เมื่อ: August 04, 2010, 03:16 PM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

どうもありがとうございます。
บันทึกการเข้า
boat
บุคคลทั่วไป


อีเมล์
« ตอบ #3 เมื่อ: July 28, 2011, 03:56 PM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

ขอบคุณคับ   javascript:void(0);
บันทึกการเข้า
IBC
บุคคลทั่วไป


อีเมล์
« ตอบ #4 เมื่อ: October 19, 2012, 12:01 PM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

  ขอบคุณมากคร้าบบบ
บันทึกการเข้า
morphin15889
โปรแกรมเมอร์ฝึกหัด
*
ออฟไลน์ ออฟไลน์

กระทู้: 1


ดูรายละเอียด อีเมล์
« ตอบ #5 เมื่อ: October 21, 2012, 05:19 PM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

ขอบคุณมากเลยจร้า 
บันทึกการเข้า
cocore
โปรแกรมเมอร์ระดับเซียน
***
ออฟไลน์ ออฟไลน์

กระทู้: 139


ดูรายละเอียด
« ตอบ #6 เมื่อ: October 29, 2012, 03:17 PM »
แบ่งปัน ตอบโดยอ้างถึงข้อความอ้างถึง

 ขอบคุณครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
  ตอบ  |  ส่งหัวข้อนี้  |  พิมพ์  
 
กระโดดไป:  


Valid XHTML 1.0! Powered by SMF 1.1.5 | SMF © 2006-2008, Simple Machines LLC | Thai language by ThaiSMF
DSM: deruni
Valid CSS!
หน้านี้ถูกสร้างขึ้นภายในเวลา 0.114 วินาที กับ 24 คำสั่ง
สัญญาอนุญาตของครีเอทีฟคอมมอนส์
ผลงานนี้ ใช้สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.