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

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

favicon1

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

favicon2

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

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

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

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

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

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

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s