UX של פאביקון: מה הופך פאביקון למצוין

פאביקון מצוין הוא סימן פשוט בעל ניגודיות גבוהה, בדרך כלל סימן הלוגו שלכם או אות אחת או שתיים, שנשאר קריא ב-16x16 פיקסלים הן בלשוניות דפדפן בהירות והן בכהות, תואם את המותג שלכם ומשתנה רק לעתים רחוקות. כל שאר הנושאים במדריך הזה (יישור לפיקסלים, צבע, ריווח, שקיפות, גודל קובץ) משרתים את המטרות האלה: לגרום לאתר שלכם להיות קל לאיתור מיידי בין עשרות לשוניות פתוחות.

פאביקון הוא זעיר, אבל הוא מופיע במקומות רבים: לשוניות דפדפן, סרגלי סימניות, רשימות היסטוריה, תפריט חיפוש הלשוניות, תוצאות חיפוש בגוגל במובייל ובדסקטופ, ומסכי הבית של הטלפון. עבור משתמשים עם הרבה לשוניות פתוחות, הכותרת נחתכת לעתים קרובות עד שלא נשאר ממנה דבר, והסמל הוא הרמז היחיד שנותר. זה הופך אותו לרכיב ניווט אמיתי, ולא לקישוט.

1. קריאות ב-16x16

גודל הפאביקון הקלאסי הוא 16x16 פיקסלי CSS. במסך רגיל מדובר ממש ב-256 פיקסלים; במסך רטינה 2x הדפדפן בדרך כלל בוחר תמונה של 32x32 עבור אותו שטח. כל מה שתעצבו חייב לשרוד את הצמצום הזה.

שמרו על פשטות

• צורה אחת או אות אחת עד שתיים. אות בודדת ומודגשת, עיגול עם סמל או סימן גאומטרי פשוט עובדים היטב. שלוש אותיות או מילה שלמה יהפכו לרעש.
• נקודת מיקוד אחת. אם אי אפשר לתאר את הסמל בחמש מילים, הוא מורכב מדי.
• בלי גרדיאנטים, צללים או מרקמים עדינים. בגדלים קטנים הם הופכים לכתמים מטושטשים.

יישרו לרשת הפיקסלים

ב-16x16, קו שממוקם בחצי פיקסל מחוץ לרשת עובר החלקה (anti-aliasing) על פני שתי שורות פיקסלים ונראה אפור ורך. מקמו את הקצוות על גבולות פיקסל שלמים והשתמשו ברוחבים זוגיים כשהצורה סימטרית. אם אתם מייצאים מכלי וקטורי, הפעילו הצמדה לפיקסלים (pixel snapping), או בדקו את התוצאה המוקטנת ותקנו אותה ידנית.

הימנעו מקווים דקים

קווים דקים מ-2 פיקסלים ב-16x16 (כ-12 אחוזים מרוחב הסמל) נוטים להיעלם או להבהב בין גדלים. עבו את הקווים, הסירו פרטים פנימיים ומזגו רווחים קטנים. גליף מודגש וכבד במקצת נקרא לרוב טוב יותר מהעתק מוקטן ונאמן של לוגו מפורט.

כוונון ידני

לקובצי ICO ו-PNG אין hinting בסגנון גופנים, ולכן עריכת פיקסלים ידנית היא המקבילה: אתם מתאימים פיקסלים בודדים כך שעקומות, אלכסונים וחללים פנימיים (החורים באותיות כמו "a" או "e") יישארו חדים. הקטנה אוטומטית היא טיוטה ראשונה טובה, אבל כמה פיקסלים שהונחו ביד עושים לא פעם את ההבדל בין כתם לבין אות שניתן לזהות. עורך הפיקסלים של MakeFav נבנה בדיוק לשם כך: פתחו את הקנבס של 16x16, תקנו את הפיקסלים הבעייתיים וייצאו.

2. ניגודיות בלשוניות בהירות וכהות

