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

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

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

ภาพประจำตัวสมาชิก
napharat079
PHP Super Member
PHP Super Member
โพสต์: 230
ลงทะเบียนเมื่อ: 18/03/2019 10:50 am

วิธีสร้าง 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) เปิดดู 300 ครั้ง


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

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

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

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

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


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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 18 และ บุคคลทั่วไป 0 ท่าน