האייקון הקטן שליד שם האתר בלשונית הדפדפן נקרא favicon, והוא אחד הפרטים שהכי מסגירים אתר לא גמור. בלעדיו מופיע ריבוע אפור או הלוגו של פלטפורמת הבנייה. כדי ליצור favicon לאתר צריך כמה קבצים בכמה גדלים, ואת כולם אפשר להכין בדקה עם הכלי ליצירת Favicon, ישירות בדפדפן.
איפה האייקון מופיע, ולמה צריך כמה גדלים
אותו סמל מוצג במקומות שונים ובגדלים שונים, ולכל מקום יש קובץ משלו:
- לשונית הדפדפן וסימניות: 16 ו-32 פיקסלים, בדרך כלל מתוך favicon.ico.
- תוצאות החיפוש של גוגל: גוגל מציג את האייקון ליד שם האתר, בעיקר בנייד. הוא צריך להיות ריבועי ובגודל של 48 פיקסלים לפחות (או כפולה שלו).
- מסך הבית באייפון: apple-touch-icon בגודל 180 פיקסלים.
- מסך הבית באנדרואיד ואפליקציית רשת: 192 ו-512 פיקסלים, שמוגדרים בקובץ site.webmanifest.
קובץ ICO אחד יכול להכיל כמה גדלים בתוכו. הכלי בונה favicon.ico עם 16, 32 ו-48 פיקסלים, כך שכל דפדפן בוחר את מה שמתאים לו.
איך יוצרים favicon לאתר בכלי
- בוחרים מה יהיה באייקון: טקסט או אמוג׳י, או תמונה ולוגו.
- בטקסט כותבים אות אחת עד שלוש (גם בעברית) או אמוג׳י, ובוחרים גופן, צבע טקסט וגודל. בתמונה מעלים קובץ PNG, JPG, WebP או SVG, ובוחרים אם להכניס את כל התמונה לריבוע או למלא ולחתוך, וכמה שוליים להשאיר.
- קובעים צבע רקע או רקע שקוף, וצורה: ריבוע, פינות מעוגלות או עיגול.
- כותבים את שם האתר ושם קצר. הם נכנסים לקובץ ה-manifest ומוצגים מתחת לאייקון במסך הבית של אנדרואיד.
- בודקים בתצוגה המקדימה איך האייקון נראה בלשונית, ב-16, ב-32 וב-180 פיקסלים.
- לוחצים על הורדת כל הקבצים ומקבלים ZIP עם הכול, כולל קובץ קוד מוכן. אפשר להוריד גם רק את favicon.ico או PNG בגודל 512.
מה עובד טוב ב-16 פיקסלים
הטעות הנפוצה ביותר היא להכניס את הלוגו המלא, עם השם והסלוגן. ב-16 פיקסלים זה הופך לכתם. כמה כללים פשוטים:
- סמל אחד או אות אחת. אם ללוגו יש סמל, משתמשים רק בו.
- ניגודיות חזקה בין הסמל לרקע. גוון בהיר על בהיר נעלם בלשונית.
- לא להשאיר יותר מדי שוליים. אייקון קטן מדי בתוך הריבוע נראה חיוור ליד אתרים אחרים.
- רקע שקוף נראה טוב בלשונית, אבל בלשונית כהה (מצב לילה) סמל שחור ייעלם. רקע צבעוני פותר את זה.
- אמוג׳י הוא פתרון מהיר ומשעשע לאתר אישי או לדף נחיתה, אבל הוא נראה אחרת בכל מערכת הפעלה, כי הכלי מצייר אותו בגופן האמוג׳י של המכשיר שלכם.
שימו לב גם לאייפון: iOS מציג שקיפות כשחור, ולכן הכלי ממלא את apple-touch-icon בצבע הרקע (או בלבן) ומשאיר מעט שוליים. האייפון מעגל את הפינות לבד.
איך מוסיפים את ה-favicon לאתר
באתר רגיל: פורסים את קובצי ה-ZIP לתיקייה הראשית של האתר, ומדביקים את קוד ה-HTML מהכלי בתוך ה-head של כל העמודים.
בוורדפרס: לא צריך קוד. מעלים את קובץ ה-PNG בגודל 512 כסמל האתר (Site Icon), ווורדפרס מייצר ממנו את הגדלים לבד. באלמנטור עושים את זה דרך הגדרות האתר, תחת זהות האתר.
אם האייקון הישן ממשיך להופיע, זה בגלל המטמון של הדפדפן. בודקים בחלון גלישה בסתר, ובקוד אפשר להוסיף לכתובת הקובץ ?v=2. בגוגל העדכון לוקח לפעמים כמה שבועות.
בונים אתר חדש ורוצים שהאייקון, הלוגו והצבעים ידברו באותה שפה? סטודיו טליה שלוש מעצב מיתוג ואתרי אלמנטור בעברית, כולל הפרטים הקטנים האלה.
עוד כלים שיעזרו
- הסרת רקע: מוציאים את הסמל מהלוגו עם רקע שקוף לפני שמכינים את האייקון.
- המרת קודי צבע: מוצאים את קוד ה-HEX המדויק של צבע המותג.
- תצוגה מקדימה לגוגל ולשיתוף: בודקים איך האתר ייראה בתוצאות החיפוש.
הכלים מהמדריך