פיתוח Favicon ו-Touch-Icon: סט מלא לאתרים ו-PWA
לעתים קרובות אתר נראה מצוין על שולחן העבודה, אך במכשירים ניידים הסמל במועדפים או במסך הבית יוצא מטושטש או נחתך. זה קורה כי כל פלטפורמה דורשת גודל ופורמט משלה. מפתחים שוכחים לעתים קרובות סמלים ל-PWA, מה שגורם לאפליקציה להיכשל בבדיקות Lighthouse. או שהם משתמשים ב-favicon.ico אחד לכל דבר, מה שגורם לטשטוש על Retina. אנחנו פותרים עבורכם את הבעיות האלה. לצוות שלנו יש ניסיון של למעלה מ-10 שנים בוקטוריזציה ורסטריזציה, והשלים למעלה מ-500 סטים של סמלים, מה שמבטיח תוצאות אמינות. למהנדסים שלנו יש מומחיות עמוקה באופטימיזציית PNG, הגדרת viewBox של SVG, ושילוב hash ל-cache-busting.
אילו גדלים ופורמטים דפדפנים מודרניים צריכים?
סט favicon מודרני אינו קובץ יחיד אלא ארטיפקט מלא לתרחישים שונים. להלן הרשימה המינימלית של קבצים שאתר צריך להכיל:
- favicon.ico: מיכל ICO מרובה גדלים 16×16 ו-32×32 לתאימות לאחור של דפדפנים.
- favicon-16x16.png: 16×16 לשורת הכתובת של Chrome.
- favicon-32x32.png: 32×32 עבור Safari ו-Retina.
- apple-touch-icon.png: 180×180 עבור 'הוסף למסך הבית' ב-iOS.
- android-chrome-192x192.png: 192×192 עבור Chrome באנדרואיד.
- android-chrome-512x512.png: 512×512 למסך הפתיחה של PWA.
- mstile-150x150.png: 150×150 לאריח Windows (msapplication-TileImage).
- safari-pinned-tab.svg: SVG מונוכרומטי עבור Safari Pinned Tab.
אם אתם משתמשים ב-PWA, עליכם לכלול manifest עם הפניות נכונות לסמלים. למידע נוסף על manifests ראו developer.mozilla.org.
יצירה אוטומטית של הסט מהירה פי 3 מהכנה ידנית של כל קובץ.
למה חשובה תמיכה ב-Maskable Icon באנדרואיד?
אנדרואיד מתאימה סמלים לצורות שונות—עיגול, squircle. ללא התכונה "purpose": "maskable", המערכת עלולה לחתוך את הסמל בצורה בלתי צפויה. כדי להימנע מכך, המקור חייב לכלול אזור בטוח: שוליים של 40 פיקסלים מהקצוות עבור גודל 512×512. ב-manifest זה נראה כך:
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}מה כלול בעבודה?
אנחנו מכינים סט מלא לאתר שלכם. התוצרים כוללים 12 קבצים: קובץ SVG מקורי אחד, ICO אחד, 9 PNG ו-manifest.json אחד.
- קובץ SVG מקורי עם viewBox נכון ואזור בטוח ל-maskable.
- כל קבצי הרסטר הנדרשים (מ-16×16 עד 512×512) בפורמט PNG ו-ICO.
{ "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ] }נכון עם כל הסמלים וייעודם.- תגי Meta עבור
manifest.json:<head>,apple-touch-icon,icon,msapplication-Tile. - בדיקה על מכשירים אמיתיים: iOS, אנדרואיד, Windows ודפדפנים שונים.
- ייעוץ אינטגרציה ותמיכה לאחר היישום.
תוצרים:
- סט סמלים מלא (SVG, PNG, ICO) עם מטא-דאטה נכון ו-hashes ל-cache-busting.
- manifest.json מוגדר כראוי.
- קטע HTML עבור
safari-pinned-tabכולל כל תגי ה-meta. - תיעוד המסביר את נתיבי הסמלים וייעודם.
- חודש תמיכה לכל בעיה.
איך אנחנו מכינים את הסט: תהליך שלב-אחר-שלב
- ניתוח הלוגו המקורי. בדיקה אם הוא עובד בגדלים קטנים. אם לא, פישוט קווי המתאר.
- יצירת מקור SVG עם viewBox מתאים. ציור או התאמת הלוגו בוקטור עם שוליים ל-maskable.
- יצירה אוטומטית של הסט המלא באמצעות סקריפטים מותאמים לעקביות (אופטימיזציית PNG דרך pngquant, יצירת ICO דרך ImageMagick).
- הגדרת
<head>. הגדרת נתיבים, purpose, maskable, גדלים. - הכנסת תגי meta לתוך
<head>. כל 8 הגרסאות, כולל msapplication-TileImage ו-apple-touch-icon. - בדיקה על מכשירים אמיתיים: iOS, אנדרואיד, Windows ודפדפנים.
טעויות נפוצות ופתרונות
- חסר apple-touch-icon 180×180: הסמל לא מוצג ב-iOS. כללו תמיד PNG בגודל 180×180 עם תג meta של apple-touch-icon.
- נתיב שגוי ב-manifest: PWA לא טוען סמלים. ודאו שהנתיבים יחסיים מהשורש והקבצים נגישים.
- חסר purpose של maskable: אנדרואיד חותך את הסמל בצורה שגויה. הוסיפו purpose: "any maskable" עבור סמלי 192 ו-512.
- SVG עבור Safari Pinned Tab אינו מונוכרומטי: לא נצבע לצבע הנושא. השתמשו רק במילוי שחור, ללא מעברי צבע.
- לוגו מורכב מדי עבור 16×16: מאבד קריאות. צרו גרסה מפושטת עבור 16×16.
אנחנו מבטיחים שאחרי העבודה שלנו, כל הסמלים יוצגו כראוי בכל המכשירים.
לוחות זמנים ועלות
הכנת סט מלא אורכת בין 0.5 ליום עסקים אחד. המחיר מתחיל ב-$150 לסטים בסיסיים ויכול להגיע ל-$300 עבור התאמות לוגו מורכבות. אתם חוסכים עד 50% בהשוואה ליצירה ידנית של כל קובץ בנפרד.
הזמינו הכנת סמלים
צרו קשר כדי לדון בפרויקט שלכם. נכין סמלים שעובדים בכל מקום—ב-iOS, אנדרואיד, Windows ובדפדפנים.