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

ตั้งแต่ WordPress 4.3 คอร์จะจัดส่งฟีเจอร์ ไอคอนเว็บไซต์ ที่ครอบตัด ปรับขนาด และแทรกแท็ก <link> ที่ถูกต้องสำหรับคุณ ไม่จำเป็นต้องมีปลั๊กอินสำหรับไซต์มาตรฐาน

ไอคอนที่อัปโหลดจะถูกจัดเก็บไว้ในไลบรารีสื่อและอ้างอิงผ่าน wp_site_icon() ที่ส่วนหน้า WordPress สร้างฝั่งเซิร์ฟเวอร์หลายขนาดเมื่อคุณเผยแพร่

คุณลักษณะนี้มาแทนที่การอัปโหลด favicon.ico ด้วยตนเองสำหรับบล็อกเกอร์ เอเจนซี่ และร้านค้า WooCommerce ส่วนใหญ่

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

ใน wp-admin ให้ไปที่ Appearance → ปรับแต่ง → เอกลักษณ์ของไซต์ → ไอคอนเว็บไซต์

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

คลิกเผยแพร่ เอาต์พุตหลักจะแสดงไอคอน apple-touch, ขนาด PNG ต่างๆ และเมตาแท็กในการโหลดหน้าส่วนหน้าครั้งถัดไป

สำหรับไอคอนตามส่วนหรือแบรนด์ไดเรกทอรีย่อย ให้กรอง get_site_icon_url() ในธีมลูกของคุณ functions.php

ตัวอย่างการใช้งาน: เครือข่ายหลายไซต์ซึ่งแต่ละไซต์ย่อยต้องการเครื่องหมายที่แตกต่างกันแต่ใช้ธีมเดียว ส่งคืน URL ที่แตกต่างกันตาม blog_id

ทีมขั้นสูงสามารถแยกเมตาไอคอนไซต์เริ่มต้นและพิมพ์แท็ก <link> ที่กำหนดเองใน header.php ได้ แต่หลักการทำงานที่ซ้ำกันนั้นทำได้ดีอยู่แล้ว

บล็อกเดียว: อัปโหลด 512×512 PNG ผ่าน Customizer เสร็จสิ้น — ไม่มี FTP ไม่มีการแก้ไข .ico

ร้านค้า WooCommerce: กระแสเดียวกัน; ตรวจสอบไอคอนในหน้าการชำระเงินและหน้าบัญชี ไม่ใช่แค่หน้าแรกเท่านั้น ปลั๊กอินแคชบางครั้งจะหน่วงเวลา CSS แต่ไม่ค่อยบล็อกแท็กไอคอน

แท็ก WordPress ไร้หัว: แท็ก ไอคอนเว็บไซต์ จะปรากฏบนหน้าที่แสดงผลด้วย PHP เท่านั้น ส่วนหน้า Next.js ของคุณต้องประกาศแท็ก <link> ของตัวเองในสถาปัตยกรรมนั้น

การจัดเตรียม → การผลิต: อัปโหลดใหม่หรือย้ายรหัสสื่อ URL ไอคอนแบบฮาร์ดโค้ดเฉพาะในกรณีที่คุณเข้าใจว่าแคช CDN ใช้งานไม่ได้

ปลั๊กอิน SEO ยอดนิยมอาจเปิดเผยการตั้งค่า favicon หลีกเลี่ยงการกำหนดค่าทั้งปลั๊กอิน SEO และ ไอคอนเว็บไซต์ ต่างกัน — เลือกแหล่งข้อมูลเดียว

ปลั๊กอินการแคช (WP Rocket, W3 Total Cache) ไม่ควรบล็อกไฟล์ไอคอน แต่อาจแคช HTML โดยไม่มีแท็กใหม่จนกว่าจะทำการล้างข้อมูล

ปลั๊กอิน Favicon สมเหตุสมผลก่อน WordPress 4.3 ในปี 2026 สิ่งเหล่านี้จะซ้ำซ้อน เว้นแต่คุณจะต้องการสลับไอคอนแบบเคลื่อนไหวหรือตามกำหนดเวลา

ฉันควรอัปโหลดไฟล์ประเภทใด PNG ปลอดภัยที่สุด WordPress ยอมรับ JPG แต่คุณสูญเสียความโปร่งใส

ขนาดขั้นต่ำ? 512×512 อย่างเป็นทางการ; แหล่งข้อมูลขนาดใหญ่ลดขนาดลง

WordPress สร้าง favicon.ico หรือไม่ มันส่งเสียงขนาด PNG และเมตาแท็ก เบราว์เซอร์ยังคงได้รับประโยชน์จากการวาง .ico จริงไว้ที่เว็บรูทผ่านการโฮสต์หรือธีมลูก

หลายไซต์: แต่ละไซต์มี ไอคอนเว็บไซต์ ของตัวเองใน Customizer ของตัวเอง ผู้ดูแลระบบเครือข่ายตั้งค่าสำหรับแต่ละไซต์ เว้นแต่ว่าธีมจะกรอง URL ทั่วโลก

เบราว์เซอร์แคช favicon แยกจาก HTML หลังจากเผยแพร่ใน WordPress แล้ว ให้รีเฟรชแคชหรือทดสอบในหน้าต่างส่วนตัว

เพิ่ม ?ver=2 ต่อท้าย URL ของไอคอนเฉพาะในกรณีที่คุณม้วนแท็กเอง URL ของ ไอคอนเว็บไซต์ มี args แบบสอบถามที่เปลี่ยนแปลงเมื่อคุณอัปโหลดอีกครั้ง

