הגדר את "apple-touch-icon.png" להתאמה אישית של סימנייה של אתר אינטרנט של סימנייה FavIcon
תוכן עניינים:
אם יש לך אתר משלך או שאתה מפתח אחד עבור מישהו אחר, עליך להתאים אישית את סמל הסימנייה השמורה שמופיע במסך הבית של המשתמש ב-iOS. בצילום המסך למעלה תראה את ה-favicon המותאם אישית של OSXDaily יושב על המסך של אייפון.
הגדרת סמל Apple Touch היא רעיון טוב מכיוון שכברירת מחדל iOS ישמור תמונה ממוזערת קטנה של האתר. לעתים קרובות קשה לזהות את התמונות הממוזערות הקטנות ובדרך כלל לא נראות כל כך נהדרות, אז בואו נגדיר את תמונת ה-favicon משלכם במקום זאת.
כיצד להתאים אישית ולהגדיר סמל Apple Touch עבור אתר
- צור את הסמל, ודא שהוא ריבוע, זה כאן ב-OSXDaily.com הוא 512×512 פיקסלים, אבל אתה יכול לבחור גדלים ריבועיים אחרים אם אתה באמת רוצה - שימו לב שגדול יותר מתאים עבור תצוגות רשתית
- שמור את סמל מסך הבית כקובץ PNG ותווית אותו: apple-touch-icon.png
- שחרר את apple-touch-icon.png לספריית הבסיס של שרת האינטרנט, כך שניתן לגשת אליו בכתובת domain.com/apple-touch-icon.png
- בדוק את סמל הסימנייה של מסך הבית שלך על ידי ביקור באתר מ-Safari ב-iOS, ולאחר מכן הקשה על "הוסף למסך הבית"
- תסתכל במסך הבית של מכשיר ה-iOS ותראה את הסימניה שנשמרה שם עם הסמל המותאם אישית החדש שלך, כמו צילום המסך למעלה
כל עוד הקובץ נקרא כראוי ובספריית השורש של שרתי האינטרנט, Mobile Safari יידע מה לעשות איתו כך שאין צורך בהתאמה נוספת כדי לגרום ל-favicon הספציפי של iOS להופיע.
לעיון, הנה תמונת ה-'apple-touch-icon.png' המותאמת אישית שלנו שבה אנו משתמשים עבור OSXDaily.com, סמל סימניה לדוגמה זה נוצר ובגודל מתאים עבור תצוגות רשתית ():
תבחין שבקובץ הסמלים בפועל אין את שבירה האור שנשמרה בסמל, iOS מטפל בזה בעצמו. אתה יכול להשתמש בכל תמונה שתרצה, אבל אני ממליץ ליצור תמונה שתלכוד את ממשק המשתמש המוכר של אייקוני iOS קיימים.
זה כמובן לא זהה לאפליקציית iOS ייעודית, אבל חווית משתמש סלולרית סבירה מהאינטרנט היא רעיון טוב והיא מונעת את המחיר הגבוה של פיתוח אפליקציית iOS.
והיי, אם אתה מודאג מדברים כאלה, אתה כנראה משתמש בפוטושופ לפחות כדי לעצב את הסמלים נכון? אז בדוק כמה בזמן שאתה בזה.