Favicon (Site Icon) הוא האייקון הקטן שמופיע בלשונית הדפדפן, ב-bookmarks, ובהיסטוריה. ברירת המחדל הריקה - גרגר אפור או סמל גנרי - גורמת לאתר להיראות לא מקצועי, וב-bookmarks קשה למצוא אותו בין עשרות אתרים אחרים.
למה זה משנה
Favicon הוא אחד מהאלמנטים הראשונים שמשתמשים שמים לב אליהם. ברגע שהדף נטען, הלשונית מציגה את ה-favicon - שניות לפני שהתוכן עצמו נטען. אם אין favicon, האתר נראה זמני, לא גמור, או חשוד. במחקר UX מ-Nielsen Norman Group, 75% מהמשתמשים מסתמכים על ה-favicon כדי לזהות את הלשונית הנכונה כשיש 10+ לשוניות פתוחות.
בנוסף, favicon משפיע על תוצאות החיפוש בנייד. מאז 2019, גוגל מציג את ה-favicon ליד תוצאת החיפוש בנייד - הופך לחלק מההזדהות הויזואלית של המותג. אתר עם favicon מובחן מקבל יותר קליקים מאתר ללא.
השפעה ב-PWA (Progressive Web Apps): favicon משמש גם כאייקון של ה-app אם משתמש מוסיף את האתר ל-home screen בנייד. בלי favicon מתאים, האייקון יהיה צילום מסך גנרי - חוויה לא מקצועית.
בנוסף, ב-Slack, Discord, ובכל פלטפורמת צ'אט, כשמדביקים URL מתקבל preview עם favicon. ה-favicon הופך לחלק מאופן ההצגה של הקישור.
איך לזהות
פתח את האתר בדפדפן ובדוק את הלשונית. אם רואים את האייקון של הדפדפן (כדור אפור או סמל ברירת מחדל), אין favicon. אם רואים אייקון מותאם, יש.
בדיקה משלימה: View Source וחיפוש rel="icon" או rel="shortcut icon". אמורים להופיע תגים כמו:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">בדיקה שלישית: גלוש ישירות ל-https://YOUR-SITE/favicon.ico. אמור להציג את האייקון. אם 404, אין קובץ.
איך לתקן
הדרך הפשוטה ביותר ב-WordPress: דרך Customize.
- הכן תמונה ריבועית של 512x512px עם הלוגו או סמל המותג. השתמש ב-PNG עם רקע שקוף או צבע מותג.
- גש ל-Appearance > Customize > Site Identity (או Customize > Site Identity במנגנונים חדשים).
- תחת "Site Icon" לחץ Select Site Icon, העלה את התמונה הריבועית, וחתוך אם צריך.
- שמור ופרסם.
WordPress יוצר אוטומטית את כל הגרסאות הנדרשות (32x32, 192x192, 512x512, apple-touch-icon) ומציג אותן בתגים מתאימים ב-<head>.
אם משתמש בתבנית block / FSE (וורדפרס 6.0+), הגישה דרך Appearance > Editor > Templates > Header אבל ה-Site Icon נשאר ב-Customize.
לבעלי שליטה גבוהה על הקובץ - העלאת קובץ favicon.ico ידנית לשורש האתר דרך FTP. גודל: 32x32px או 16x16px. השתמש בכלי כמו https://realfavicongenerator.net/ - הוא יוצר את כל הגרסאות הנדרשות (Android, iOS, Windows, macOS) בקלות.
טעויות נפוצות
הטעות הראשונה: שימוש בתמונה לא ריבועית. WordPress דורש 512x512px ריבועי - אם תעלה תמונה מלבנית, החיתוך יחתוך חלקים. הכן תמונה ריבועית מראש.
הטעות השנייה: לוגו עם פרטים מורכבים. ב-favicon של 16x16px לא רואים פרטים. עיצוב פשוט (אות בודדת, איקון מינימליסטי) עובד טוב יותר מלוגו מפורט.
הטעות השלישית: שימוש ברקע שקוף בתבנית עם רקע כהה. אם הלוגו שחור על שקוף, ובלשונית הדפדפן יש רקע כהה (Chrome dark mode), הלוגו לא נראה. השתמש ברקע צבעוני.
הטעות הרביעית: שכחת iOS. אם המשתמש מוסיף את האתר ל-home screen באייפון, אייקון מ-favicon.ico נראה לא חד. הוסף <link rel="apple-touch-icon"> עם תמונה 180x180px.
הטעות החמישית: שינוי favicon אבל לא רענון cache. אחרי החלפה, הדפדפנים מחזיקים את הגרסה הישנה ב-cache לימים. הוסף ?v=2 ל-URL ב-<link rel="icon"> כדי לכפות רענון.
בדיקה לאחר תיקון
פתח את האתר בלשונית חדשה במצב incognito (כדי לעקוף cache) - אמור לראות את ה-favicon החדש. בדוק ב-Chrome, Safari, ו-Firefox. הוסף את האתר ל-bookmarks ובדוק שהאייקון מופיע. בנייד, הוסף ל-home screen ובדוק שהאייקון נראה חד וברור. השתמש ב-https://realfavicongenerator.net/favicon_checker כדי לוודא שכל הגרסאות הנדרשות קיימות.