Apple מדריך סמל מגע

ה-apple-touch-icon הוא נכס נפרד לחלוטין מה-favicon.ico שלך. כרטיסיות הדפדפן משתמשות ב-favicon.ico (או ב-PNG/SVG המקושרות). התקנות מסך הבית של iOS משתמשות ב-apple-touch-icon. ללא apple-touch-icon, Safari מצלם צילום מסך ברזולוציה נמוכה של נקודת התצוגה של הדף שלך ומשתמש בזה כסמל מסך הבית - תוצאה מטושטשת, נטולת מותגים, שנראית לא מקצועית לצד אפליקציות מקוריות.

Apple הציג את apple-touch-icon ב-iOS 1.1.3 עוד בשנת 2007 ומאז פיתח את הגדלים הנתמכים ככל שצפיפות המסך של האייפון והאייפד גדלה. ההמלצה הנוכחית לקובץ יחיד של כל המכשירים היא 180×180 פיקסלים. גודל זה מוצג בצפיפות של 60p @3x באייפון 6 פלוס, אייפון X ובכל דגמי האייפון הבאים. דגמים ישנים יותר (אייפון SE דור 1, מכשירי אייפון טרום פלוס) משתמשים ב-120×120 ב-2x - iOS מקטין אוטומטית את הקובץ בגודל 180×180 כך שיתאים.

עבור כיסוי iPad, Apple ממליץ על 167×167 עבור iPad Pro (3x) ו-152×152 עבור אייפד סטנדרטיים. בפועל, קובץ בודד בגודל 180×180 שימש כ-apple-touch-icon מכסה את כל המקרים הללו באופן מקובל מכיוון ש-iOS מפחית את קנה המידה עם סינון בילינארי איכותי. אם חדות פיקסלים מושלמת ב-iPad Pro היא בראש סדר העדיפויות, הוסף תג נוסף של `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>`.

פורמט PNG הוא חובה עבור apple-touch-icon. iOS מתעלם מ-.ico, JPEG, SVG ו-GIF עבור סמלים של מסך הבית. ייצא תמיד PNG-32 (עם ערוץ אלפא) או PNG-24 (ללא שקיפות, אם לסמל שלך יש רקע מוצק). שקיפות נתמכת ומומלצת - סמל רקע שקוף מאפשר ל-iOS להחיל את אפקטי הפינה המעוגלת והמבריק הסטנדרטיים שלו על גרסאות iOS ישנות יותר.

שוליים בטוחים חשובים עבור ה-apple-touch-icon. למרות ש-iOS כבר לא מחיל את שכבת העל המבריק הישנה (הוסר ב-iOS 7), הוא כן חותך את הסמל לצורת מלבן מעוגלת. שמור את לוגו הליבה שלך מוכנס בכ-10% מכל הצדדים כדי להבטיח ששום דבר חשוב לא ייחתך על ידי הפינות המעוגלות. האזור הבטוח הוא בערך 162×162 פיקסלים בתוך בד 180×180.

הצבת קובץ apple-touch-icon בשורש הדומיין שלך חשובה. למרות שאתה יכול להשתמש בכל כתובת אתר דרך תג הקישור href, גרסאות מסוימות של iOS Safari וכמה סורקים Apple (עבור שילוב מנוע החיפוש Spotlight) ינסו להביא /apple-touch-icon.png או /apple-touch-icon-precomposed.png ישירות מהשורש מבלי לקרוא את תג הקישור HTML. הצבת הקובץ בשורש מספקת את התאימות הטובה ביותר.

הגרסה `precomposed` של התג - `<link rel='apple-touch-icon-precomposed'>` – אומרת לגרסאות ישנות יותר של iOS לא להחיל אפקטים חזותיים נוספים (ברק, פינות מעוגלות, צללית) על הסמל שלך. Apple הסיר את ההשפעות האלה ב-iOS 7, כך שב-2026 ההבחנה בין `apple-touch-icon` ל-`apple-touch-icon-precomposed` אינה רלוונטית עבור iOS המודרנית. השתמש בערך rel רגיל `apple-touch-icon`.

הצהרות גודל מרובות נתמכות באמצעות תגי קישור מרובים. לדיוק מירבי בכל מכשירי Apple, אתה יכול להצהיר: `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>` עבור iPhone 6 Plus ואילך, `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>` עבור iPad Pro, ו-<link rel='apple-touch-icon' sizes='152x152' href='/apple-touch-icon-152x152.png'>` עבור מכשירי iPad ישנים יותר. iOS בוחר את ההתאמה הקרובה ביותר.

Apple Watch אינו משתמש ב-apple-touch-icon עבור סמלי אפליקציית שעון - אלה מגיעים מחבילת האפליקציות המקורית. עם זאת, אם משתמש מנווט לאתר שלך מדפדפן Apple Watch, Safari Watch מציג את ה-apple-touch-icon ברשימת הסימניות. אותו 180×180 PNG עובד כאן ללא כל שינויים.

macOS Safari ב-Mac משתמש גם ב-apple-touch-icon בעת הוספת אתר ל-Dock כאפליקציה אינטרנט (macOS Sonoma ואילך מאפשר הצמדת אתרים כאפליקציות אינטרנט מ-Safari). ה-apple-touch-icon משמש כסמל ה-Dock. זה הופך את ה-apple-touch-icon לחשוב לא רק לנייד אלא גם למשתמשי Mac ב-macOS מודרנית.

בעת עדכון ה-apple-touch-icon, iOS מאחסן את הסמל הישן במכשיר של המשתמש ואינו בודק אם יש עדכונים אלא אם המשתמש מסיר את סמל מסך הבית ומוסיף אותו מחדש, או מנקה את המטמון של Safari. אין שליטה בצד השרת על המטמון הזה - זוהי התנהגות iOS בצד הלקוח. העברת זה לבעלי עניין עוזרת להגדיר ציפיות לגבי המהירות שבה מותג מחדש מתפשט לחסכון הקיים במסך הבית.

בדיקה נכונה של ה-apple-touch-icon שלך דורשת התקן iOS פיזי או סימולטור Xcode iOS. במכשיר, פתח את Safari, נווט אל האתר שלך, הקש על כפתור השיתוף ובחר 'הוסף למסך הבית'. התצוגה המקדימה בתיבת הדו-שיח אמורה להציג את ה-apple-touch-icon שלך. אם הוא מציג צילום מסך במקום זאת, או שהקובץ אינו נגיש בכתובת האתר המוצהרת שלו או שתג הקישור חסר ב-HTML שלך.

ה-favicon generator מוציא את ה-180×180 apple-touch-icon.png כחלק מחבילת favicon הסטנדרטית. לאחר היצירה, מקם את הקובץ בשורש האתר שלך והוסף את תג הקישור ל-HTML `<head>` שלך. למדריך מלא לכל גדלי האייקונים הנלווים ל-apple-touch-icon, עיין בהפניה של favicon sizes explained.