วิธีแก้ไข WordPress Favicon ไม่แสดงในเบราว์เซอร์

Favicon เป็นไอคอนขนาดเล็กที่แสดงในแถบชื่อเรื่องของเบราว์เซอร์ เบราว์เซอร์ใช้ไอคอนนี้เพื่อแสดงแท็บเมื่อคุณปักหมุดหน้าเว็บ เสิร์ชเอ็นจิ้นบางตัวยังแสดง favicon ในผลการค้นหาด้วย จึงทำให้เป็นไอคอนแบรนด์สำหรับเว็บไซต์ Google เป็นตัวอย่างที่ดีที่พวกเราส่วนใหญ่สามารถค้นหาไอคอน G แบบง่าย ๆ บ่งชี้เว็บไซต์ Google Search อย่างไรก็ตาม มีสาเหตุหลายประการที่ทำให้ favicon ของ WordPress ของคุณไม่ปรากฏในเบราว์เซอร์เช่น Google Chrome หากคุณกำลังดิ้นรนเพื่อแก้ไขปัญหา ต่อไปนี้คือข้อมูลบางส่วนที่คุณสามารถลองใช้ได้

WordPress Favicon ในเบราว์เซอร์

ด้านล่างนี้คือการแสดงไอคอน Fav ในเบราว์เซอร์เดสก์ท็อป Google Chrome

เมื่อคุณตรึงแท็บ Chrome จะใช้ไอคอน Fav สำหรับแท็บนั้นดังด้านล่าง

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

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

แก้ไข WordPress Favicon ไม่แสดงใน Google Chrome

หากคุณไม่เห็นไอคอน Fav ของเว็บไซต์ของคุณใน Google Chrome หรือในเบราว์เซอร์อื่น ให้ปฏิบัติตามวิธีแก้ไขปัญหาด้านล่างเพื่อแก้ไขปัญหา

1. ตรวจสอบการตั้งค่า WordPress Favicon

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

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

2. ลบ Favicon ของธีมของคุณ

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

3. ใช้ปลั๊กอิน Favicon

ขนาด favicon ที่แนะนำให้แสดงในแถบชื่อของเบราว์เซอร์คือ 16 x 16 หรือ 32 x 32 หรือ 48 x 48 พิกเซล อย่างไรก็ตาม WordPress แนะนำให้ใช้ 512 x 512 พิกเซล เนื่องจาก WordPress ใช้ไอคอนเดียวกันกับไอคอนแอปบนอุปกรณ์เคลื่อนที่ ขออภัย ขนาดภาพที่ใหญ่กว่านี้อาจทำให้เกิดปัญหาในการแสดงภาพของคุณได้อย่างถูกต้อง เนื่องจากคุณต้องการขนาดรูปภาพที่แตกต่างกันสำหรับอุปกรณ์ที่แตกต่างกัน คุณสามารถลองใช้ปลั๊กอิน favicon เช่น RealFaviconGenerator

• ขั้นแรก ติดตั้งและเปิดใช้งานปลั๊กอินในไซต์ของคุณ

• ไปที่เมนู "การตั้งค่า > Favicon" และเปิดใช้งาน "แสดงการแจ้งเตือนการอัปเดต" เพื่อรับข้อมูลเมื่อมีการอัปเดตปลั๊กอิน

• ไปที่ส่วน "ลักษณะที่ปรากฏ> Favicon" และเลือก favicon ของคุณจาก Media Library หากไม่มีไอคอน ให้ปล่อย “Master picture URL” ว่างไว้ และคลิกที่ปุ่ม “Generate favicon”

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

• เลื่อนลงไปด้านล่างและคลิกที่ปุ่ม "สร้าง favicon และโค้ด HTML ของคุณ"

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

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

คุณสามารถลองใช้ปลั๊กอินนี้เพื่อเพิ่มไฟล์ favicon.ico ขนาด 48 x 48 พิกเซล หากไอคอนไซต์ WordPress เริ่มต้นไม่ทำงานบนไซต์ของคุณ นอกจากนี้ ปลั๊กอินนี้จะช่วยให้คุณสร้างไอคอนสำหรับอุปกรณ์ต่างๆ เช่น iOS และ macOS Safari สิ่งเดียวคือคุณต้องให้ปลั๊กอินทำงานอยู่เสมอเพื่อใช้ favicon บนไซต์ของคุณอย่างต่อเนื่อง

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

4. อัปโหลด Favicon ด้วยตนเอง

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

