מה זה פביקון (favicon)? איפה רואים? איך מעדכנים? ועוד

פביקון

המילה פביקון נוצרה מצמד המילים favorite icon וזהו אייקון (צלמית) המופיע במספר מקומות בדפדפנים. והמקום הכי בולט הוא ליד שם הטאב.

איפה ניתן לראות פביקון?

נתחיל ממספר דוגמאות לפביקונים.

מצ"ב דוגמא של דפדפן chrome בו סימנתי את הפביקונים באליפסות ירוקות.

דוגמאות לפביקונים
דוגמאות לפביקונים

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

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

Favicon on mobile
Favicon on mobile

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

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

חשיבות הפביקון

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

איך מעדכנים פביקון באתר שלכם?

פעם היה צריך להעלות את קובץ הפביקון ("favicon.ico") לספריית root בשרת, אבל היום התהליך הרבה יותר פשוט. כך למשל החל מגרסת 4.3, WordPress תומך בעדכון פביקון. ונכון להיום רוב תבניות עיצוב בוורדפרס תומכות בפביקון.

הנה למשל צורת עדכון של פביקון באתר וורדפרס עם תבנית עיצוב Astra:

עדכון פביקון בוורדפרס
עדכון פביקון בוורדפרס

צורת עדכון דומה ניתן למצוא גם ב- Squarespace, Wix ובוני אתרים אחרים.

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

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

אם אתם יוצרים פביקון בעצמכם אז החל מ-2020 הגודל המומלץ הוא 32X32 פיקסלים (ולא 16X16). ובמידה ואתם משתמשים בוורדפרס אז הגודל הוא 512X512.

איך יוצרים פביקון?

אפשר ליצור פביקון בעזרת כל תוכנת עריכת תמונות (כגון: פוטושופ, gimp) או תוכנת ציור ועיצוב (כמו Canva וצייר ב-windows). בנוסף יש אתרים כלים אונליין כגון https://www.favicon.cc. ובמידה ואתם מחפשים כלים נוספים ליצירת פביקון או להמרת הקובץ לפורמט המתאים חפשו "favicon generator" בגוגל.

טיפים לעיצוב

מספר טיפים לעיצוב:

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

סיכום

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *