วิธีเพิ่ม Favicon ลงในไฟล์ Shopify ร้านค้า

เรียนรู้พื้นฐานของไฟล์ Shopify Favicon และวิธีวางบนร้านค้าออนไลน์ของคุณ

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

อะไร Shopify ฟาวิคอน?

A Shopify Favicon หรือ Favicon สำหรับเรื่องนั้นเป็นไอคอนขนาดเล็กสำหรับเว็บไซต์ของคุณที่ปรากฏบนแท็บเบราว์เซอร์ถัดจากชื่อเว็บไซต์ของคุณ

แถบที่อยู่ของเบราว์เซอร์เป็นพื้นที่ที่พบบ่อยที่สุดในการดู Favicon ของไซต์ แต่ยังปรากฏในตำแหน่งต่อไปนี้:

  • แอป Toolbar
  • Bookmarks
  • ผลการค้นหาประวัติ
  • แถบค้นหา
  • บางครั้งเมื่อแชร์บนโซเชียลมีเดีย

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

Shopify ตัวอย่าง Favicon

โดยค่าเริ่มต้น Shopify เพิ่มไฟล์ Shopify โลโก้สำหรับ Favicon ของคุณดังนั้นเราจำเป็นต้องเปลี่ยนสิ่งนั้น

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

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

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

อ่านต่อเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีเพิ่ม Favicon ลงในไฟล์ Shopify จัดเก็บ

วิธีเพิ่ม Favicon ลงในไฟล์ Shopify ร้านค้า

ดังที่ได้กล่าวไว้เมื่อเรียกใช้ไซต์ผ่าน Shopify มันจะเพิ่มไฟล์ Shopify โลโก้เป็น Favicon ของไซต์ของคุณ ไม่มีอะไรผิดปกติ แต่เป็นมืออาชีพและเน้นแบรนด์มากกว่าที่จะรวมโลโก้ของคุณเอง

ดังนั้นไปที่ไฟล์ Shopify แดชบอร์ดและคลิกที่ร้านค้าออนไลน์ภายใต้ช่องทางการขาย

ไปที่ธีมของคุณและคลิกที่ปุ่มปรับแต่งถัดจากธีมปัจจุบันของคุณ แม้ว่าการตั้งค่าจะเปลี่ยนจากธีมเป็นธีม แต่ล่าสุดทั้งหมด Shopify ธีมมีส่วนในการเปลี่ยน Favicon

ร้านค้าออนไลน์

ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร Shopify ปรับแต่งเลื่อนไปที่ด้านล่างของรายการทางด้านซ้ายและคลิกที่การตั้งค่าธีม

การตั้งค่าธีม

ในส่วนใหม่ให้ค้นหาและเลือกปุ่ม Favicon

ไอคอน Fav - Shopify favicon

ซึ่งจะแสดงปุ่มสำหรับเลือกรูปภาพหรือสำรวจรูปภาพฟรี ฉันนึกภาพไม่ออกว่ามีภาพฟรีที่ตรงกับโลโก้ของคุณดังนั้นควรคลิกเลือกรูปภาพเพื่ออัปโหลดภาพที่กำหนดเองจากคอมพิวเตอร์ของคุณ

เลือกภาพ

เลือกไฟล์ Favicon แล้วอัปโหลดไปที่ Shopify.

หลังจากนั้นคุณจะเห็นตัวอย่างไอคอน Favicon ของคุณ หากต้องการทำการเปลี่ยนแปลงอย่างถาวรให้เลือกปุ่มบันทึกใน Shopify.

ปุ่มบันทึก

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

ตัวอย่าง Shopify favicon

เคล็ดลับในการสร้าง Favicon ของคุณ

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

เพื่อแก้ไขปัญหาใด ๆ ต่อไปนี้เป็นเคล็ดลับในการสร้างไฟล์ Shopify ไอคอน Fav:

  • เริ่มการออกแบบของคุณที่มีขนาดใหญ่กว่า 32 × 32 และย่อขนาดลงหากจำเป็น คุณจะต้องมีภาพที่เบลอถ้าคุณพยายามที่จะขยายภาพที่มีขนาดเล็กลงในช่องว่าง ตัวอย่างเช่นการถ่ายภาพขนาด 32 × 32 จาก Hatchful และพยายามยืดออกเพื่อกำจัดส่วนที่เป็นลายลักษณ์อักษรของโลโก้อาจทำให้เกิดปัญหาได้
  • โดยทั่วไปคุณไม่สามารถใช้โลโก้ปัจจุบันของคุณและคาดหวังให้มันทำงานได้อย่างสมบูรณ์แบบในฐานะ Favicon
  • Favicon ดูดีมากเมื่อคุณครอบคลุมทุกพิกเซลของพื้นที่ที่ให้มา คุณไม่มีที่ว่างมากนักดังนั้นคุณควรใช้ประโยชน์จากทุกๆ square พิกเซลในพื้นที่ 32 × 32
  • ลบข้อความทั้งหมดเนื่องจากยากที่จะอ่านใน Favicon ข้อยกเว้นคือหากองค์ประกอบโลโก้หลักของคุณเป็นตัวอักษรขนาดใหญ่
  • ถ่ายภาพให้ได้สีทึบและสว่างขึ้น โลโก้ที่เรียบง่ายและเป็นการ์ตูนจะทำงานได้ดีที่สุด
  • ดู Favicons จากแบรนด์โปรดของคุณ พวกเขาทำอะไรเพื่อให้แน่ใจว่ารูปภาพออนไลน์ของพวกเขาผ่าน Favicon
  • ลองเติมพื้นที่ทั้งหมดด้วยพื้นหลังสีทึบหรือสร้างพื้นหลังโปร่งใสโดยให้องค์ประกอบเบื้องหน้ายืดออกเพื่อให้แตะขอบ คุณจะสังเกตเห็นว่าแบรนด์ขนาดใหญ่จำนวนมากมีพื้นหลังที่โปร่งใสสำหรับ Favicons ของพวกเขา
  • รูปแบบไฟล์ ICO ทำงานได้ดีกับภาพขนาดเล็ก หากคุณไม่คุ้นเคยให้ใช้ PNG สำหรับพื้นหลังโปร่งใสหรือ JPG สำหรับ Favicons ความละเอียดสูงที่มีพื้นหลังทึบ

