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

     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. ดาวน์โหลด และคัดลอกโค้ดเพื่อนำมาใช้งาน

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สรุปการประชุมลูกค้าครั้งแรก
โดย natthanit.r2538 จ 01 มิ.ย. 2020 6:46 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
2
จ 01 มิ.ย. 2020 6:46 pm โดย natthanit.r2538
สวนครัวริมระเบียง
โดย natthanit.r2538 จ 01 มิ.ย. 2020 4:42 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
6
จ 01 มิ.ย. 2020 4:42 pm โดย natthanit.r2538
วิธีการเดินทางจาก สงขลา มา กรุงเทพฯ
โดย natthanit.r2538 จ 01 มิ.ย. 2020 1:47 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
11
จ 01 มิ.ย. 2020 1:47 pm โดย natthanit.r2538
งานประจำวันที่ 1 มิถุนายน 2563
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:53 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
1
27
จ 01 มิ.ย. 2020 11:05 am โดย natthanit.r2538
note
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:52 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
5
จ 01 มิ.ย. 2020 10:52 am โดย natthanit.r2538
Work's on Hand ณัฐนิตย์ ร่มบ้านโหล๊ะ M103
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:49 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
4
จ 01 มิ.ย. 2020 10:49 am โดย natthanit.r2538
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:48 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
2
18
จ 01 มิ.ย. 2020 11:08 am โดย natthanit.r2538
B - เข้าเมนูหน้ารวมรายการใน admin ไม่ได้
โดย thatsawan ศ 29 พฤษภาคม 2020 5:58 pm บอร์ด Odoojob.com - Tester
0
1
ศ 29 พฤษภาคม 2020 5:58 pm โดย thatsawan
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp
B - กล่องค้นหาจากหน้า index ใช้งานไม่ได้ กดแล้วไม่ไปหน้าค้นหา
โดย mindphp ศ 29 พฤษภาคม 2020 5:39 am บอร์ด FDD (Main)
1
1
ศ 29 พฤษภาคม 2020 5:53 am โดย mindphp
B - ไม่ใช่แค่โชว์ icon facebook มันต้องทำลิงค์เพื่อให้คลิกไป
โดย mindphp ศ 29 พฤษภาคม 2020 4:39 am บอร์ด FDD (Main)
1
2
ศ 29 พฤษภาคม 2020 4:51 am โดย mindphp
อัพเดท phpbb 3.3 เเล้ว extenstion ใช้งานไม่ได้
โดย thatsawan พฤ 28 พฤษภาคม 2020 10:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
94
พฤ 28 พฤษภาคม 2020 10:10 pm โดย thatsawan
วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น
โดย Ittichai_chupol พฤ 28 พฤษภาคม 2020 6:06 pm บอร์ด CSS Knowledge
0
91
พฤ 28 พฤษภาคม 2020 6:06 pm โดย Ittichai_chupol
R - Set Demo เป็น subdomain ของ ตัวนี้
โดย mindphp พฤ 28 พฤษภาคม 2020 6:17 am บอร์ด มารียา ซีฟู้ดส์ - Developer
0
9
พฤ 28 พฤษภาคม 2020 6:17 am โดย mindphp
อยากทราบวิธีการกำหนด ค่า css ให้กับ button โดยกำหนดเฉพาะแต่ละบราวเซอร์
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 8:39 pm บอร์ด HTML CSS
1
30
พ 27 พฤษภาคม 2020 9:15 pm โดย mindphp
อัพเดท Changelog flask framework ของภาษา Python
โดย jirawoot พ 27 พฤษภาคม 2020 12:19 pm บอร์ด Python Knowledge
0
101
พ 27 พฤษภาคม 2020 12:19 pm โดย jirawoot
งานประจำวันที่ 27 พฤษภาคม 2563
โดย yositacha26 พ 27 พฤษภาคม 2020 12:13 pm บอร์ด MP011 - โยษิตา จันทะวงษ์
1
25
พ 27 พฤษภาคม 2020 12:15 pm โดย yositacha26
อยากทราบว่า วิธีการกำหนดการตั้งค่า ภาษาไทย ใน Netbeans
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 10:13 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
96
พ 27 พฤษภาคม 2020 10:13 am โดย Ittichai_chupol
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
2
125
จ 01 มิ.ย. 2020 6:33 am โดย mindphp