วิธีเพิ่มและเปลี่ยน Favicon ของ WordPress | บัฟ WP

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

Favicon คืออะไร?

ไอคอน Fav คือไอคอนที่ปรากฏในแท็บเบราว์เซอร์หรือหน้าต่าง และในรายการบุ๊กมาร์กหรือรายการโปรดที่เกี่ยวข้องกับเว็บไซต์ใดเว็บไซต์หนึ่งโดยเฉพาะ หากเบราว์เซอร์ไม่พบ favicon ที่กำหนดเอง จะแสดง favicon เริ่มต้นแทน

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

เหตุใดฉันจึงควรใช้ Favicon

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

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

ข้อมูลจำเพาะของ Favicon

ขนาด favicon ใน WordPress คือ 16 × 16 พิกเซล อย่างไรก็ตาม เบราว์เซอร์และแอปพลิเคชันอื่นๆ บางตัวใช้ขนาดที่ใหญ่กว่า ตั้งแต่สี่เหลี่ยมจัตุรัสขนาด 16 ถึง 195 พิกเซล

หากคุณใช้ขนาด 16×16 ตามปกติ แอปพลิเคชันที่ใช้ขนาดที่ใหญ่กว่ามักจะขยายให้ใหญ่ขึ้น ซึ่งมักทำให้เกิดการแตกพิกเซล ด้วยเหตุนี้ ข้อมูลประจำตัวของไซต์ WordPress จึงต้องการ 512×512 แทน

ขนาดสำรองทั่วไปบางขนาด ได้แก่:

• 24 พิกเซล – ไอคอนสำหรับไซต์ที่ปักหมุดใน Internet Explorer 9
• 72 พิกเซล – ไอคอนบนหน้าจอหลักของ iPad
• 128 พิกเซล – ไอคอนที่ใช้ใน Chrome เว็บสโตร์
• 195 พิกเซล – ไอคอนที่แสดงบน Opera Speed ​​Dial

รูปแบบ Favicon

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

PNG เป็นตัวเลือกที่ใช้งานง่ายที่สุด เนื่องจากเกือบทุกโปรแกรมกราฟิกจะบันทึกในรูปแบบนี้ และให้ไฟล์ขนาดเล็กและช่วยให้ favicon โปร่งใสหากต้องการ

Opera รองรับการใช้ SVG สำหรับไอคอน Fav แม้ว่าจะเป็นเบราว์เซอร์เดียวที่ทำได้

GIF, JPG และ APNG เป็นตัวเลือกแต่มีประโยชน์น้อยกว่าเนื่องจากความละเอียดของไฟล์นั้นแย่กว่าและอาจทำให้เสียสมาธิได้ ไฟล์ GIF แบบเคลื่อนไหวและไฟล์ APNG จะทำให้ไขว้เขวเป็นพิเศษ ซึ่งจะเป็นภาพเคลื่อนไหวด้วย

การสร้าง Favicon

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

พิจารณาปัจจัยต่อไปนี้เพื่อปรับปรุงคุณค่าของไอคอน Fav ของคุณ

ตัวตน

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

ความเรียบง่าย

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

สี

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

วิธีเพิ่ม Favicon บน WordPress

เพิ่ม favicon ของ WordPress โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้:

1) ใช้ตัวเลือกไอคอนไซต์ในตัวใน WordPress

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

หากไฟล์ที่คุณเลือกไม่ใช่สี่เหลี่ยมจัตุรัส WordPress จะมีอินเทอร์เฟซสำหรับครอบตัดรูปภาพเป็นสี่เหลี่ยมจัตุรัส

2) แก้ไข header.php

แก้ไขไฟล์ header.php ในธีมปัจจุบันของคุณและเพิ่มโค้ดนี้:

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

แทนที่ “yourdomain” ด้วยชื่อโดเมนของเว็บไซต์ของคุณ และอย่าลืมอัปโหลด favicon ไปยังพื้นที่เว็บ