• เตรียมภาพ favicon ของคุณจากเครื่องมือสร้าง favicon ฟรี ตรวจสอบให้แน่ใจว่ารูปภาพอยู่ในรูปแบบ .ico หรือ .gif หรือ .png ที่มีขนาด 16 x 16 พิกเซล
• เข้าสู่ระบบเว็บเซิร์ฟเวอร์ของคุณโดยใช้ FTP หรือใช้แอพตัวจัดการไฟล์ในแผงโฮสต์และอัปโหลดภาพ favicon ในไดเรกทอรีรากของการติดตั้ง WordPress ของคุณ หากคุณต้องการอัปโหลดรูปภาพจาก Media Library ในแผงการดูแลระบบ ตรวจสอบให้แน่ใจว่าใช้เส้นทางของไฟล์ที่ถูกต้อง
• หากมีข้อสงสัย ให้เปิดไฟล์รูปภาพในเบราว์เซอร์ คุณควรจะสามารถเข้าถึงภาพที่คล้ายกับภาพอื่นๆ ในเว็บไซต์ของคุณ
• ตอนนี้ ไปที่ "ลักษณะที่ปรากฏ> ตัวแก้ไขธีม" และค้นหาไฟล์ header.php ของธีมของคุณ
• วางโค้ดด้านล่างในไฟล์ header.php ของคุณพร้อมกับเมตาแท็กอื่นๆ

 <link rel="icon" type="image/png" href="/favicon.png">

• ควรมีลักษณะดังนี้ และอย่าลืมใช้ URL ที่ถูกต้องสำหรับรูปภาพ favicon ของคุณ

• คลิกที่ปุ่ม "อัปเดตไฟล์" เพื่อบันทึกการเปลี่ยนแปลง
• หากคุณไม่ต้องการแก้ไขไฟล์ของธีมเพื่อจุดประสงค์นี้ คุณสามารถใช้ปลั๊กอิน เช่น แทรกส่วนหัวและส่วนท้าย และวางโค้ดด้านบนในพื้นที่ส่วนหัว

ตอนนี้เปิดเว็บไซต์ของคุณและตรวจสอบว่า favicon ปรากฏในแถบชื่อ

5. ลบ Favicon เริ่มต้นของโฮสติ้ง Favicon

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

สิ่งนี้จะไม่เกิดขึ้นกับ SiteGround และบริษัทโฮสติ้งอื่นๆ สิ่งที่คุณสามารถทำได้คือตรวจสอบการติดตั้งรูทเพื่อดูว่ามีไอคอน Fav ใดบ้างและแทนที่ด้วยไอคอนของคุณเอง หรือติดต่อฝ่ายสนับสนุนโฮสติ้งเพื่อตรวจสอบว่าสามารถแก้ไขได้หรือไม่

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

6. Favicon ใน Mac Safari

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

7. ล้างแคชไซต์และเบราว์เซอร์ของคุณ

หากคุณกำลังเปลี่ยนไอคอนหรือใช้รูปภาพอื่นที่มีชื่อไฟล์เดียวกัน ให้ล้างแคชของคุณ

• ล้างแคชในเว็บไซต์ของคุณหากคุณใช้ปลั๊กอินแคช เช่น WP Rocket, W3 Total Cache เป็นต้น
• ถัดไป ออกจากระบบแผงผู้ดูแลระบบแล้วกด "Control + Shift + Delete" ใน Windows หรือ "Command + Shift + Delete" ใน macOS การดำเนินการนี้จะเปิดป๊อปอัปประวัติการเข้าชมที่ชัดเจน เลือกตัวเลือก "ประวัติการท่องเว็บ" และ "รูปภาพและไฟล์ที่แคชไว้" แล้วลบออก
• ตอนนี้ เปิดเว็บไซต์ของคุณแล้วตรวจสอบว่าแสดง favicon ที่ถูกต้องในเบราว์เซอร์

บนอุปกรณ์มือถือ คุณต้องไปที่ส่วนการตั้งค่าหรือประวัติและล้างข้อมูลการท่องเว็บของคุณ

คำพูดสุดท้าย

favicon ก่อนหน้านี้ใช้โดยเบราว์เซอร์เท่านั้น อย่างไรก็ตาม แท็ก meta link เดียวกันใช้สำหรับไอคอนต่างๆ เช่น apple-touch-icon สำหรับ iOS ดังนั้นจึงเป็นความคิดที่ดีที่จะใช้ไอคอนที่จำเป็นทั้งหมดบนไซต์ของคุณและทดสอบว่าไอคอนเหล่านี้ใช้งานได้ในเบราว์เซอร์และอุปกรณ์อื่นๆ ไอคอนไซต์ WordPress เริ่มต้นอาจไม่เพียงพอในกรณีนี้ และคุณจำเป็นต้องใช้เมตาแท็กของคุณเองหรือใช้ธีมหรือปลั๊กอินที่มีคุณลักษณะนี้