วิธีสร้าง favicon อย่างง่ายพร้อมใช้งาน

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
napharat079
PHP Super Member
PHP Super Member
Posts: 230
Joined: 18/03/2019 10:50 am

วิธีสร้าง favicon อย่างง่ายพร้อมใช้งาน

Postby napharat079 » 23/04/2019 1:43 pm

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

สิ่งที่ต้องเตรียม
1. ไฟล์รูปภาพที่ต้องการสร้าง favicon สามารถใช้ไฟล์ PNG , JPEG, JPG, GIF ในการสร้าง favicon ได้
ตัวอย่าง favicon เป็นไฟล์ PNG
logo.png
logo.png (979.92 KiB) Viewed 466 times


วิธีสร้าง favicon อย่างง่าย

1. เข้าไปที่เว็บไซต์ favicongenerator
2. คลิกที่ Choose image to UPLOAD เพื่อโหลดภาพสำหรับสร้าง favicon
1.png
1.png (50.08 KiB) Viewed 466 times

3. เมื่ออัปโหลดภาพเรียบร้อยแล้ว ให้คลิกที่ Create Favicon
2.png
2.png (50.63 KiB) Viewed 466 times

4. เมื่อระบบ generate favicon จะมีปุ่มให้ดาวน์โหลด ให้คลิกที่ปุ่ม Download
3.png
3.png (36.34 KiB) Viewed 466 times

5. เมื่อดาวน์โหลดแล้วจะได้ไฟล์ .ico (ไอคอนไฟล์) ขนาด 16 x 16 pixel พร้อมใช้งาน
4.png
4.png (19.13 KiB) Viewed 466 times


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

ช่องทางการศึกษาเพิ่มเติมเกี่ยวกับ : การออกแบบ
บทเรียน Photoshop
Share Knowledge
Graphic design

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 23 guests