หากคุณต้องการป้องกันไม่ให้ WordPress เลิกทำการเปลี่ยนแปลงในการอัปเดต ให้สร้างธีมย่อยก่อนแก้ไขและแก้ไขไฟล์ธีมย่อยแทนไฟล์ธีมหลัก

3) ใช้ปลั๊กอิน WordPress

ใช้ปลั๊กอินตัวใดตัวหนึ่งที่เราแสดงรายการด้านล่าง

วิธีเปลี่ยน Favicon ใน WordPress

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

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

ลดความซับซ้อนด้วยปลั๊กอิน WordPress Favicon

ทำให้ขั้นตอนในการเพิ่มหรือเปลี่ยน favicon ของ WordPress ง่ายขึ้นด้วยการติดตั้งปลั๊กอิน

• คุณสามารถใช้ปลั๊กอิน แทรกส่วนหัวและส่วนท้ายเพื่อเพิ่มโค้ดด้านบนได้อย่างง่ายดาย วางรหัสลงในส่วนหัวและบันทึก
• ปลั๊กอิน All in One Favicon เพิ่มฟังก์ชันการทำงานเพื่อลดขั้นตอนในการเพิ่ม favicon
• RealFaviconGenerator เป็นปลั๊กอินที่สร้างไอคอนตามความต้องการของเบราว์เซอร์
• ปลั๊กอินยอดนิยมอีกตัวหนึ่งคือ Heroic Favicon Generator ซึ่งสร้าง favicon จากภาพที่อัปโหลดหรือที่มีอยู่แล้วในไลบรารีสื่อของคุณ ใช้การลากและวางเพื่ออัปโหลดไฟล์ภาพ

เหตุใด WordPress Favicon ของฉันจึงไม่แสดงขึ้น

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

แคช

เมื่อเว็บไซต์ของคุณถูกแคช การเปลี่ยนแปลงในองค์ประกอบต่างๆ เช่น favicon จะใช้เวลาในการแสดง คุณสามารถเร่งกระบวนการได้โดยทำการฮาร์ดรีเฟรช (Ctrl + F5) หรือล้างแคชของเบราว์เซอร์ หากยังไม่สามารถแก้ปัญหาได้ ให้ตรวจสอบประเภทไฟล์ favicon หากไม่ใช่ไฟล์ .ico แสดงว่าอาจเข้ากันไม่ได้กับเบราว์เซอร์

ความผิดพลาด

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

WordPress Favicon Location

การอ้างอิงไฟล์มีความเฉพาะเจาะจงมากเช่นกัน หากลิงก์ (ส่วนที่อยู่ภายในเครื่องหมายคำพูด href) ชี้ไปที่รูปภาพที่ไม่มีอยู่ ไอคอน Fav จะไม่แสดง โปรดใช้ความระมัดระวังในการอัปโหลดไฟล์ favicon และคัดลอกลิงก์ที่ถูกต้อง วิธีที่ดีที่สุดคือใช้ Media Library ใน WordPress

มุมมองในท้องถิ่น

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

ประเภทรูปภาพไม่ถูกต้อง

ประเภทไฟล์เริ่มต้นสำหรับรูปภาพ favicon คือ .ico (“image/ico”) เมื่อใช้ไฟล์ประเภทอื่น เช่น PNG หรือ SVG ไฟล์นั้นจะต้องปรับเปลี่ยนในโค้ดเมื่อใช้วิธีการแก้ไขธีม ประเภทไฟล์ต้องตรงกับประเภทไฟล์ของรูปภาพ ตัวอย่างเช่น ไฟล์ PNG ควรระบุว่า "image/png" แทนที่จะเป็น "image/ico"

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อที่เกี่ยวข้องกับ WordPress ทุกประเภท สมัครรับจดหมายข่าว WPBuffs

คนยังถาม