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

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
M181 - อธิราช กุลเมือง
โดย athirach.offcial จ 25 มี.ค. 2024 10:15 am บอร์ด Dev Teams
0
8
จ 25 มี.ค. 2024 10:15 am โดย athirach.offcial View Topic M181 - อธิราช กุลเมือง
การสำรองข้อมูล Backup Joomla! ทั้งเว็บ ด้วย MJClone
โดย mindphp อ 24 มี.ค. 2024 1:33 am บอร์ด MindPHP News & Feedback
0
86
อ 24 มี.ค. 2024 1:33 am โดย mindphp View Topic การสำรองข้อมูล Backup Joomla! ทั้งเว็บ ด้วย MJClone
Start Directadmin แบบเมนนวล
โดย mindphp ศ 22 มี.ค. 2024 5:35 am บอร์ด Linux - Web Server
1
107
ศ 22 มี.ค. 2024 5:43 am โดย mindphp View Topic Start Directadmin แบบเมนนวล
คำสั่ง Command Line สำรองเว็บไซต์ บน Directadmin Backup Website ขนาดใหญ่
โดย mindphp ศ 22 มี.ค. 2024 5:31 am บอร์ด Linux - Web Server
1
153
ศ 22 มี.ค. 2024 11:52 pm โดย mindphp View Topic คำสั่ง Command Line สำรองเว็บไซต์ บน Directadmin Backup Website ขนาดใหญ่
Vmware Exsi 5 เพิ่ม HDD เป็น data store ไม่ได้เจอ Error Call "HostDatastoreSystem.QueryVmfsDatastoreCreateOptions" for
โดย mindphp พฤ 21 มี.ค. 2024 6:53 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
245
อ 26 มี.ค. 2024 10:10 am โดย noncup302 View Topic Vmware Exsi 5 เพิ่ม HDD เป็น data store ไม่ได้เจอ Error  Call "HostDatastoreSystem.QueryVmfsDatastoreCreateOptions" for
ถ้าใช้เมนบอร์ดที่ใส่ cpu ได้สองตัว และ cpu รันปกติแต่ vmwere
โดย Anonymous พ 20 มี.ค. 2024 3:09 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
135
พฤ 21 มี.ค. 2024 6:48 am โดย mindphp View Topic ถ้าใช้เมนบอร์ดที่ใส่ cpu ได้สองตัว และ cpu รันปกติแต่ vmwere
วิธีตั้งค่าการเก็บ Logs Error ของ OpenLiteSpeed ใช้ได้กับ Apache, Nginx
โดย mindphp พ 20 มี.ค. 2024 2:27 pm บอร์ด Linux - Web Server
0
126
พ 20 มี.ค. 2024 2:27 pm โดย mindphp View Topic วิธีตั้งค่าการเก็บ Logs Error ของ OpenLiteSpeed ใช้ได้กับ Apache, Nginx
วิธีแก้ปัญหา ลืมรหัสผ่าน ไม่รู้รหัสผ่าน เข้า WebAdmin Console ของ OpenLiteSpeed ไม่ได้
โดย mindphp พ 20 มี.ค. 2024 2:16 pm บอร์ด Linux - Web Server
0
99
พ 20 มี.ค. 2024 2:16 pm โดย mindphp View Topic วิธีแก้ปัญหา ลืมรหัสผ่าน ไม่รู้รหัสผ่าน เข้า WebAdmin Console ของ OpenLiteSpeed ไม่ได้