ล้างแคชอ็อบเจ็กต์ WordPress และ CDN ใดๆ (Cloudflare, Jetpack Boost) หาก HTML ยังคงอ้างอิง URL ไฟล์แนบเก่า

หากคุณย้ายโดเมน ให้ค้นหาฐานข้อมูลสำหรับ URL ไอคอนเก่าในตัวเลือกแบบอนุกรม — ผู้นำเข้าบางรายพลาด siteicon_id

ไอคอนเบลอหลังจากอัปโหลด: รูปภาพต้นฉบับมีขนาดเล็กกว่า 512×512 หรือไม่เป็นรูปสี่เหลี่ยมจัตุรัส สร้างใหม่จากต้นแบบที่ใหญ่กว่า

ไม่มีไอคอนในผลลัพธ์ของ Google: Google ใช้แคชของตัวเอง ขอจัดทำดัชนีใหม่ใน Search Console หลังจากอัปเดต ไอคอนเว็บไซต์

ไอคอนบนเดสก์ท็อป แต่ไม่ใช่ iPhone: iOS ต้องใช้ไอคอน apple-touch ยืนยันว่า ไอคอนเว็บไซต์ ได้รับการเผยแพร่แล้ว ไม่ใช่แค่บันทึกเป็นฉบับร่างใน Customizer

กล่องสีขาวรอบโลโก้: อัปโหลด JPG โดยมีพื้นหลังสีขาวแทนที่จะเป็น PNG แบบโปร่งใส

โฮสต์ WordPress ที่ได้รับการจัดการ (WP Engine, Kinsta, SiteGround) แคช HTML ที่ Edge หลังจากเปลี่ยน ไอคอนเว็บไซต์ ให้ล้างแคชทั้งหมดออกจากแดชบอร์ดของโฮสต์

พร็อกซีคลาวด์สีส้มของ Cloudflare สามารถแคช HTML โดยไม่ต้องแคช /wp-content/uploads/ ไอคอน ซึ่งปกติแล้วจะใช้ได้ แต่จะล้างข้อมูลออกเมื่อ URL ไฟล์แนบของไอคอนเปลี่ยนแปลง

ปลั๊กอินหลายภาษา (WPML, Polylang) จะไม่ทำซ้ำ ไอคอนเว็บไซต์ ต่อภาษาตามค่าเริ่มต้น ไอคอนเดียวให้บริการทุกสถานที่ เว้นแต่คุณจะกรอง URL

การตั้งค่า Bedrock หรือ Headless อาจย้ายตำแหน่งการอัปโหลด ยืนยัน URL ของสื่อในส่วนหน้า HTML ชี้ไปที่ CDN ของคุณคาดหวัง

หากคุณให้บริการการส่งออกแบบคงที่ (Simply Static, WP2Static) ให้สร้างการส่งออกใหม่หลังจากที่ไอคอนเปลี่ยนแปลง เพื่อให้ HTML ออฟไลน์รับ ID ไฟล์แนบใหม่

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

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

ตรวจสอบธีมผู้ดูแลระบบบุคคลที่สามที่ซ่อนลักษณะที่ปรากฏ → ปรับแต่ง คุณอาจต้องเปิดใช้งาน Customizer อีกครั้ง หรือใช้ลิงก์ในรายละเอียด Customizer ?autofocus[section]=title_tagline

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

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

ปลั๊กอินการเป็นสมาชิกที่แทนที่เทมเพลตส่วนหน้าควรยังคงเรียกใช้ wp_head() ดังนั้นเอาต์พุตเมตา ไอคอนเว็บไซต์

พอร์ทัลไคลเอ็นต์ไวท์เลเบลบางครั้งจะดึง hook การสร้างแบรนด์ออก — ตรวจสอบว่าความสามารถในการปรับแต่งไม่ได้ถูกปิดใช้งานในบทบาทของสมาชิกหากลูกค้าอัปโหลดไอคอนของตนเอง

เทมเพลตอีเมลไม่ได้ใช้ ไอคอนเว็บไซต์ โลโก้อีเมล WooCommerce เป็นการตั้งค่าแยกต่างหากภายใต้ลักษณะที่ปรากฏ → ปรับแต่ง → WooCommerce

หากก่อนหน้านี้คุณอัปโหลด FTP favicon.ico ไปยังเว็บรูท ไอคอนเว็บไซต์ จะไม่ลบออก เบราว์เซอร์อาจชอบแหล่งเดียวมากกว่าแหล่งอื่นอย่างไม่อาจคาดเดาได้

เลือกวิธีใดวิธีหนึ่ง: ใช้เอาต์พุต ไอคอนเว็บไซต์ PNG หรือเก็บ ICO ที่สร้างขึ้นด้วยมือไว้ที่ระดับรากโดยมีการออกแบบที่เข้ากัน ลบรายการที่ซ้ำกันหลังจาก QA

ธีมคลาสสิกที่มีลิงก์แบบฮาร์ดโค้ด rel=icon ใน header.php อาจต่อสู้กับคอร์ ไอคอนเว็บไซต์ ลบแท็กด้วยตนเองเมื่อเปิดใช้งาน ไอคอนเว็บไซต์

หลังจากการโยกย้าย ให้ล้างแคชและทดสอบในการเบราส์แบบส่วนตัวเพื่อดูว่าไอคอนใดชนะ

บันทึกแนวทางที่เลือกไว้ใน Runbook ของคุณ เพื่อให้นักพัฒนาคนต่อไปไม่เพิ่มปลั๊กอิน favicon ตัวที่สองที่ขัดแย้งกัน