Favicon คืออะไร: วิธีสร้างพร้อมตัวอย่าง [คู่มือสำหรับผู้เริ่มต้น]

คุณใช้ favicon บนไฟล์ เว็บไซต์เว็บ ?

คุณเคยสงสัยหรือไม่ว่าทำไมคุณถึงเห็นโลโก้หรือสัญลักษณ์เล็กๆ ถัดจากชื่อเว็บไซต์ในเบราว์เซอร์ของคุณ? 

เช่นนี้:

ไอคอนเล็กๆ น่ารักเหล่านี้เรียกว่า favicons ซึ่งเป็นตัวแทนของ เว็บไซต์เว็บ ในเว็บเบราว์เซอร์ 

สงสัยว่าจะสร้างได้อย่างไร? คุณอยู่ในสถานที่ที่เหมาะสม

ในบทความนี้เราจะค้นพบ;

• favicon คืออะไร และมันอยู่ที่ไหนในเบราว์เซอร์ของคุณ?
• ไอคอนเล็กๆ เหล่านี้มีประโยชน์ต่อทั้งเจ้าของเว็บไซต์และผู้ใช้อย่างไร
• อะไรทำให้ favicon ดี และคุณจะสร้าง favicon ที่โดดเด่นจากที่อื่นๆ ได้อย่างไร

คุณอยากรู้ไหม? เรามาดูรายละเอียดกันดีกว่า

สารบัญ ☰

ไอคอน Fav คืออะไร?

ไอคอน Fav คือรูปภาพขนาดเล็กที่ไม่ซ้ำใครที่ปรากฏในแท็บเบราว์เซอร์ถัดจากชื่อของคุณ เว็บไซต์เว็บ.

วัตถุประสงค์หลักของ favicon ของ WordPress คือการช่วยให้ผู้ใช้ระบุเว็บไซต์ของคุณได้อย่างรวดเร็วท่ามกลางแท็บอื่นๆ ที่เปิดอยู่ในเบราว์เซอร์

นี่คือตัวอย่างลักษณะของ favicon:

ต่อไปนี้คือไอคอนเพิ่มเติมบางส่วนของเว็บไซต์ยอดนิยมที่แสดงในแถบบุ๊กมาร์กของ Chrome

การเพิ่ม Favicon ลงในไซต์ของคุณมีประโยชน์อย่างไร

ไอคอนประจำเว็บไซต์ของคุณแสดงถึงตัวตนของเว็บไซต์ คุณต้องมี favicon ที่น่าดึงดูดหากคุณต้องการสร้างแบรนด์ส่วนตัวหรือทำให้เว็บไซต์ของคุณน่าจดจำยิ่งขึ้น

ต่อไปนี้คือประโยชน์หลักๆ บางประการของการเพิ่มไอคอน Fav ของ WordPress ให้กับเว็บไซต์ของคุณในปี 2024

• ความเป็นมืออาชีพ: ข้อได้เปรียบที่ใหญ่ที่สุดของการใช้ favicon คือทำให้เว็บไซต์ของคุณดูเป็นมืออาชีพและดึงดูดสายตามากขึ้น
• ประสบการณ์การใช้งานที่ดีขึ้น: ผู้ใช้ออนไลน์ส่วนใหญ่มักจะเปิดหลายแท็บไว้ในเว็บเบราว์เซอร์ การมีไอคอน Fav ที่เป็นเอกลักษณ์และน่าดึงดูดช่วยให้คุณระบุเว็บไซต์ของคุณได้อย่างง่ายดาย เช่น Amazon, Twitter (X), YouTube เป็นต้น คุณสามารถระบุไซต์เหล่านี้ได้อย่างง่ายดายโดยดูที่ไอคอน Fav
• ประโยชน์ของ SEO : เสิร์ชเอ็นจิ้นเกือบทั้งหมด รวมถึง Google และ Bing จะแสดงไอคอน Fav ในผลการค้นหา ซึ่งจะช่วยให้เว็บไซต์ของคุณโดดเด่นได้
• การรับรู้แบรนด์: ยิ่งผู้คนเห็น favicon เว็บไซต์ของคุณมากเท่าไร พวกเขาก็จะจดจำแบรนด์ของคุณได้ง่ายขึ้นเท่านั้น
• รายการโปรด: หลายๆ คนมักจะบุ๊กมาร์กหน้า (หรือเว็บไซต์) เมื่อพบสิ่งที่น่าสนใจ ไอคอนประจำเว็บไซต์ทำให้เว็บไซต์ของคุณโดดเด่นในรายการโปรด กระตุ้นให้ผู้ใช้กลับมาเยี่ยมชมอีกครั้ง

