วิธีสร้าง Favicon และ App Icon ให้เว็บไซต์ดูเป็นมืออาชีพ
เคยสงสัยไหมว่าทำไมเว็บไซต์ชื่อดังถึงมีโลโก้เล็กๆ แสดงบนแถบ Browser หรือเวลาเซฟหน้าเว็บไว้บนมือถือถึงมีไอคอนสวยๆ ขึ้นมา? นั่นคือสิ่งที่เรียกว่า Favicon ครับ วันนี้เราจะมาสอนวิธีสร้างชุดไอคอนเหล่านี้ให้ครบทุกขนาดในครั้งเดียว!
ดูวิธีทำใน 1 นาที
ทำไม Favicon ถึงสำคัญ?
นอกจากเรื่องความสวยงามแล้ว Favicon ยังช่วยให้ผู้ใช้จดจำแบรนด์ของคุณได้ง่ายขึ้นเมื่อเปิดหลายแท็บพร้อมกัน และยังช่วยให้เว็บไซต์ของคุณดูน่าเชื่อถือ (Professional) มากยิ่งขึ้นเมื่อแสดงผลบนหน้าจอโฮมของ iPhone หรือ Android
ขั้นตอนการสร้างชุดไอคอน
1. เตรียมรูปภาพต้นฉบับ
แนะนำให้ใช้รูปโลโก้ที่เป็น สี่เหลี่ยมจัตุรัส ขนาดอย่างน้อย 512x512px และควรเป็นไฟล์ PNG ที่มีพื้นหลังโปร่งใสเพื่อให้ไอคอนดูสวยงามบนทุกธีมของ Browser
2. อัปโหลดและประมวลผล
ใช้เครื่องมือ Favicon Generator อัปโหลดรูปภาพของคุณเข้าไป ระบบจะสร้างขนาดต่างๆ ให้โดยอัตโนมัติ ทั้ง 16x16, 32x32 ไปจนถึงขนาดใหญ่สำหรับมือถือ
3. ดาวน์โหลดและติดตั้ง
กดปุ่มดาวน์โหลดไฟล์ ZIP คุณจะได้ไฟล์ทั้งหมดพร้อมไฟล์ site.webmanifest
ให้นำไฟล์ทั้งหมดไปวางไว้ใน Root Folder ของเว็บไซต์ และคัดลอกโค้ด HTML ในหน้าเครื่องมือไปแปะไว้ในส่วน <head>
ข้อแนะนำเพิ่มเติม
ไฟล์ favicon.ico เป็นไฟล์มาตรฐานที่รองรับ Browser เก่าๆ ได้ดีที่สุด
ส่วนไฟล์ apple-touch-icon.png จะช่วยให้เว็บไซต์ของคุณมีไอคอนที่สวยงามคมชัดเมื่อผู้ใช้เพิ่มเว็บของคุณไว้บนหน้าจอ iPhone ครับ
