ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

     Favicon เป็น Icon ที่จะแสดงอยู่บน Tab ของ Web Browser ซึ่งจะเป็นการแสดงสัญลักษณ์ของเว็บไซต์ของเรานั่นเอง โดยทั่วไปแล้วจะนิยมนำ logo ขององค์กรหรือบริษัทมาใช้ในการทำ Favicon หรือบางเว็บไซต์อาจทำการสร้างสัญลักษณ์ขึ้นมาใหม่ การที่เว็บไซต์ของเรามี favicon นั้นจะช่วยให้ผู้เข้าชมเว็บไซต์สามารถจดจำเว็บไซต์ของเราได้ดีมากขึ้น สำหรับในบทความนี้จะมาแนะนำวิธีการสร้าง Favicon แบบง่ายๆ ประหยัดเวลา สำหรับผู้ที่ไม่ถนัดงานทางด้านกราฟฟิคก็สามารถสร้าง Favicon ได้เพียงไม่กี่ขั้นตอน

 

ขนาดที่ใช้ในการทำ Favicon 

  • 16 x 16 ขนาดมาตรฐานสำหรับเบราว์เซอร์ทั่วไป
  • 32 x 32 Taskbar shortcut icon 
  • 96x96 For desktop shortcut icon
  • 180x180 apple touch
  • 192x192 android-chrome

 

ขั้นตอนการสร้าง Favicon 

1. ในขั้นตอนแรกให้ทำการสร้าง Icon หรือรูปภาพก่อน สำหรับใครที่มี logo อยู่แล้วสามารถข้ามขั้นตอนนี้ไปได้เลยนะคะ โดยในวันนี้จะแนะนำเป็น Canva เว็บไซต์สำหรับสร้างงานกราฟฟิค ใช้งานได้เลยไม่ต้องติดตั้ง เข้าใช้งานได้ที่ https://www.canva.com/ เมื่อเข้าไปแล้วให้กำหนดขนาด Icon ที่ต้องการสร้าง (แนะนำให้สร้างขนาดใหญ่ก่อนเพื่อให้ลบพื้นหลังได้ง่าย)

ทำการสร้างรูปภาพใหม่
กำหนดขนาดรูปภาพ

 

สำหรับใครที่ยังคิดไม่ออกว่าจะสร้างไอคอนแบบไหน ใน Canva นั้นจะมีไอคอนให้ใช้งานฟรีมากมาย สามารถเลือกไอคอนและเปลี่ยนสีได้ตามที่ต้องการ 

ขั้นตอนการเลือกไอคอน ปรับสีตามต้องการ
เลือกไอคอน ปรับสีตามต้องการ

 

เมื่อปรับแต่งได้ตามที่ต้องการแล้ว ให้ทำการดาวน์โหลดรูปภาพ

ทำการดาวน์โหลด
ดาวน์โหลดภาพ

 

 

เมื่อได้รูปภาพแล้ว ต่อไปเราจะทำการลบพื้นหลังของภาพออก ด้วย https://www.photopea.com/ (photoshop online)

เลือก Magic Wand เพื่อทำการลบพื้นหลัง
เลือก Magic Wand เพื่อทำการลบ

 

คลิ้กบริเวณที่ต้องการลบออก จากนั้นทำการ save รูปภาพได้เลย 

ลบพื้นหลัง
ลบพื้นหลัง

 

ตัวอย่าง Icon ที่สร้างเสร็จเรียบร้อยแล้ว

ตัวอย่าง Icon ที่ได้สร้างไว้
ตัวอย่าง Icon

 

2. เมื่อได้ Icon ที่ต้องการแล้ว ให้ทำการแปลงไฟล์รูปภาพของเรา ให้เป็น ICO โดยเข้าไปที่ https://www.websiteplanet.com/th/webtools/favicon-generator/ จากนั้นทำการอัพโหลดไฟล์ภาพของเรา

แปลงไฟล์เป็น ICO
แปลงไฟล์ภาพของเราให้เป็น ICO

 

3. ดาวน์โหลด และคัดลอกโค้ดเพื่อนำมาใช้งาน

เมื่อเสร็จแล้วสามารถดาวน์โหลดมาใช้งานได้เลย
สามารถดาวน์โหลดมาใช้งานได้เลย

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
22
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
28
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
1
จ 25 พฤษภาคม 2020 11:40 am โดย thatsawan
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
42
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
1
3
อ 26 พฤษภาคม 2020 8:18 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
62
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
94
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
2
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
(Close)B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
2
5
อ 26 พฤษภาคม 2020 6:22 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
3
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan