מחולל Favicon
אל תשאירו את סמל הכרטיסייה כברירת מחדל. העלו תמונה אחת וייצאו ערכת favicon לדפדפנים, iOS, Android ו-PWAs.
העלאת תמונה
PNG, JPG וSVG נתמכים. מקור 512x512 ומעלה עובד בצורה הטובה ביותר.
תצוגה מקדימה חיה
קטע HTML
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
שיטות עבודה מומלצות של Favicon
למה חשובות מספר גדלים
דפדפנים, סימניות, כרטיסיות מוצמדות, הנחיות התקנה וקיצורי דרך לנייד מבקשים גדלים שונים. סט מלא שומר על הסמל חד במקום לתת לפלטפורמות להגדיל קובץ זעיר.
PNG לעומת ICO
דפדפנים מודרניים מטפלים היטב באייקוני PNG. ICO נשאר שימושי עבור תאימות מדור קודם, בעוד PNG נותן בדרך כלל שקיפות נקייה יותר וטיפול פשוט יותר בנכסים.
עיצוב לגדלים זעירים
Favicon מוצג לעיתים קרובות בגודל 16x16. צורות פשוטות, ניגודיות חזקה ופחות פרטים שורדים בדרך כלל טוב יותר מלוגו מלא שנדחס ללשונית.
מדריך אייקוני פלטפורמה
דפדפן שולחני
משמש עבור כרטיסיות, סימניות ורשימות היסטוריית דפדפן.
iOS / iPhone
משמש כאשר האתר נוסף למסך הבית. יצירות אמנות אטומות בדרך כלל עובדות בצורה הטובה ביותר.
אנדרואיד כרום
משמש לצד web manifest עבור הנחיות התקנה, מסכי פתיחה ומחליף המשימות.
מדריך התקנה מהיר
הורידו וחלצו
השתמשו בלחצן ההורדה כדי לייצא קובץ ZIP שמכיל נכסי PNG, קובצי manifest וקטע קוד.
העלו לשורש הציבורי
מקמו את הקבצים שחולצו במקום שבו הם נגישים לציבור, כמו תיקיית public של האתר.
הוסיפו את תגיות ה-head
העתיקו את קטע הקוד שנוצר ל-head של המסמך ונקו את מטמון הדפדפן כדי לאמת את האייקונים החדשים.
שאלות נפוצות
מה כלול בקובץ ה-zip?
ה-zip מכיל קובצי PNG נפוצים של דפדפן Favicon, סמלי מגע של Apple, גדלי אייקונים של אנדרואיד וקובץ site.webmanifest.
מה זה site.webmanifest?
זהו מניפסט JSON שאומר לדפדפנים כיצד האתר צריך להתנהג כשהוא מותקן על מסך הבית או מופעל כמו אפליקציה.
איך אני משתמש בסמלים האלה?
העלו את הקבצים שנוצרו לשורש הציבורי וכללו את תגיות ה-head שנוצרו בדפים שאמורים לחשוף את ה-favicon.
מדוע הסמל הישן שלי עדיין מופיע?
דפדפנים שומרים קובצי אייקונים במטמון בצורה אגרסיבית. נסו hard refresh, ניקוי נתוני אתר, שינוי URL של האייקון או בדיקה בפרופיל דפדפן חדש.
האם ה-favicon צריך להתאים בדיוק לסמל האפליקציה?
זה צריך להרגיש קשור, אבל זה לא צריך להיות זהה. מותגים רבים משתמשים בסימן מפושט עבור גדלי favicon ובסמל עשיר יותר עבור סמלי אפליקציות מותקנות.