דפדפנים רבים רצים כיום במצב כהה, ולמשתמשים רבים יש סרגל לשוניות שונה מערכת הנושא של הדף. סמל כחול כהה עם רקע שקוף יכול להיות מושלם על לשונית לבנה ולהיעלם כמעט לגמרי על לשונית אפורה כהה. תמיד בדקו את שני המצבים.

פתרונות מעשיים

• הוסיפו צורת רקע. ריבוע מעוגל מלא או עיגול בצבע המותג מבטיחים שלסימן תהיה ניגודיות משלו, בלי קשר ללשונית.
• השתמשו במסגרת דקה או בהילה. קצה בהיר של פיקסל אחד סביב גליף כהה (או להפך) שומר על הצללית גלויה בשני הנושאים, אבל ב-16x16 הוא חייב להישאר חד, ולכן בדקו אותו.
• בחרו צבעי מותג בגוון בינוני. צבעים כמו כחול חזק, כתום, ירוק או מג'נטה עובדים בדרך כלל גם על משטחים לבנים וגם על משטחים כמעט שחורים. צהוב בהיר מאוד או כחול כהה מאוד הם הבחירות המסוכנות.
• השתמשו בפאביקון SVG אדפטיבי. ב-SVG אפשר לכלול media query של prefers-color-scheme כך שהסמל ישתנה עם נושא המערכת.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

שימו לב ש-media query משקף את הנושא של מערכת ההפעלה או הדפדפן, וזה בדרך כלל מה שסרגל הלשוניות עוקב אחריו, אבל לא תמיד. גם התמיכה בפאביקון SVG משתנה: Chrome ו-Firefox תומכים בו, בעוד ש-Safari מפגר היסטורית, ולכן תמיד שמרו גיבויי PNG או ICO. עיצוב עם רקע מלא הוא האפשרות העמידה ביותר, כי הוא לא צריך שום לוגיקת נושא.

3. זיהוי ועקביות מותגית

השתמשו בסימן הלוגו (הסמל או המונוגרמה), ולא בלוגו המלא עם הטקסט. טקסט בתוך סמל של 16x16 אינו קריא, ולוגו אופקי רחב שמכווצים לריבוע משאיר רק פס זעיר באמצע.

• אם למותג שלכם יש סמל, פשטו אותו לגדלים קטנים במקום פשוט להקטין אותו. "גרסת פאביקון" עם פחות פרטים היא נוהג מקובל.
• אם המותג שלכם הוא לוגו טקסט בלבד, קחו את האות הראשונה או זוג אותיות ייחודי והציגו אותו בגופן המותג במשקל כבד.
• שמרו על עקביות בצבעים עם הלוגו, אייקון האפליקציה ותמונות הפרופיל ברשתות החברתיות, כך שהמשתמש יזהה את אותו מותג בכל מקום.

ייחודיות חשובה לא פחות מנאמנות למקור. הביטו בשורת לשוניות: אם שלושה אתרים אחרים משתמשים גם הם בעיגול כחול, האתר שלכם לא יבלוט. צורה או צבע שונים שימושיים יותר מהקטנה נאמנה לחלוטין.

4. צבע: פלטה מוגבלת ורוויה

עם כל כך מעט פיקסלים, כל צבע נוסף מוסיף עומס. כוונו לצבע אחד או שניים, ולכל היותר בתוספת לבן או שחור. צבעים רוויים נראים טוב יותר בגדלים קטנים מצבעי פסטל, שנוטים להיטמע ברקע הלשונית.

שאבו קצת מחשיבה על נגישות. WCAG דורש יחס ניגודיות של לפחות 3:1 עבור אובייקטים גרפיים משמעותיים (קריטריון הצלחה 1.4.11, Non-text Contrast). פאביקון אינו מכוסה רשמית, מכיוון שהוא חלק מממשק הדפדפן ולא מתוכן הדף, אך יחס 3:1 בין הגליף לרקע שלו, ובין הסמל ללשונית, הוא יעד מוצק. כמו כן, הימנעו מהעברת מידע באמצעות גוון בלבד: גרסאות אדומות מול ירוקות של אותו סמל אינן ניתנות להבחנה עבור משתמשים רבים עם עיוורון צבעים, ולכן שנו את הצורה או הוסיפו סמל.

