איך יוצרים סמל לאתר (Favicon)?

איך יוצרים סמל לאתר (Favicon)?

  • פרסומת

מהו Favicon?

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

לדוגמה:

מהו פבאייקון favicon

איך יוצרים Favicon?

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

נחלק את העבודה למספר שלבים:

שלב 1 – בחירת סמל לאתר:

קודם כל עלינו לבחור סמל שישמש אותנו בתור ה-Favicon.

ניקח לדוגמה את סמל האתר WebDesk.co.il:

לוגו האתר webdesk.co.il

משום שה-Favicon צריך להיות ריבוע, נשנה קצת את הסמל כדי שיוכל להתאים לצורה המתבקשת:

לוגו האתר בצורה מותאמת

שלב 2 – התאמת הסמל ל-Favicon

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

64X64 או 50X50 פיקסלים, ולשמור את הקובץ בשם favicon.ico (שהוא קובץ תמונה רגיל המתאים לסמל) ובזה סיימנו את הכנת הקובץ. אני ממליץ לשמור את הקובץ בצורת PNG שהוא קובץ תמונה אשר מסוגל לאחסן מידע לגביי שקיפות הפיקסלים (transperancy).

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

הערה: יש לשמור את הקובץ בתקייה הראשית של האתר, אשר לרוב ידועה בשם Root Folder.

שלב 3 – הקוד

כעת, מה שנותר לנו לעשות זה להוסיף את שורת הקוד הבאה בין תגיות ההד שלנו (head):

<head>
    <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
</head>

שלב 4 – רענון הדף

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

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