ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

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

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

 

Treenet Buranaphothong
, วิธีการสร้าง Favicon แสดง logo ของเว็บไซต์ง่ายๆ ใส่รูปที่ โครมของเรา - by Graphic กราฟิก,
5 1 1 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามวิธี render file mp4 kdenlive หน่อยครับ
โดย chakirin.bfds จ 08 มี.ค. 2021 6:06 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
6
จ 08 มี.ค. 2021 6:06 pm โดย chakirin.bfds
ขอวิธีลบหรือรีเซ็ตค่าข้อมูลในตารางหน่อยครับ
โดย chakirin.bfds จ 08 มี.ค. 2021 3:51 pm บอร์ด SQL - Database
4
19
จ 08 มี.ค. 2021 6:54 pm โดย chakirin.bfds
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
5
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
48
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
33
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
30
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz