วิธีเพิ่ม Shopify Favicon ของคุณ Shopify ร้านค้า

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

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

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

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

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

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

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

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

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

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

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

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

วิธีเพิ่ม Favicon ลงในไฟล์ Shopify ร้านค้า – คู่มือขั้นตอนด่วน

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

ขั้นตอนที่ 1: ไปที่ของคุณ Shopify แดชบอร์ด

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

ขั้นตอนที่ 2: ไปที่การตั้งค่าธีม

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

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

ขั้นตอนที่ 3: เลือกปุ่ม Favicon

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

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

ขั้นตอนที่ 4: อัปโหลด Favicon ของคุณ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในบทสรุป

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

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

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