5. צורה, ריווח ואזורי ביטחון

מלאו את הריבוע

לשוניות דפדפן מציגות את הפאביקון בגודל קטן קבוע, ולכן שוליים מיותרים רק מקטינים את הסימן שלכם. עבור סמלי לשוניות רגילים, נצלו את רוב הקנבס, עם פיקסל או שניים בלבד של מרווח, כך שהסימן יהיה גדול ככל האפשר.

מעוגל או מרובע?

דפדפנים בדרך כלל לא חותכים פאביקונים של לשוניות, ולכן הצורה שציירתם היא הצורה שהמשתמשים רואים. ריבוע עם פינות מעוגלות קלות נראה מסודר ומעניק רקע עקבי; גליף חופשי או עיגול על רקע שקוף יכולים להיראות קלילים וייחודיים יותר. שתי האפשרויות טובות. בחרו אחת ושמרו על עקביות בכל ערכת הסמלים שלכם.

אייקוני Apple touch

iOS מוסיף פינות מעוגלות משלו ל-apple-touch-icon (180x180 הוא הגודל המקובל). ספקו ריבוע מלא עד הקצוות (full-bleed) ללא פינות מעוגלות מראש, אחרת עלולים להופיע בפינות פסים כהים או לבנים גלויים.

אייקונים ניתנים למיסוך (maskable) עבור Android ו-PWA

אייקונים ניתנים למיסוך נחתכים על ידי מערכת ההפעלה לעיגולים, squircles או צורות אחרות. שמרו את כל התוכן החשוב בתוך אזור הביטחון: עיגול ממורכז באייקון ברדיוס של 40 אחוזים מרוחב האייקון. הרחיבו את צבע הרקע עד הקצוות כדי שכל מסכה תיראה נכון. אל תשתמשו שוב בפאביקון לשונית הדוק שמגיע עד הקצוות כאייקון ניתן למיסוך, כי המסכה תחתוך אותו.

6. שקיפות

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

7. יציבות: אל תשנו אותו לעתים קרובות מדי

פאביקון בונה זיהוי באמצעות חזרתיות. שינויים תכופים מאלצים את המשתמשים ללמוד מחדש איזו לשונית שלכם, וגם גורמים לכאבי ראש טכניים. דפדפנים שומרים פאביקונים במטמון באגרסיביות, וגוגל מושך ושומר אותם בנפרד מהדפים שלכם, כך שסמל חדש יכול לקחת ימים או שבועות להופיע בתוצאות החיפוש. גוגל גם מבקש כתובת URL יציבה לפאביקון, סמל שגודלו כפולה של 48 פיקסלים (48x48, 96x96 וכן הלאה), וקובץ שאפשר לסרוק (שלא נחסם על ידי robots.txt). התייחסו לשינוי פאביקון כהחלטה ברמת מיתוג מחדש, ולא כקישוט עונתי.

8. מצבי התראה ופאביקונים דינמיים

חלק מאפליקציות הווב משנות את הפאביקון כדי לציין הודעות שלא נקראו, מצב הקלטה או שגיאה. כשזה נעשה היטב, זה מועיל; כשמגזימים, זה מעצבן.

• השתמשו בתגית קטנה (נקודה או מספר קצר) בפינה, ולא בעיצוב מחדש מלא. סמל הבסיס צריך להישאר ניתן לזיהוי.
• שמרו על מינימליזם. הקצו תגיות לאירועים שדורשים פעולה מצד המשתמש. אל תנפישו את הסמל ברציפות.
• הגבילו מספרים. ב-16x16 רק ספרה אחת או שתיים קריאות; הציגו "9+" או נקודה פשוטה במקום "137".
• אפסו מיד כשהמשתמש טיפל בפריט, והחזירו את סמל ברירת המחדל.
• אל תסתמכו על צבע בלבד. נקודה אדומה צריכה להיתמך גם בכותרת הדף, למשל "(3) דואר נכנס", כך שהמידע יהיה זמין לכולם.

