วันอาทิตย์ที่ 16 มิถุนายน พ.ศ. 2556

การทำ Favicon


 “favicon” หรือเรียกแบบเต็มๆ ก็ประมาณ Favorite Icon นั่นแหละ มันก็เป็นไอคอนที่จะติดอยู่ข้างๆ ที่อยู่เว็บไซต์บน Address Bar ของเบราเซอร์บนเครื่องคุณนั่นแหละ (อย่าบอกนะ ว่าไม่รู้จักเบราเซอร์) ถ้าเกิดเราชอบเว็บไหนแล้วบุ๊คมาร์คไว้ เจ้าไอคอนนี้ก็จะติดตามไปอยู่บนเมนู Bookmark หรือ Favorite ของคุณด้วยเสมอ


"Favicon"  หรือชื่อเต็ม Favorite Icon เป็นไอคอนของเว็บไซต์นั้น ๆ เมื่อเราเปิดเว็บขึ้นมาด้านบนสุดมุมซ้ายของหน้าเว็บเบราซ์เซอร์ ก็จะมีไอคอนตัวนี้ให้เห็น เช่น facebook ก็จะมีรูปโลโก้ facebook มันเป็นสัญญลักษณ์ช่วยจำเมื่อเราเห็นก็รู้ได้ทันทีว่าเป็นเว็บอะไร เมื่อเราจัดการ Bookmark หรือกด Ctrl+D เพื่อจัดเก็บหน้เว็บนั้น ๆ  Favicon ก็จะถูกจัดเก็บไปด้วย  ซึ่งทำให้มีความโดดเด่นใน List เพราะแต่ละหน้าที่เราจัดเก็บจะมีชื่อเว็บ หรือชื่อหน้ายาว ๆ ทำให้มองหาได้ยาก Favicon นี่แหละช่วยเราให้แยกแยะได้ Favicon มีนามสกุล .ico

มีวิธีทำก็คือ ใช้ photoshop
1. เลือก file > new สร้างชิ้นงานใหม่กำหนดขนาด 50x50 pixcel
2. เลือก background เป็น Tranparency หรือพื้นโปร่งใส
3. เลือก Resolution 150
4. เลือก ภาพที่เราต้องการนำมาทำโดยไปที่ file > place จัดการวางรูปลงในช่องเล็ก ๆ นั้น แล้วปรับขยับยืดให้พอดีกับช่อง
5. เลือก SaveAs > เลือกนามสกุล .png

จากนั้นใช้เว็บแปลง .png  เป็น .ico ก็จะได้ภาพขนาด 16x16 pixcel นำไปใช้งานได้
*ในตอนแรกเราเลือก 50x50 pixcel เพราะให้มีขนาดที่เราพอจะทำงานได้สะดวก อาจจะเลือก 100x100 pixcel ก็ได้ เมื่อภาพถูกย่อแบบรักษา Ratio ด้านกว้าง กับด้านสูง ก็จะคงที่ไม่เสียสัดส่วน
http://www.webscriptlab.com/favicongenerator.php คลิ๊ก

ไม่มีความคิดเห็น:

แสดงความคิดเห็น