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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีสร้าง favicon อย่างง่ายพร้อมใช้งาน

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

โดย 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 865 times
วิธีสร้าง favicon อย่างง่าย

1. เข้าไปที่เว็บไซต์ favicongenerator
2. คลิกที่ Choose image to UPLOAD เพื่อโหลดภาพสำหรับสร้าง favicon
2.png
2.png (50.63 KiB) Viewed 865 times
3. เมื่ออัปโหลดภาพเรียบร้อยแล้ว ให้คลิกที่ Create Favicon
1.png
1.png (50.08 KiB) Viewed 865 times
4. เมื่อระบบ generate favicon จะมีปุ่มให้ดาวน์โหลด ให้คลิกที่ปุ่ม Download
3.png
3.png (36.34 KiB) Viewed 865 times
5. เมื่อดาวน์โหลดแล้วจะได้ไฟล์ .ico (ไอคอนไฟล์) ขนาด 16 x 16 pixel พร้อมใช้งาน
4.png
4.png (19.13 KiB) Viewed 865 times
บทสรุป
การใส่ favicon ลงบนหน้า title ของเว็บไซต์ ถือว่าเป็นประโยชน์กับผู้ใช้งานมาก เมื่อผู้ใช้งานเปิดเว็บไซต์หลายๆเว็บไซต์ก็สามารถรู้ทันทีว่ากำลังเปิดเว็บไซต์อะไรอยู่ ซึ่งขั้นตอนการสร้างแค่เพียงอัปโหลดรูปภาพลงที่เว็บไซต์แล้ว generate favicon ซึ่งในเว็บไซต์จะบอกการใส่ Tag HTML สำหรับการนำไปใช้งานด้วย

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

ข้างบน