ไอคอน Fav สำหรับ Shopify
Shopify ช่วยให้คุณสามารถอัปโหลด favicon จากเครื่องมือแก้ไขธีมได้ภายในไม่กี่วินาที ธีม Shopify สมัยใหม่ทุกธีมจะแสดงช่อง Favicon ใต้การตั้งค่าธีม และ CDN ของ Shopify จะแสดงไอคอนดังกล่าวในทุกหน้าของหน้าร้านของคุณ ใช้ favicon generator เพื่อสร้างสี่เหลี่ยมจัตุรัส 512×512 PNG ก่อน — Shopify จะปรับขนาดให้เป็นขนาดการแสดงผล 32×32 ที่ต้องการโดยอัตโนมัติ
ไอคอน Fav เป็นหนึ่งในแบรนด์แรกๆ ที่ส่งสัญญาณว่าผู้มีโอกาสเป็นลูกค้าจะเห็นเมื่อพวกเขาเปิดหลายแท็บ ในร้านค้า Shopify ไอคอนประจำจะปรากฏในแท็บเบราว์เซอร์ แถบบุ๊กมาร์ก และแถบที่อยู่ ไอคอน Fav ที่คมชัดและเป็นที่จดจำได้ช่วยเพิ่มความไว้วางใจให้กับแบรนด์ และช่วยให้ผู้ซื้อค้นพบแท็บร้านค้าของคุณได้อย่างรวดเร็วท่ามกลางแท็บที่เปิดอยู่หลายสิบแท็บ
ธีม Shopify สมัยใหม่ทุกธีม (ธีม Dawn, Refresh และธีมพรีเมียมส่วนใหญ่) จะมีช่อง Favicon ใน Theme Editor ใต้การตั้งค่าธีม หากต้องการเข้าถึง ให้เข้าสู่ระบบผู้ดูแลระบบ Shopify ของคุณ ไปที่ร้านค้าออนไลน์ > ธีม แล้วคลิกปรับแต่งถัดจากธีมสดของคุณ ในแถบด้านข้างซ้าย คลิกการตั้งค่าธีม (หรือไอคอนรูปเฟือง) จากนั้นมองหาส่วน Favicon
Shopify แนะนำให้อัปโหลดสี่เหลี่ยมจัตุรัส PNG ที่ 32×32 พิกเซลสำหรับฟิลด์ favicon ในทางปฏิบัติ การอัปโหลด 512×512 PNG จะให้ผลลัพธ์ที่คมชัดยิ่งขึ้น เนื่องจาก Shopify จะลดขนาดไฟล์ตัวอย่างลงเหลือ 32×32 โดยมีคุณภาพดีกว่าการเริ่มจากต้นฉบับที่มีขนาด 32×32 เริ่มจากแหล่งสี่เหลี่ยมที่ใหญ่ที่สุดที่คุณมีเสมอ — เครื่องกำเนิดทำให้สิ่งนี้ง่ายขึ้น
หลังจากอัปโหลด favicon ของคุณแล้ว ให้คลิกบันทึกที่มุมขวาบนของ Theme Editor Shopify ประมวลผลรูปภาพ อัปโหลดไปยัง CDN และเผยแพร่ไปยังหน้าร้านทุกหน้าภายในไม่กี่นาที คุณไม่จำเป็นต้องเผยแพร่ธีมของคุณอีกครั้งหรือทำการเปลี่ยนแปลงโค้ดอื่นใด
ธีม Shopify ที่เก่ากว่าหรือปรับแต่งอย่างหนักอาจไม่เปิดเผยฟิลด์ Favicon ในการตั้งค่าธีม ในกรณีนั้น คุณจะต้องแก้ไขโค้ด Liquid ของธีมโดยตรง เปิดตัวแก้ไขไฟล์ธีม (ร้านค้าออนไลน์ > ธีม > แก้ไขโค้ด) ค้นหาไฟล์ theme.liquid และค้นหาส่วน `<head>` แทรก `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` หลังจากอัปโหลด favicon.png ไปยังโฟลเดอร์ Assets ของธีม
สำหรับร้านค้า Shopify บนเฟรมเวิร์กธีม 2.0 favicon จะได้รับการจัดการผ่าน site.webmanifest ที่ Shopify สร้างโดยอัตโนมัติจากการตั้งค่าธีมของคุณ หากร้านค้าของคุณใช้ Progressive Web App Shell รายการของ Shopify จะมีไอคอนประจำเว็บไซต์เป็นไอคอนแอป การอัปเดต favicon ของธีมจะอัปเดตไอคอนรายการโดยอัตโนมัติ ไม่จำเป็นต้องแก้ไข JSON เพิ่มเติม
พื้นหลังแบบโปร่งใสทำงานอย่างถูกต้องในไอคอน Fav ของ Shopify เครื่องมือแก้ไขธีมจะรักษาช่องอัลฟ่า PNG เมื่ออัปโหลดไปยัง CDN อย่างไรก็ตาม หากโลโก้ของคุณมีพื้นหลังสีขาว ก็จะปรากฏพร้อมกล่องสีขาวในแท็บเบราว์เซอร์ในโหมดมืด ส่งออกโลโก้ของคุณโดยไม่มีการเติมพื้นหลังก่อนอัปโหลดเพื่อหลีกเลี่ยงปัญหานี้
หากคุณเปิดร้านค้า Shopify หลายแห่ง (การตั้งค่าทั่วไปสำหรับหน้าร้านต่างประเทศ) ร้านค้าแต่ละแห่งจะต้องมีการตั้งค่าไอคอน Fav แยกกัน ไอคอน Fav เป็นการตั้งค่าต่อร้านค้า ไม่ใช่การตั้งค่าพันธมิตร Shopify หรือระดับองค์กร เข้าสู่ระบบผู้ดูแลระบบของแต่ละร้านค้าแล้วทำซ้ำขั้นตอน Theme Editor
การทำให้แคชใช้ไม่ได้อาจทำให้การอัปเดต favicon ใน Shopify ล่าช้าได้ CDN ของ Shopify แคชเนื้อหาด้วย TTL ที่ยาว หลังจากเปลี่ยนไอคอน Fav เบราว์เซอร์อาจแสดงไอคอนเก่าต่อไปเป็นเวลาหลายชั่วโมง เปิดหน้าต่างส่วนตัว/ไม่ระบุตัวตนเพื่อดูไอคอนที่อัปเดตโดยไม่มีการรบกวนแคช หรือสั่งให้เบราว์เซอร์ของคุณรีเฟรชอย่างหนัก (Ctrl+Shift+R บน Windows, Cmd+Shift+R บน Mac)
Shopify จะไม่แทรก apple-touch-icon หรือแท็กลิงก์รายการแอปพลิเคชันบนเว็บ เว้นแต่ว่าเทมเพลตธีมของคุณจะรวมแท็กเหล่านั้นไว้ด้วย หากคุณต้องการให้การติดตั้งหน้าจอหลักของ iOS แสดงโลโก้ของคุณแทนที่จะเป็นภาพหน้าจอของหน้า ให้เพิ่มแท็ก apple-touch-icon ด้วยตนเองผ่านร้านค้าออนไลน์ > ธีม > แก้ไขโค้ด > theme.liquid วาง `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | Asset_url }}'>` ในส่วน `<head>` และอัปโหลด 180×180 PNG ไปยัง Assets
สำหรับร้านค้า Shopify Plus คุณสามารถใช้การสร้างแบรนด์จุดชำระเงินเพื่อปรับแต่งไอคอน Fav ในขั้นตอนการชำระเงินแยกจากไอคอน Fav หน้าร้านหลักได้ การสร้างแบรนด์ของ Checkout ได้รับการกำหนดค่าภายใต้การตั้งค่า > การชำระเงินและบัญชี > ปรับแต่ง วิธีนี้ช่วยให้หน้าชำระเงินของคุณแสดงไอคอน Fav ที่แตกต่างจากร้านค้าหลักได้ ซึ่งมีประโยชน์สำหรับการตั้งค่าหลายแบรนด์
เพื่อยืนยันว่าไอคอนประจำร้าน Shopify ของคุณใช้งานได้ ให้ใช้ live favicon tester และป้อน URL ของร้านค้าของคุณ ผู้ทดสอบยืนยันว่าไอคอนสามารถเข้าถึงได้แบบสาธารณะ และแสดงให้คุณเห็นว่าไอคอนแสดงผลที่ 16, 32 และ 48 พิกเซลอย่างไร ตรวจสอบ best favicon size ด้วยเพื่อทำความเข้าใจว่าขนาดเพิ่มเติมใดที่จะปรับปรุงประสบการณ์การติดตั้ง PWA ของคุณ
ข้อผิดพลาดทั่วไปของไอคอน Fav ของ Shopify ได้แก่ การอัปโหลดโลโก้สี่เหลี่ยมโดยไม่ครอบตัดเป็นสี่เหลี่ยมจัตุรัสก่อน (สร้างไอคอนรูปบิดเบี้ยว) การอัปโหลดรูปภาพขนาดเล็กมาก (เบลอบนจอเรตินา) และลืมคลิกบันทึกหลังจากอัปโหลด (การเปลี่ยนแปลงจะไม่ถูกกระทำจนกว่าคุณจะบันทึกอย่างชัดเจน) favicon generator ส่งออกสี่เหลี่ยมจัตุรัส PNG อย่างเหมาะสมที่ 512×512 พร้อมสำหรับการอัปโหลด Shopify โดยตรง
วิธีการทำงาน
- 1
สร้างสี่เหลี่ยมจัตุรัสขนาด 512×512 PNG
ใช้ [favicon generator](tool:favicon-generator) กับโลโก้หรือเครื่องหมายแบรนด์ของคุณ ส่งออก 512×512 PNG จากแพ็คเกจดาวน์โหลด ซึ่งเป็นขนาดอินพุตที่ถูกต้องสำหรับ Shopify
- 2
เปิดธีมของคุณใน Theme Editor
ในส่วนผู้ดูแลระบบ Shopify ของคุณ ไปที่ร้านค้าออนไลน์ > ธีม แล้วคลิกปรับแต่ง ถัดจากธีมสดของคุณ
- 3
ไปที่การตั้งค่าธีม > Favicon
ในแถบด้านข้างซ้าย คลิกการตั้งค่าธีม (ไอคอนรูปเฟืองที่ด้านล่างของธีมส่วนใหญ่) และมองหาส่วน Favicon หรือแบรนด์ ป้ายกำกับที่แน่นอนจะแตกต่างกันไปตามธีม
- 4
อัปโหลด PNG ของคุณและบันทึก
คลิกช่องอัปโหลดไอคอน Fav เลือก 512×512 PNG ของคุณ แล้วยืนยัน คลิกบันทึกที่มุมขวาบน Shopify อัปโหลดไอคอนไปยัง CDN และเผยแพร่ในทุกหน้า
- 5
ยืนยันในหน้าต่างที่ไม่ระบุตัวตน
เปิดหน้าต่างเบราว์เซอร์ส่วนตัว/ไม่ระบุตัวตน และนำทางไปยัง URL ร้านค้าของคุณ ยืนยันว่า favicon ใหม่ปรากฏในแท็บเบราว์เซอร์ ใช้ [favicon tester](utility:favicon-tester) สำหรับการตรวจสอบภายนอกอย่างรวดเร็ว
ลองเลย
สร้าง favicon ที่พร้อมใช้งาน Shopify
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
ฉันจะเพิ่ม favicon ใน Shopify ได้ที่ไหน+
ร้านค้าออนไลน์ > ธีม > ปรับแต่ง > การตั้งค่าธีม > Favicon อัปโหลดสี่เหลี่ยมจัตุรัส PNG (แนะนำ 512×512) คลิกบันทึก จากนั้น Shopify จะแทรกไอคอนบนหน้าร้านทุกหน้าโดยอัตโนมัติ
Shopify ใช้ favicon ขนาดใด+
Shopify แสดง favicon ที่ขนาด 32×32 พิกเซลในแท็บเบราว์เซอร์ อัปโหลด 512×512 เพื่อให้ได้ผลลัพธ์ที่คมชัดที่สุด — Shopify ลดตัวอย่างลงเป็น 32×32 อย่าอัปโหลดแหล่งที่มาที่มีขนาดเล็กกว่า 32×32 ไม่เช่นนั้นภาพจะเบลอ
เหตุใดไอคอน Fav ของ Shopify ของฉันจึงดูเบลอหรือยืดออก+
คุณอาจอัปโหลดรูปภาพที่ไม่ใช่สี่เหลี่ยมจัตุรัสหรือแหล่งที่มามีขนาดเล็กมาก ครอบตัดโลโก้ของคุณให้เป็นสี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบก่อนที่จะอัปโหลด และเริ่มต้นจากอย่างน้อย 256×256 พิกเซล [favicon generator](tool:favicon-generator) จะสร้างสี่เหลี่ยมจัตุรัส 512×512 PNG โดยอัตโนมัติพร้อมสำหรับ Shopify
เหตุใด favicon ใหม่ของฉันจึงไม่แสดง Shopify+
เบราว์เซอร์และ CDN แคชอัปเดตล่าช้า เปิดหน้าต่างที่ไม่ระบุตัวตน/ส่วนตัว และนำทางไปยัง URL ร้านค้าของคุณเพื่อดูไอคอน favicon ที่อัปเดตโดยไม่มีการรบกวนแคช หากยังคงแสดงไอคอนเก่าในการเรียกดูปกติ ให้รอสองสามชั่วโมงเพื่อให้แคช CDN หมดอายุ
ฉันสามารถเพิ่ม apple-touch-icon ไปยังร้านค้า Shopify ของฉันได้หรือไม่+
ใช่ แต่ต้องมีการแก้ไขโค้ดด้วยตนเอง อัปโหลด 180×180 apple-touch-icon.png ไปยังโฟลเดอร์ Assets ของธีมของคุณ จากนั้นเพิ่ม `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | Asset_url }}'>` ใน theme.liquid ภายในส่วน `<head>`
Shopify รองรับไอคอน Fav ของ SVG หรือไม่+
การอัปโหลดไอคอน Fav Theme Editor ในตัวไม่ยอมรับ SVG หากต้องการใช้ไอคอนประจำเว็บไซต์ SVG ให้เพิ่มแท็กลิงก์ด้วยตนเองใน theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | Asset_url }}'>` หลังจากอัปโหลด SVG ไปยังโฟลเดอร์ Assets
ฉันจำเป็นต้องมีนักพัฒนาเพื่อเปลี่ยน favicon Shopify ของฉันหรือไม่+
ไม่ เมื่อใช้ Theme Editor (ร้านค้าออนไลน์ > ธีม > ปรับแต่ง > การตั้งค่าธีม > Favicon) คุณสามารถอัปโหลดและบันทึก favicon ใหม่ได้ภายในเวลาไม่ถึงสองนาทีโดยไม่ต้องใช้โค้ด การเข้าถึงของนักพัฒนาจำเป็นสำหรับการเพิ่ม SVG หรือ apple-touch-icon เท่านั้น