ไอคอน Fav สำหรับ WordPress

WordPress จัดการการแทรก favicon ผ่านทางฟีเจอร์ไอคอนไซต์ ซึ่งเปิดตัวใน WordPress 4.3 เมื่อคุณอัปโหลดรูปภาพใน Customizer นั้น WordPress จะครอบตัดรูปภาพนั้นโดยอัตโนมัติ สร้างรูปแบบที่เล็กลง และแทรกแท็ก `<link rel='icon'>` และ `<link rel='apple-touch-icon'>` ที่ถูกต้องในทุกหน้า ไม่จำเป็นต้องเปลี่ยนปลั๊กอินหรือโค้ดสำหรับไซต์ส่วนใหญ่

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

WordPress ต้องการขนาดรูปภาพขั้นต่ำ 512×512 พิกเซลสำหรับไอคอนไซต์ อัปโหลดสี่เหลี่ยมจัตุรัส PNG ที่ความละเอียดนั้นหรือใหญ่กว่า — WordPress จะสร้างรูปแบบที่เล็กลง (16×16, 32×32, 180×180) โดยอัตโนมัติจากแหล่งที่มา อย่าอัปโหลดภาพขนาดเล็กและคาดหวังว่า WordPress จะขยายขนาด ผลลัพธ์จะเป็นไอคอนไม่ชัดในแท็บเบราว์เซอร์

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

หากธีมของคุณใช้โปรแกรมแก้ไขไซต์ Gutenberg (การแก้ไขไซต์แบบเต็ม) เส้นทางไอคอนไซต์อาจแตกต่างกันเล็กน้อย ดูภายใต้ลักษณะที่ปรากฏ > ตัวแก้ไข > สไตล์ หรือใช้การตั้งค่าบล็อกโลโก้ของไซต์ ธีมบล็อกบางธีมยังเปิดเผยฟิลด์ favicon ในแผงการตั้งค่าส่วนกลาง ฟังก์ชัน WordPress พื้นฐานจะเหมือนกัน — เฉพาะเส้นทางผู้ดูแลระบบ UI เท่านั้นที่เปลี่ยนแปลง

สำหรับการควบคุมขั้นสูง เช่น การแสดงไอคอน Fav ที่แตกต่างกันในไดเรกทอรีย่อยของร้านค้ากับบล็อก คุณสามารถแทนที่ URL ไอคอนเว็บไซต์ได้โดยทางโปรแกรม เพิ่มสิ่งนี้ลงใน functions.php ของธีมของคุณหรือปลั๊กอินเฉพาะไซต์: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);` วิธีนี้จะข้าม Customizer ทั้งหมด และให้คุณแสดงไอคอนจาก URL ใดก็ได้

ปลั๊กอินตัวสร้างเพจบางตัว (Elementor, Divi, Beaver Builder) เพิ่มการตั้งค่า favicon ของตัวเองซึ่งอาจขัดแย้งกับ WordPress Customizer ตรวจสอบแผงการตั้งค่าไซต์ของตัวสร้างเพจของคุณ และลบไอคอน Fav ใดๆ ออกจากที่นั่น จากนั้นตั้งค่าใหม่ผ่าน WordPress Customizer แบบเนทีฟ การมีแท็กไอคอน Fav ที่แข่งขันกัน 2 แท็กในหน้าเดียวกันอาจทำให้เกิดผลลัพธ์ที่ไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ

การติดตั้งหลายไซต์ WordPress ต้องการให้แต่ละไซต์ย่อยมีการตั้งค่าไอคอนไซต์ของตนเองแยกกัน การตั้งค่าผู้ดูแลระบบเครือข่ายไม่เรียงซ้อนไปยังไซต์ย่อย หากคุณต้องการ favicon ที่ใช้ร่วมกันทั่วทั้งเครือข่าย ให้ใช้วิธีการกรองแบบเป็นโปรแกรมและเชื่อมต่อ URL ไอคอนไซต์ที่ระดับเครือข่ายโดยใช้ปลั๊กอินที่ต้องใช้ (mu-plugins)

ปลั๊กอินการแคช เช่น WP Rocket, W3 Total Cache หรือ LiteSpeed ​​Cache อาจทำให้การอัปเดต favicon ล่าช้าได้ หลังจากเปลี่ยนไอคอนไซต์ของคุณแล้ว ให้ล้างเลเยอร์แคชทั้งหมด: แคชออบเจ็กต์ WordPress, แคชของหน้า, แคช CDN ของคุณ และแคชของเบราว์เซอร์ของคุณ หากไอคอนเก่ายังคงอยู่ ให้เพิ่ม `?v=2` ต่อท้ายลิงก์ favicon ด้วยตนเองใน HTML หรือรอให้แคช TTL หมดอายุ

หากต้องการตรวจสอบว่า WordPress กำลังแสดงแท็ก favicon ที่ถูกต้อง ให้คลิกขวาที่เว็บไซต์ของคุณในเบราว์เซอร์ เลือก View Page Source และค้นหา `rel='icon'` คุณควรเห็นทั้งรายการ favicon.ico และรายการ apple-touch-icon ที่ชี้ไปยังรูปภาพที่คุณอัปโหลด หากไม่มีอย่างใดอย่างหนึ่ง ธีมของคุณอาจจะแทนที่ `wp_head()` — ตรวจสอบให้แน่ใจว่า `<?php wp_head(); ?>` ถูกเรียกใน header.php ของธีมของคุณ

ปลั๊กอิน WordPress SEO ของบริษัทอื่น เช่น Yoast SEO และ Rank Math มีข้อมูลเมตาทางสังคมและสคีมาของตนเอง แต่ไม่รบกวนไอคอนเว็บไซต์ อย่างไรก็ตาม หากคุณติดตั้งปลั๊กอินเฉพาะ favicon เมื่อหลายปีก่อนก่อนที่ WordPress จะเพิ่มการสนับสนุนแบบเนทิฟ ปลั๊กอินนั้นอาจขัดแย้งกันในตอนนี้ ปิดใช้งานปลั๊กอิน favicon รุ่นเก่าก่อนที่จะใช้ตัวเลือก Customizer ในตัว

สำหรับไซต์ที่โฮสต์โดย WordPress.com (ตรงข้ามกับ WordPress.org ที่โฮสต์ด้วยตนเอง) พาธไอคอน Fav จะอยู่ใน ไซต์ของฉัน > การตั้งค่า > ทั่วไป > ไอคอนไซต์ ขั้นตอนเกือบจะเหมือนกันกับโฟลว์ Customizer ที่โฮสต์เอง แต่การแก้ไขธีมและปลั๊กอินจะถูกจำกัด ขึ้นอยู่กับแผนของคุณ อัปโหลด 512×512 PNG และบันทึก — WordPress.com จัดการการปรับขนาดและการแทรกแท็กทั้งหมด

หลังจากตั้งค่า favicon ของคุณแล้ว ให้ตรวจสอบว่าทำงานอย่างถูกต้องโดยใช้ favicon tester โดยป้อน URL เว็บไซต์ของคุณ นี่เป็นการยืนยันว่าไอคอนสามารถเข้าถึงได้แบบสาธารณะและปรากฏบนเส้นทางที่คาดไว้ นอกจากนี้ ให้ตรวจสอบ best favicon size เพื่อทำความเข้าใจว่าความละเอียดใดที่ WordPress สร้างขึ้น และคุณจำเป็นต้องเพิ่มความละเอียดใด ๆ ด้วยตนเองเพื่อรองรับ PWA หรือไม่