วิธีสร้าง Favicon สำหรับไฟล์ Shopify ร้านค้า

คุณมีตัวเลือกในการออกแบบ Favicon ในซอฟต์แวร์ออกแบบที่คุณเลือก ถ้าคุณชอบ Photoshop ให้ไปที่นั่น หากคุณต้องการใช้ซอฟต์แวร์ฟรีเช่น GIMP หรือ Pixlr ซอฟต์แวร์ทั้งหมดจะทำงานได้ตราบเท่าที่คุณยึดตามขนาดที่ต้องการคือ 32 × 32

คุณยังมีตัวเลือกในการสร้าง Favicon ด้วย Shopifyโลโก้ Hatchful และเครื่องกำเนิด Favicon ฟรี ดูคำแนะนำทั้งหมดของเรา เกี่ยวกับการใช้ Hatchful เพื่อสร้างโลโก้

ดาวน์โหลดโลโก้

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

Shopify ไฟล์ Favicon

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

หากไม่เป็นเช่นนั้นให้ใช้ซอฟต์แวร์ตัดต่อของ บริษัท อื่นเช่น Photoshop หรือ Pixlr เพื่อตัดองค์ประกอบที่ไม่จำเป็นออกไป

สำคัญ: คุณจำเป็นต้องใช้รูปภาพขนาดใหญ่ขึ้นหากคุณวางแผนที่จะยืดมันบนผืนผ้าใบเพื่อตัดข้อความและพื้นที่สีขาวออก สำหรับสิ่งนี้ฉันใช้ Hatchful เพื่อสร้างโลโก้ แต่จริงๆแล้วใช้โลโก้ขนาดใหญ่อย่างใดอย่างหนึ่ง (ไม่ใช่ไฟล์ Favicon ที่ให้มา) เนื่องจากฉันไม่ต้องการให้ภาพเบลอเกิดขึ้นเมื่อฉันยืดบนผืนผ้าใบขนาด 32 × 32

ภายในซอฟต์แวร์แก้ไขของคุณให้เลือกผืนผ้าใบใหม่ที่มีทั้งความกว้างและความสูงตั้งไว้ที่ 32

32 โดย 32

สร้างเลเยอร์สำหรับรูปภาพใหม่และตรวจสอบให้แน่ใจว่ารูปภาพมีขนาดใหญ่กว่าผ้าใบ 32 × 32 เนื่องจากคุณอาจยืดออก จากนั้นอัปโหลดหรือวางภาพลงในผืนผ้าใบ

ในภาพหน้าจอต่อไปนี้ฉันมีการออกแบบ Favicon ที่ซูมเข้าดังนั้นฉันจึงแน่ใจได้ว่ามันพอดีกับไฟล์ square อย่างถูกต้อง มันพร่ามัว แต่ฉันรู้ว่ามันจะดูดีขึ้นมากเมื่อฉันซูมออก

รุ่นใหญ่

อย่างที่คุณเห็น Favicon เวอร์ชันซูมออกในตัวออกแบบ Pixlr นั้นดูดี ฉันได้ครอบคลุมพื้นที่ส่วนใหญ่ที่จัดสรรไว้เลือกใช้ไอคอนสีสว่างและทึบและลบสัญญาณทั้งหมดของข้อความที่มีขนาดเล็กลง

รุ่นเล็กกว่า

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

ดาวน์โหลด - Shopify favicon

กลับไปที่ Shopify แผงควบคุม. คลิกที่ร้านค้าออนไลน์> ธีม> ปรับแต่ง

จากนั้นไปที่การตั้งค่าธีม> Favicon

อัปโหลด Favicon ใหม่แล้วคลิกปุ่มบันทึกในไฟล์ Shopify บรรณาธิการ

ภาพตัวอย่าง

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

ผลิตภัณฑ์สุดท้าย - Shopify favicon

ในบทสรุป

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

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

หากคุณมีคำถามใด ๆ เกี่ยวกับการเพิ่ม Favicons Shopifyหรือสร้างของคุณเอง Shopify Favicon แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง

โจวอร์นิมอนต์

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