פאביקונים דינמיים מצוירים בדרך כלל על קנבס ומוחלפים על ידי עדכון ה-href של אלמנט ה-link של הסמל. הגבילו את קצב העדכונים (throttle), כי שינוי מתמיד של הפאביקון עלול לצרוך CPU ולהסיח את דעת המשתמשים.

9. ביצועים

פאביקונים קטנים, אבל הם עדיין בקשות שאפשר לבצע בצורה גרועה.

• שמרו על קבצים קטנים. פאביקון PNG הוא בדרך כלל כמה מאות בתים עד כמה קילובייטים. SVG פשוט יכול להיות מתחת ל-1 KB.
• הימנעו מקובצי ICO מנופחים. ICO רב-גדלים עם תמונות של 16, 32 ו-48 פיקסלים מספיק. הטמעת תמונה של 256x256 מכפילה את גודל הקובץ ללא תועלת נראית לעין בלשוניות דפדפן.
• הגדירו כותרות מטמון. הגישו סמלים עם משך חיים ארוך ב-Cache-Control, למשל public, max-age=31536000, immutable, והשתמשו בשם קובץ עם גרסה או גיבוב (hash) כשאתם משנים אותם.
• הצהירו על הסמלים במפורש. דפדפנים מבקשים את /favicon.ico כברירת מחדל, ולכן ספקו אחד גם אם אתם מצהירים על סמלים אחרים, כדי למנוע רעש של שגיאות 404 ביומנים שלכם.
• דחסו. העבירו קובצי PNG דרך אופטימייזר ללא אובדן איכות, ובצעו minify ל-SVG.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

אם אתם רוצים ליצור את כל הקבצים האלה מתמונת מקור אחת, מחולל הפאביקונים של MakeFav מפיק את הערכה הסטנדרטית, ועמוד המפתחים מכסה אפשרויות שילוב.

10. נגישות

לפאביקון אין טקסט חלופי וקוראי מסך לא מכריזים עליו, ולכן כלי הנגישות המסורתיים כמו מאפייני alt אינם חלים. מה שכן חשוב:

• כותרת הדף נושאת את המשמעות. כתבו אלמנטי <title> ייחודיים ותיאוריים. לעולם אל תסתמכו על הסמל כדי להעביר מצב; שקפו כל תגית גם בכותרת.
• נראות למשתמשים עם ראייה לקויה. ניגודיות גבוהה, צורה מודגשת וסימן גדול עוזרים למשתמשים שסורקים לשוניות באופן חזותי.
• אי-תלות בצבע. ודאו שצורות או אותיות מבדילות בין מצבים, ולא רק גוון.
• הפחתת הסחות דעת. הימנעו מפאביקונים מהבהבים או מונפשים, העלולים להוות בעיה למשתמשים רגישים לתנועה.

צ'קליסט UX לפאביקון

צ'קליסט בדיקות

אל תסמכו על התצוגה המקדימה הגדולה בכלי העיצוב שלכם. בדקו את הסמל האמיתי בתנאים אמיתיים:

1. דפדפנים מרובים. בדקו ב-Chrome, Firefox, Safari ו-Edge, כי כל אחד בוחר סמלים וגדלים קצת אחרת.
2. מצב בהיר וכהה. החליפו את נושא מערכת ההפעלה והדפדפן והסתכלו על סרגל הלשוניות בכל פעם.
3. מסכי רטינה ומסכים רגילים. בדקו במסך 1x ובמסך 2x או 3x, והתקרבו (zoom) בדפדפן.
4. סרגל סימניות. הוסיפו את הדף לסימניות וראו אם הסמל עדיין קריא לצד אתרים אחרים.
5. לשוניות רבות. פתחו 20 לשוניות וראו אם אתם מוצאים את שלכם במבט חטוף.
6. תצוגה מקדימה ב-SERP של גוגל. בדקו תוצאת חיפוש במובייל לאחר שהסמל נסרק מחדש. זכרו שהעדכון עשוי לקחת זמן.
7. מסך הבית. הוסיפו את האתר למסכי הבית של iOS ושל Android וודאו שהסמל לא נחתך, אין בו פינות שחורות והוא לא קטן מדי בתוך המסכה.
8. בדיקה טכנית. הריצו את הדומיין שלכם דרך בודק הפאביקונים של MakeFav כדי לוודא שהקבצים קיימים, מחזירים סטטוס 200, בגדלים הנכונים ומוצהרים נכון ב-HTML שלכם.

