FAVICON พร้อมวิธีทำแบบง่ายๆ

วันนี้เราก็จะมาพูดถึงเรื่องเล็กๆน้อยๆ แต่จริงๆแล้วนับว่าเป็นอีกหนึ่งเรื่องสำคัญของเว็บไซต์เลยก็ว่าได้ นั่นก็คือ Favicons นั่นเอง โดยเราได้ทำการเขียนเกี่ยวกับมันไปแล้วใน Blog

FAVICON คืออะไรและสามารถตั้งค่า FAVICON สำหรับเว็บไซต์ได้อย่างไร? กับอีก blog ที่ชื่อว่า การตั้งค่า FAVICONS

แต่รอบนี้เราจะมาลงลึกขึ้นมาอีกว่ามันมีมาเพื่ออะไรและสำคัญอย่างไร ปิดท้ายด้วยวิธีการทำรูป Favicon แบบง่ายๆ  ว่าแล้วไปชมกันเลย

ประโยชน์ของ Favicon?

ประโยชน์หลักๆของ Favicon คือ การช่วยให้ผู้ใช้งานเว็บไซต์สามารถใช้งานได้ง่ายยิ่งขึ้น เมื่อผู้ใช้งานเปิดหลายๆ Tab พร้อมกัน ก็สามารถรู้ได้ทันทีว่ากำลังเปิดเว็บอะไรอยู่บ้าง ดังภาพที่แสดงอยู่

fav

ลองนึกภาพว่าถ้าเราใช้งานเว็บไซต์ โดยไม่มี Favicon ดูสิ มันคงจะวุ่นวายน่าดู

อีกหนึ่งอย่างที่มีประโยชน์ไม่แพ้กันนั่นก็คือ ใช้เพื่อแสดง Icon ที่หน้า Bookmark ทำให้สะดวกรวดเร็วต่อการคัดแยกมากยิ่งขึ้นเวลาที่ดูที่หน้า Bookmark

2-1

สามารถคัดแยก Bookmark ตัวเว็บไซต์ได้อย่างรวดเร็ว ด้วยรูป Icon ที่แสดง

เกร็ดความรู้เพิ่มเติม Favicon มาจากคำว่า “favorite” และ “icon” นำมารวมกัน เริ่มใช้ครั้งแรกโดย Microsoft’s Internet Explorer 5

วิธีทำ Favicon?

พูดพล่ามทำเพลงมานาน เรามาดูกันดีกว่าว่าเจ้า Favicon มันทำยังไงกันแน่ บอกเลยว่าทำง่ายมากกกก ไม่ต้องมีความรู้เรื่องดีไซน์ ก็สามารถทำได้ง่ายๆ

นี่คือ List เว็บไซต์ที่ช่วยในการทำ Favicon แบบง่ายสุดๆ เพียงแค่หารูปภาพต้นฉบับมาอัพโหลด มันก็จะกลายร่างเป็น Favicon ในทันที ง่ายสุดๆไปเลย

Favicon CC

  • Favicon Generator
  • Dynamic Drive Favicon Tool
  • Chami Favicon Service
  • Favicon Generator ORG
  • Favicon UK
  • Degraeve Favicon
  • Anti-Favicon
  • Gen Favicon
  • Favigen

ถ้าเกิดว่ายังนึกไม่ออกว่าจะทำ Icon เป็นแนวไหนสามารถหาแนวทางได้จากเว็บเหล่านี้

Fine Icons

  • The Favicon Gallery
  • Delta Tango Bravo
  • Fresh Favicons

สร้าง Favicon ใน Photoshop

ทำไมเราต้องทำใน Photoshop ด้วยละ ในเมื่อมีเว็บช่วยสร้าง Favicon หมดแล้ว?

สำหรับบางคนที่อาจมีความเชี่ยวชาญเรื่องการตกแต่งหรือรู้สึกว่าเว็บที่กล่าวมาข้างต้นมันยังช่วยเราตกแต่งได้ไม่โดนใจเรานัก ก็สามารถทำใน Photoshopได้ โดยระบบอัพโหลดรูป Favicon กับ MakeWebEasy นั้น ทางเรารองรับตั้งแต่.jpeg, .jpg, .png และ .ico

เกร็ดความรู้เพิ่มเติม ใครที่อยากเซฟไฟล์เป็น .ico บน Photoshop จำเป็นต้องโหลด plugin เสริมhttp://www.telegraphics.com.au/sw/ เนื่องจากทาง Photoshop ไม่สามารถเซฟเป็น .ico ได้หากไม่โหลด plugin

ขั้นตอนการสร้างภาพ Favicon ใน Photoshop ก็ง่ายๆเพียงแค่เราสร้างไฟล์ภาพขึ้นมาใน Photoshop ขนาด 16×16 pixels แล้วลงมือตกแต่งตามใจชอบได้เลย เรามีเทคนิคเพิ่มเติมเล็กๆน้อยๆเนื่องจากขนาด16×16 มันอาจจะเล็กเกินไปจนดูรูปไม่ค่อยออก(เรียกว่าแทบไม่ออกเลยดีกว่า) เราจึงแนะนำให้สร้างแบบ64×64 ซึ่งมันจะช่วยให้เราเห็นภาพที่เราตกแต่งได้ดีมากยิ่งขึ้น เมื่อเรานำไฟล์มาอัพโหลดลงบนระบบ MakeWebEasy ตัวระบบจะทำการย่อลงให้เหลือ16×16 เองอัตโนมัติโดยที่ไม่ต้องไปนั้ง Resize(ย่อ) รูปภาพให้วุ่นวาย เมื่อทำเสร็จก็เซฟภาพแล้วนำมาอัพโหลดขึ้นบนระบบของเรา โดยสามารถดูวิธีได้ที่ การตั้งค่า FAVICONS

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *