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

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: วิธีสร้าง favicon อย่างง่ายพร้อมใช้งาน

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

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

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

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

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

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

Top