תהליך עבודה מעשי

1. התחילו מסימן הלוגו שלכם ופשטו אותו לצורה אחת או לאות אחת.
2. צרו קנבס מרובע עם רקע מלא או בצורה שעובד בשני הנושאים.
3. ייצאו את הגדלים 32x32 ו-16x16 ושפרו את הגרסה הקטנה ידנית בעורך הפיקסלים.
4. צרו את הערכה המלאה (ICO, PNG, apple-touch-icon, אייקוני manifest) באמצעות המחולל.
5. הוסיפו את תגיות ה-link, הגדירו כותרות מטמון, פרסו, ואמתו עם הבודק.

פאביקון הוא אחד הנכסים הקטנים ביותר באתר שלכם ואחד הנצפים ביותר. כמה החלטות קפדניות בנוגע לניגודיות, פשטות ועקביות גורמות לו לעבוד בכל לשונית, נושא ומכשיר.

שאלות נפוצות

מה צריך להיות גודל הפאביקון?

עצבו ל-16x16 ול-32x32 עבור לשוניות דפדפן (הדפדפן משתמש ב-32x32 במסכים בצפיפות גבוהה), ספקו apple-touch-icon בגודל 180x180 עבור iOS, וקובצי PNG בגודל 192x192 ו-512x512 עבור Android ו-PWA. עבור תוצאות החיפוש של גוגל, השתמשו בסמל מרובע שגודלו כפולה של 48 פיקסלים, כמו 48x48 או 96x96. מקור SVG מתאים את עצמו לכולם.

האם להשתמש בלוגו המלא שלי כפאביקון?

בדרך כלל לא. לוגואים מלאים עם טקסט מפורטים מדי ורחבים מדי עבור סמל מרובע של 16x16. השתמשו בסימן הלוגו או במונוגרמה של אות אחת או שתיים, ופשטו אותו כך שיישאר ניתן לזיהוי גם כשהוא זעיר.

איך גורמים לפאביקון לעבוד במצב כהה?

הגישה הבטוחה ביותר היא לתת לסמל צורת רקע מלאה משלו או מסגרת מנוגדת, כך שהוא לא יהיה תלוי בצבע הלשונית. לחלופין, השתמשו בפאביקון SVG עם media query של prefers-color-scheme להחלפת צבעים, ושמרו גיבויי PNG או ICO לדפדפנים שאינם תומכים בסמלי SVG. תמיד בדקו בנושאים בהיר וכהה כאחד.

למה הפאביקון החדש שלי לא מופיע?

דפדפנים שומרים פאביקונים במטמון לזמן ארוך, וגוגל שומר עותק משלו, שאותו הוא מרענן לפי לוח זמנים משלו, ולעתים זה לוקח ימים או שבועות. בצעו רענון קשיח של הדף, נקו את מטמון הדפדפן, השתמשו בשם קובץ חדש עם גרסה, וודאו שתגיות ה-link וקובץ /favicon.ico בשורש מצביעים לקובץ הנכון. אפשר לאמת את ההגדרה עם הבודק של MakeFav.

האם זה רעיון טוב להציג תגיות התראה על פאביקון?

כן, אם משתמשים בהן במידה. נקודה קטנה או מספר בן ספרה אחת או שתיים עוזרים למשתמשים לשים לב למשהו שדורש פעולה, אבל אנימציה מתמדת או מספרים גדולים פוגעים בקריאות ובקשב. תמיד שקפו את המצב בכותרת הדף, החזירו את סמל ברירת המחדל כשהפריט טופל, ואל תסתמכו על צבע בלבד.