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

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

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Ubuntu เชื่อมต่อ wifi ไม่ได้ค่ะ แก้ยังไงคะ
โดย bolue พ 02 ธ.ค. 2020 5:21 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
6
12
พ 02 ธ.ค. 2020 6:55 pm โดย bolue
ใช้ sudo su ไม่ได้บน command ubuntu
โดย bolue พ 02 ธ.ค. 2020 3:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
27
พ 02 ธ.ค. 2020 5:20 pm โดย bolue
โปรแกรม Visio ช่วยออกแบบผังทางเดินเอกสาร
โดย Duanghathai Termtem พ 02 ธ.ค. 2020 10:51 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 02 ธ.ค. 2020 10:51 am โดย Duanghathai Termtem
โปรแกรมทางการบัญชี โปรแกรม Express
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 6:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
41
อ 01 ธ.ค. 2020 6:56 pm โดย Duanghathai Termtem
Flow Account คืออะไร
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 5:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 01 ธ.ค. 2020 5:06 pm โดย Duanghathai Termtem
การประยุกต์ใช้โปรแกรม ACL และ Microsoft Excel ช่วยในการตรวจสอบ
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 3:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
41
อ 01 ธ.ค. 2020 3:20 pm โดย Duanghathai Termtem
แนวทางแก้ปัญหา php error Uncaught Error: Call to undefined function mysql_real_escape_string() in...
โดย mindphp อ 01 ธ.ค. 2020 2:13 am บอร์ด PHP Knowledge
0
21
อ 01 ธ.ค. 2020 2:13 am โดย mindphp
วิธีการเดินทางจากกระบี่มากรุงเทพมหานคร
โดย Duanghathai Termtem จ 30 พ.ย. 2020 3:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
25
จ 30 พ.ย. 2020 3:46 pm โดย Duanghathai Termtem