จะเพิ่ม favicon ให้กับบล็อก WordPress ของคุณได้อย่างไร?

คุณต้องสร้างไอคอนประจำเว็บไซต์ก่อนที่จะเรียนรู้วิธีเพิ่มไอคอนประจำเว็บไซต์ในไซต์ของคุณ หากคุณมีโลโก้สำหรับเว็บไซต์ของคุณอยู่แล้ว คุณสามารถใช้โลโก้นั้นเป็นไอคอน Fav ได้ 

หากคุณยังไม่มี มีโปรแกรมสร้าง favicon ฟรีมากมายทางออนไลน์ที่สามารถช่วยคุณสร้าง favicon ที่ดูเป็นมืออาชีพสำหรับเว็บไซต์ของคุณได้

ตัวอย่างเช่น คุณสามารถใช้ เครื่องกำเนิด favicon.io . คุณสามารถใช้ไซต์นี้เพื่อเปลี่ยนโลโก้เว็บไซต์ที่มีอยู่ของคุณให้เป็น favicon หรือสร้างใหม่ตั้งแต่ต้นก็ได้

เมื่อคุณอยู่ในไซต์ของพวกเขาแล้ว ให้ป้อนข้อความที่เกี่ยวข้องกับธุรกิจหรือชื่อเว็บไซต์ของคุณ จากนั้นระบบจะแสดงตัวอย่างไอคอน Fav โดยอัตโนมัติ ดังที่แสดงด้านล่าง

อย่างที่คุณเห็น คุณสามารถแก้ไข favicon ของคุณได้ตามที่คุณต้องการโดยเปลี่ยนข้อความ พื้นหลัง ขนาดตัวอักษร สีตัวอักษร สีพื้นหลัง ฯลฯ 

เมื่อเสร็จแล้วคุณสามารถคลิกที่ปุ่ม "ดาวน์โหลด" เพื่อดาวน์โหลดได้

เมื่ออิมเมจ favicon พร้อมแล้ว ให้เพิ่ม favicon ใหม่ลงในไซต์ WordPress ของคุณโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

วิธีที่ 1: ใช้เครื่องมือปรับแต่ง WordPress (วิธีที่ง่ายที่สุด)

หากต้องการเพิ่ม favicon ให้กับไซต์ WordPress ของคุณ ให้ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง ในแดชบอร์ด WordPress ของคุณ

คลิกข้อมูลประจำตัวของไซต์ 

เลื่อนลงไปเล็กน้อยแล้วคุณจะพบ “ไอคอนไซต์”

เลือกรูปภาพจากไลบรารีสื่อของคุณหรืออัปโหลดรูปภาพใหม่ ตรวจสอบให้แน่ใจว่าเป็นรูปสี่เหลี่ยมจัตุรัสและมีขนาดอย่างน้อย 512 × 512 พิกเซลเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

ครอบตัดรูปภาพตามต้องการแล้วคลิกเลือก คลิกเผยแพร่เพื่อบันทึกการเปลี่ยนแปลงของคุณ แค่นั้นแหละ คุณทำเสร็จแล้ว

วิธีที่ 2: ใช้ปลั๊กอิน Favicon

