Favicon คืออะไร ประโยชน์และวิธีสร้าง

Favicon คือไอคอนขนาดเล็ก (16×16 px) ที่แสดงด้านหน้าชื่อเว็บไซต์ (URL Address) ในแถบเบราเซอร์  หรือเรียกได้ว่าเป็นโลโก้จิ๋วของเว็บไซต์นั้นๆ

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

สำหรับวิธีในการสร้างนั้น เราสามารถไปใช้บริการฟรีจากเว็บต่างๆ ซึ่งสามารถทำได้ทั้งวาดใหม่เองหรืออัพโหลดรูปภาพขึ้นไป

https://www.favicon.cc/ เว็บสำหรับทำ Favicon โดยตรง เปิดมาสามารถวาดรูปที่ต้องการลงใน pixel pad ของเว็บได้เลย หรือจะอัพโหลดไฟล์ภาพของเราเองก็ได้เช่นกัน นอกจากนี้ยังสามารถเข้าไปดูไอเดียและดาวโหลดไอคอนที่มีการแชร์ลงในเว็บ ได้ที่เมนู Top Rated Favicons

https://www.favicon-generator.org/ สร้าง Favicon จากภาพอัพโหลดของเรา และสามารถค้นหาไอคอนในเว็บได้ผ่านคีย์เวิร์ด

https://favicon.io/ สร้าง Favicon จากรูปภาพ, ข้อความ (text), และ emoji ถือว่าสะดวกมากๆ เพราะสามารถเลยค่ะ

เกร็ดความรู้กับการดีไซน์ไอคอน: ถ้าลองสังเกตุกัน จะเห็นความแตกต่างอย่างชัดเจนของไอคอนที่ดีไซน์ดีและไม่ดี เพื่อให้เพื่อนๆเห็นภาพชัดขึ้น เราจะมาดูตัวอย่างกันซักหน่อย

ตัวอย่างที่ 1: ถือว่าเป็นการดีไซน์ที่ไม่ดีนะคะอันนี้ เราจะเห็นว่าไอคอนมีการใช้สีขาวมากเกินไป ทำให้กลืนไปกับพื้นหลังและไม่โดดเด่น แถมยังใส่รายละเอียดที่ไม่จำลงไปอีก คือพอเป็นภาพเล็กแล้วมองไม่เห็นด้วยซ้ำว่าตัวหนังสือตรงกลางภาพเขียนว่าอะไร (ทางบล๊อคขอเวลาดีไซน์ใหม่แปป ฮาา)

ตัวอย่างที่ 2: เห็นได้ชัดถึงความแตกต่างเลยมั้ยคะ คือแม้ไอคอนจะมีขนาดเล็กหรือต่อให้ย่อเล็กกว่าอันบนก็ยังสามารถมองเห็นได้ชัดเจนทั้งตัว G และเฉดสี คือเห็นแล้วรู้เลยว่าเป็นโลโก้ของใคร

ตัวอย่างที่ 3: ไอคอนนี้ก็เช่นกัน ต่อให้ย่อเหลือขนาดเล็กมาก ก็ยังสามารถมองออกว่าเป็นไอคอนอะไร ส่วนสิ่งที่แตกต่างจากด้านบนคือใช้รูปร่างในการสื่อสารแทนตัวอักษร พร้อมสีโทนเดียวที่โดดเด่นตัดกับพื้นหลัง

รู้วิธีทำแล้ว ก็ได้เวลาลงมือ ไปลุยกันเลยยย!!