Favicon עבור Shopify
Shopify מאפשר לך להעלות סמל מועדף מעורך הנושא תוך שניות. כל ערכת נושא Shopify מודרנית חושפת שדה Favicon תחת הגדרות ערכת נושא, וה-CDN של Shopify משרת את הסמל בכל עמוד בחזית החנות שלך. השתמש ב-favicon generator כדי ליצור תחילה ריבוע 512×512 PNG - XXH3XX ישנה את גודלו לגודל התצוגה הנדרש 32×32 באופן אוטומטי.
Favicon הוא אחד מאותות המותג הראשונים שלקוח פוטנציאלי רואה כאשר הוא פותח מספר כרטיסיות. בחנויות Shopify, הסמל מופיע בלשונית הדפדפן, בסרגל הסימניות ובשורת הכתובות. Favicon חדה ומוכר מחזק את אמון המותג ועוזר לקונים למצוא את כרטיסיית החנות שלך במהירות בין עשרות כרטיסיות פתוחות.
כל ערכת נושא 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 שלך לתיקיית הנכסים של הנושא.
עבור חנויות Shopify במסגרת ערכת הנושא 2.0, ה-favicon מנוהל באמצעות ה-site.webmanifest ש-Shopify מייצר אוטומטית מהגדרות ערכת הנושא שלך. אם החנות שלך משתמשת במעטפת של Progressive Web App, המניפסט של Shopify כולל את ה-favicon כסמל האפליקציה. עדכון ה-favicon של ערכת הנושא מעדכן אוטומטית את סמל המניפסט - אין צורך בעריכת JSON נוספת.
רקעים שקופים פועלים כהלכה ב-Shopify favicons. עורך הנושא שומר על ערוץ האלפא PNG בעת העלאה ל-CDN. עם זאת, אם ללוגו שלך יש רקע לבן, הוא יופיע עם תיבה לבנה בלשוניות דפדפן במצב כהה. ייצא את הלוגו שלך ללא מילוי רקע לפני ההעלאה כדי למנוע זאת.
אם אתה מפעיל מספר חנויות Shopify (הגדרה נפוצה לחלונות ראווה בינלאומיים), כל חנות חייבת להגדיר את ה-favicon שלה בנפרד. ה-favicon הוא הגדרה לכל חנות, לא הגדרה של שותף Shopify או ברמת הארגון. היכנס למנהל המערכת של כל חנות וחזור על שלבי Theme Editor.
אי תוקף מטמון יכול לעכב עדכוני favicon ב-Shopify. ה-CDN של Shopify מאחסן נכסים עם TTL ארוכים. לאחר שינוי ה-favicon, הדפדפנים עשויים להמשיך להציג את הישן במשך שעות. פתח חלון פרטי/גלישה בסתר כדי לראות את הסמל המעודכן ללא הפרעות מטמון. לחלופין, הנח את הדפדפן שלך לרענן קשה (Ctrl+Shift+R ב-Windows, Cmd+Shift+R ב-Mac).
Shopify אינו מחדיר באופן מקורי תג קישור למניפסט של apple-touch-icon או יישום אינטרנט, אלא אם תבנית הנושא שלך כוללת אותם. אם אתה רוצה שהתקנות מסך הבית של iOS יציגו את הלוגו שלך במקום צילום מסך של עמוד, הוסף את תג apple-touch-icon באופן ידני דרך החנות המקוונת > ערכות נושא > ערוך קוד > theme.liquid. הצב `<link rel='apple-touch-icon' sizes='180x180' href='{{ 'apple-touch-icon.png' | asset_url }}'>` בקטע `<head>` והעלה את ה-180×180 PNG לנכסים.
עבור חנויות Shopify Plus, אתה יכול להשתמש במיתוג קופה כדי להתאים אישית את ה-favicon בזרימת הקופה בנפרד מה-favicon של חזית החנות הראשית. מיתוג Checkout מוגדר תחת הגדרות > Checkout וחשבונות > התאמה אישית. זה מאפשר לדפי התשלום שלך להציג Favicon שונה מהחנות הראשית, וזה שימושי עבור הגדרות ריבוי מותגים.
כדי לוודא שסמל ה- Shopify שלך פועל, השתמש ב- live favicon tester והזן את כתובת האתר של החנות שלך. הבוחן מאשר שהסמל נגיש לציבור ומראה לך כיצד הוא מתאר ב-16, 32 ו-48 פיקסלים. בדוק גם את best favicon size כדי להבין אילו גדלים נוספים ישפרו את חוויית ההתקנה של PWA שלך.
טעויות נפוצות של Shopify favicon כוללות העלאת לוגו מלבני מבלי לחתוך אותו לריבוע תחילה (מייצר אייקון מעוך), העלאת תמונה קטנה מאוד (מטשטשת בתצוגות הרשתית), ושכחה ללחוץ על Save לאחר ההעלאה (השינוי אינו מחויב עד שתשמור במפורש). ה-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 שלך ושמור
לחץ על שדה העלאת favicon, בחר את ה-512×512 PNG שלך ואשר. לחץ על שמור בפינה השמאלית העליונה. Shopify מעלה את הסמל ל-CDN שלו ומפיץ אותו בכל הדפים.
- 5
אמת בחלון גלישה בסתר
פתח חלון דפדפן פרטי/גלישה בסתר ונווט אל כתובת האתר של החנות שלך. אשר שסמל ה-favicon החדש מופיע בלשונית הדפדפן. השתמש ב-[favicon tester](utility:favicon-tester) לבדיקה חיצונית מהירה.
נסה עכשיו
צור Favicon מוכן ל-Shopify
מחולל פביקוןשאלות נפוצות
היכן אוכל להוסיף סמל סמל ב-Shopify?+
חנות מקוונת > ערכות נושא > התאמה אישית > הגדרות ערכת נושא > Favicon. העלה ריבוע PNG (מומלץ 512×512), לחץ על שמור ו-Shopify יזריק את הסמל לכל עמוד חזית חנות באופן אוטומטי.
באיזה גודל favicon משתמש Shopify?+
Shopify מציג את ה-favicon ב-32×32 פיקסלים בכרטיסיות הדפדפן. העלה 512×512 לתוצאה החדה ביותר - Shopify הורדת דגימות ל-32×32. לעולם אל תעלה מקור קטן מ-32×32 או שהוא ייראה מטושטש.
מדוע Shopify favicon שלי נראה מטושטש או מתוח?+
כנראה שהעלית תמונה לא מרובעת או מקור קטן מאוד. חתוך את הלוגו שלך לריבוע מושלם לפני ההעלאה, והתחל מ-256×256 פיקסלים לפחות. ה-[favicon generator](tool:favicon-generator) מייצר אוטומטית ריבוע 512×512 PNG מוכן ל-XXH3XX.
מדוע הסמל החדש שלי Shopify לא מוצג?+
דפדפנים ומטמוני CDN מעכבים עדכונים. פתח חלון גלישה בסתר/פרטי ונווט אל כתובת האתר של החנות שלך כדי לראות את ה-favicon המעודכן ללא הפרעות מטמון. אם הוא עדיין מציג את הסמל הישן בגלישה רגילה, המתן מספר שעות עד שתוקף מטמון ה-CDN יפוג.
האם אוכל להוסיף apple-touch-icon לחנות Shopify שלי?+
כן, אבל זה דורש עריכת קוד ידנית. העלה קובץ 180×180 apple-touch-icon.png לתיקיית נכסי הנושא שלך, ולאחר מכן הוסף `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>` ב-theme.liquid בתוך הקטע `<head>`.
האם Shopify תומך ב-SVG favicons?+
ההעלאה המובנית של Theme Editor favicon אינה מקבלת SVG. כדי להשתמש בסמל SVG, הוסף את תג הקישור באופן ידני ב-theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` לאחר העלאת ה-SVG לתיקיית הנכסים.
האם אני צריך מפתח כדי לשנות את סמל ה-Shopify שלי?+
לא. באמצעות ה-Theme Editor (חנות מקוונת > ערכות נושא > התאמה אישית > הגדרות ערכת נושא > Favicon), אתה יכול להעלות ולשמור סמל חדש תוך פחות משתי דקות ללא קוד. יש צורך בגישה למפתחים רק עבור תוספות של SVG או apple-touch-icon.