คุณยังสามารถใช้ WordPress ปลั๊กอิน เพื่อเพิ่ม favicon ให้กับไซต์ WordPress ของคุณ

ติดตั้งปลั๊กอินเช่น Favicon จาก RealFaviconGenerator ซึ่งเป็นปลั๊กอินฟรีที่ช่วยคุณสร้างและเพิ่มไอคอน Fav ในขนาดต่างๆ ได้แก่:

• เบราว์เซอร์เดสก์ท็อป
• iPhone / iPad
• อุปกรณ์ Android
• แท็บเล็ต Windows 8 ขึ้นไป

เปิดใช้งานปลั๊กอินและปฏิบัติตามคำแนะนำ

คุณจะต้องเลือกรูปภาพของคุณ จากนั้นปลั๊กอินจะสร้างไฟล์และโค้ดที่จำเป็นทั้งหมด

นี่คือสิ่งที่ดูเหมือน;

วิธีที่ 3: การเพิ่ม Favicon ด้วยตนเอง (สำหรับผู้ใช้ที่มีประสบการณ์)

สร้างไฟล์ favicon ของคุณโดยใช้หนึ่งในตัวสร้าง favicon ฟรีที่กล่าวถึงข้างต้น 

ตรวจสอบให้แน่ใจว่า favicon เป็นรูปภาพสี่เหลี่ยมจัตุรัสที่บันทึกในรูปแบบไฟล์ .ico

เข้าสู่ระบบเว็บไซต์ของคุณโดยใช้ไคลเอนต์ FTP (เช่น FileZilla) และอัปโหลดไฟล์ favicon ไปยังไดเร็กทอรีรากของเว็บไซต์ของคุณ

ส่วนสุดท้ายคือการเพิ่มโค้ด HTML

แก้ไขไฟล์ธีมของเว็บไซต์ของคุณ (โดยปกติคือ header.php) และเพิ่มข้อมูลโค้ดต่อไปนี้ โดยแทนที่ "favicon.ico" ด้วยชื่อไฟล์จริงของ favicon ของคุณ:

แค่นั้นแหละ คุณทำเสร็จแล้ว

โน๊ตสำคัญ : อย่าลืมทดสอบ favicon ของคุณบนอุปกรณ์และเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าจะแสดงได้อย่างถูกต้อง ลองใช้พื้นหลังโปร่งใสสำหรับไอคอน Fav ของคุณเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

รูปแบบ favicon ทั่วไป

มีรูปแบบไฟล์ Favicons ที่พบบ่อยที่สุดสามรูปแบบ ได้แก่:

• ICO (ไอคอน Windows)
• PNG (กราฟิกเครือข่ายแบบพกพา)
• SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้)

ICO เป็นรูปแบบ favicon ดั้งเดิมที่ได้รับความนิยมมากที่สุด พัฒนาโดย Microsoft เหตุผลหลักในการใช้รูปแบบนี้คือ สามารถทำงานร่วมกับเบราว์เซอร์หลักๆ ทั้งหมดได้ รวมถึงเวอร์ชันเก่าๆ เช่น Internet Explorer

รูปแบบ PNG ถูกใช้กันอย่างแพร่หลายโดยนักออกแบบมืออาชีพ รูปแบบนี้รองรับพื้นหลังโปร่งใสและขนาดไฟล์มักจะเล็กกว่า ICO

SVG เป็นรูปแบบที่แนะนำหากคุณต้องการใช้และปรับขนาดไอคอน Fav โดยไม่สูญเสียคุณภาพ อย่างไรก็ตาม รูปแบบ favicon นี้ไม่ได้รับการรองรับอย่างกว้างขวางเท่ากับ ICO หรือ PNG โดยเฉพาะบนอุปกรณ์หรือเบราว์เซอร์รุ่นเก่า

เคล็ดลับด่วนสำหรับการสร้าง WordPress Favicon

เคล็ดลับที่เป็นประโยชน์สำหรับการสร้างไอคอน Fav ที่ไม่ซ้ำใครสำหรับเว็บไซต์ WordPress ของคุณมีดังนี้

• ง่าย ๆ เข้าไว้: ไอคอน Fav เป็นรูปภาพที่มีขนาดเล็กมาก ดังนั้นควรหลีกเลี่ยงการใช้ข้อความมากเกินไปหรือข้อความที่เล็กเกินไป ลองใช้รูปทรงตัวหนา ตัวอักษรธรรมดา และโลโก้ธรรมดา หากเป็นไปได้ ให้พิจารณาใช้โลโก้เวอร์ชันที่เรียบง่ายของคุณ
• ได้รับแรงบันดาลใจ: รับแรงบันดาลใจจากแบรนด์ที่ใหญ่ที่สุดเช่น Amazon, Google, Tesla, Apple เป็นต้น หรือเรียกดูเว็บไซต์ที่ดีที่สุดในอุตสาหกรรมของคุณเพื่อหาแรงบันดาลใจและสร้างไอคอน Fav
• ใช้รูปถ่ายของคุณ: หากคุณดูไอคอนบล็อกของเรา เราจะใช้รูปภาพของผู้ก่อตั้ง หากคุณต้องการสร้างแบรนด์ส่วนตัว ให้ใช้รูปภาพของคุณเป็นไอคอน Fav มันง่ายกว่าและมีเอกลักษณ์มากกว่ามาก
• ใช้พื้นหลังโปร่งใส: ใช้พื้นหลังโปร่งใสเสมอ คุณสามารถใช้รูปแบบ PNG ที่มีความโปร่งใสเพื่อให้มองเห็นได้ดีขึ้น นอกจากนี้ยังช่วยให้ favicon ผสมผสานกับพื้นหลังเบราว์เซอร์ที่แตกต่างกันได้อย่างราบรื่น บันทึก favicon ของคุณในรูปแบบ PNG หรือ ICO
• อย่าแฟนซี: คุณไม่จำเป็นต้องใช้ทุกสีที่มี ยึดติดกับจานสีที่มีจำกัด ควรใช้เพียงหนึ่งหรือสองสีเท่านั้นเพื่อให้มองเห็นได้ชัดเจนที่สุด
• ใช้ขนาดที่ถูกต้อง: ใช้รูปภาพสี่เหลี่ยมจัตุรัสที่มีขนาดแนะนำ 512 × 512 พิกเซล ส่วนที่ดีที่สุดของ WordPress คือมันสร้างเวอร์ชันที่เล็กลงโดยอัตโนมัติสำหรับอุปกรณ์ต่าง ๆ เช่น อุปกรณ์มือถือและแท็บเล็ต 
• ใช้เครื่องมือ: คุณสามารถใช้เครื่องมือออนไลน์ฟรี เช่น Favicon.io หรือ RealFaviconGenerator.net เพื่อสร้างและเพิ่มประสิทธิภาพ Favicon ของคุณได้อย่างง่ายดาย

คำถามที่พบบ่อยเกี่ยวกับ Favicons

ต่อไปนี้เป็นคำถามที่พบบ่อยเกี่ยวกับไอคอน Fav 

ความคิดสุดท้ายเกี่ยวกับรูปภาพ favicon คืออะไร

โปรดจำไว้ว่าขนาดมีความสำคัญในการสร้าง favicon ขนาดที่เหมาะสมคือ 512 × 512 พิกเซล แต่ควรปรับขนาดได้สูงสุด 16 × 16 พิกเซลเพื่อความเข้ากันได้สูงสุด (ในเบราว์เซอร์และอุปกรณ์ต่างๆ)

นอกจากนี้ ให้พิจารณาใช้โลโก้ สัญลักษณ์แบรนด์ หรือรูปภาพใดๆ ที่สะท้อนเนื้อหาบนเว็บไซต์ของคุณ

คุณคิดอย่างไรกับการใช้ favicon? คุณมีคำถามใดๆ? แจ้งให้เราทราบในความคิดเห็น.