אילו גדלי פאביקון צריך ב-2026? הסט האידיאלי

ב-2026 הסט האידיאלי של פאביקון הוא: קובץ favicon.ico שמכיל תמונות של 16, 32 ו-48 פיקסלים, קובץ PNG בגודל 96x96 (עבור חיפוש Google), פאביקון SVG אופציונלי, קובץ apple-touch-icon.png בגודל 180x180, וקובצי PNG בגודל 192x192 ו-512x512 (בתוספת גרסת maskable בגודל 512) שמוצהרים ב-web app manifest. אריחי Windows וגדלי Apple ישנים נחוצים רק אם אתם חייבים לתמוך במכשירים ישנים מאוד. בהמשך מוסבר הכול: למה, יחד עם טבלת גדלים, קוד HTML מוכן לשימוש וטעויות נפוצות שכדאי להימנע מהן.

בעבר עולם הפאביקון היה מבולגן: כל דפדפן וכל מערכת הפעלה ביקשו גודל משלהם, וכך נוצרו בלוקי <head> המפורסמים בני 20 השורות. כיום רוב זה כבר מיושן. דפדפנים מודרניים משנים קנה מידה של אייקון טוב אחד, iOS רוצה גודל אחד, ואנדרואיד קוראת את ה-manifest. המאמר הזה מפריד בין מה שבאמת נחוץ לבין מה שרק נחמד שיהיה.

התשובה הקצרה: הסט האידיאלי של קבצי פאביקון

• favicon.ico (16, 32, 48 פיקסלים בקובץ אחד) בשורש האתר. דפדפנים, קוראי פידים וכלים רבים עדיין מבקשים את /favicon.ico באופן אוטומטי.
• favicon.svg (אופציונלי אך מומלץ) לרינדור חד בכל גודל ולתמיכה במצב כהה.
• PNG בגדלים 16x16, 32x32 ו-96x96 כגיבוי מפורש. גרסת 96 הפיקסלים עוזרת לחיפוש Google, שדורש כפולה של 48 פיקסלים.
• apple-touch-icon.png בגודל 180x180, אטום, ללא שקיפות.
• PNG בגדלים 192x192 ו-512x512 בתוך manifest.json, בתוספת אייקון maskable בגודל 512x512 לאנדרואיד.
• תגית meta בשם theme-color לצביעת ממשק הדפדפן בנייד.
• אריחי Windows (70, 150, 310 פיקסלים) עם browserconfig.xml, רק עבור Windows ישן ואתרים מוצמדים ב-IE11.

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

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

favicon.ico: 16, 32 ו-48 פיקסלים בקובץ אחד

קובץ ICO הוא מכל שמחזיק כמה מפות סיביות. קובץ favicon.ico טוב כולל תמונות של 16x16, 32x32 ו-48x48, כך שהדפדפן או מערכת ההפעלה יכולים לבחור את ההתאמה הקרובה ביותר. מקמו אותו בשורש הדומיין (https://example.com/favicon.ico). גם אם ה-HTML שלכם מפנה למקום אחר, סורקים רבים, קוראי RSS ודפדפנים ישנים עדיין מבקשים בדיוק את הכתובת הזו, ולכן קיומו של הקובץ חוסך רעש של שגיאות 404 ביומנים שלכם.

אל תשנו סתם את סיומת קובץ ה-PNG ל-.ico. רוב הדפדפנים יסבלו זאת, אבל כלים מסוימים ידחו אותו ותפסידו את היתרון של רזולוציות מרובות. ייצאו קובץ ICO אמיתי.

פאביקון PNG: 16, 32 ו-96 פיקסלים

קישורי PNG עם sizes מפורש מאפשרים לדפדפן לבחור את מפת הסיביות הטובה ביותר בלי לנתח את ה-ICO. בפועל 32x32 מכסה לשוניות high-DPI, ו-16x16 כמעט מיותר כיום. כדאי להוסיף את הגודל 96x96 כי Google Search מציג פאביקונים לצד התוצאות ודורש אייקון מרובע שגודלו כפולה של 48 פיקסלים (48x48, 96x96, 144x144 וכן הלאה). קובץ של 96 פיקסלים נותן ל-Google מקור חד יותר מקובץ של 48 פיקסלים כשהוא מכווץ לתוצאות בנייד.

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

פאביקון SVG ומצב כהה

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

היתרון הגדול ביותר הוא עיצוב לפי ערכת נושא. מכיוון ש-SVG יכול להכיל CSS, אפשר להתאים את האייקון לערכת הצבעים של המשתמש באמצעות prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

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

תקלה ידועה אחת: כשגם ICO וגם SVG רשומים, Chrome עשוי לבחור את ה-ICO. הצהרה על ה-ICO עם sizes="32x32" ורישום ה-SVG אחריו גורמים ל-Chrome להעדיף את ה-SVG, כפי שמוצג בקוד שלהלן.

אייקון Apple touch: 180x180 והגדלים הישנים

כשמשתמש מוסיף את האתר שלכם למסך הבית של iOS או iPadOS, Safari משתמש ב-apple-touch-icon. כיום מספיק קובץ PNG יחיד בגודל 180x180 פיקסלים: iOS מכווץ אותו למכשירים ישנים יותר ול-iPad. קראו לו apple-touch-icon.png ושימו אותו בשורש; iOS אפילו מחפש את הקובץ הזה כברירת מחדל אם אין תגית link.

כללים לאייקון של Apple:

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

מתי צריך את הגדלים הישנים (57, 72, 76, 114, 120, 144, 152, 167)? רק אם אתם תומכים ב-iOS 6 ומטה, או רוצים שליטה מדויקת בפיקסלים לכל מכשיר עבור iPad Pro (167 פיקסלים) ו-iPad (152 פיקסלים). כמעט בכל אתר ב-2026 קובץ 180x180 לבדו מספיק. ההגדרה לתאימות מרבית שלהלן כוללת כמה מהם לשם השלמות.

אייקוני אנדרואיד ו-PWA: 192, 512 ו-maskable

Chrome באנדרואיד ודפדפנים אחרים התומכים ב-PWA קוראים אייקונים מתוך ה-web app manifest, ולא מתוך <link rel="icon">. כדי שהאפליקציה תהיה ניתנת להתקנה דרושים לפחות קובץ PNG בגודל 192x192 וקובץ בגודל 512x512. אייקון 192 הפיקסלים משמש במסך הבית ובמשגר האפליקציות; אייקון 512 הפיקסלים מופיע במסכי פתיחה ובחלונות התקנה.

אייקוני maskable ואזור הבטיחות

אייקונים אדפטיביים באנדרואיד יכולים להיחתך לעיגול, squircle או צורה אחרת, בהתאם למכשיר. אייקון maskable מתוכנן להיחתך בבטחה: התוכן החשוב חייב להיות בתוך אזור הבטיחות, עיגול ממורכז בקוטר של 80% מהתמונה (הרדיוס שווה ל-40% מהצלע). בקובץ של 512x512 משמעות הדבר היא להשאיר את הלוגו בתוך עיגול בקוטר של כ-410 פיקסלים, ולהרחיב את צבע הרקע לכל ארבעת הקצוות כדי שלא יופיעו רווחים לאחר המיסוך.

הצהירו על אייקון ה-maskable כרשומה נפרדת עם "purpose": "maskable". הימנעו מ-"any maskable" על קובץ אחד: הריפוד הדרוש למיסוך נראה קטן מדי כשהאייקון מוצג ללא מסכה.

דוגמה ל-manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

הגישו את הקובץ כ-application/manifest+json (או application/json) וקשרו אותו מכל עמוד באמצעות <link rel="manifest" href="/manifest.json">. בחלק מהפרויקטים קוראים לו site.webmanifest; השם לא משנה, הקישור כן.

אריחי Windows ו-browserconfig.xml

Windows 8.1 ו-10 מאפשרים למשתמשים להצמיד אתר לתפריט התחל, ו-IE11 ו-Edge הישן קוראים תמונות אריחים מתוך browserconfig.xml. הגדלים הרגילים הם 70x70 (קטן), 150x150 (בינוני), 310x150 (רחב) ו-310x310 (גדול). Edge מבוסס Chromium משתמש במקום זאת ב-manifest ובפאביקונים רגילים, ולכן זהו מנגנון ישן. כללו אותו רק אם הקהל שלכם עדיין כולל מערכות Windows ישנות, למשל בסביבות ארגוניות.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: צביעת ממשק הדפדפן

תגית ה-meta בשם theme-color מורה לדפדפני נייד (ולחלק מדפדפני שולחן העבודה) באיזה צבע להשתמש בשורת הכתובת או בשורת הכותרת. היא אינה פאביקון, אבל היא שייכת לאותה חבילת מיתוג. אפשר לספק ערכים נפרדים למצב בהיר ולמצב כהה:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

הגדרה מודרנית מינימלית לעומת תאימות מרבית

הגדרה מודרנית מינימלית (מומלצת לרוב האתרים)

חמישה קבצים מכסים יותר מ-99% מהשימושים בעולם האמיתי: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), ושני אייקוני ה-manifest (192 ו-512). הוסיפו את ה-PNG בגודל 96x96 אם הנראות בחיפוש Google חשובה לכם, ואייקון maskable אם אתם משיקים PWA.

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

הגדרה לתאימות מרבית

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

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

טעויות נפוצות בפאביקון וכיצד לתקן אותן

1. נתיבים שגויים

קישור כמו href="favicon.ico" נפתר ביחס לכתובת הנוכחית, ולכן הוא עובד ב-/ אך נשבר ב-/blog/post/. השתמשו בנתיבים יחסיים לשורש (/favicon.ico) או בכתובות מוחלטות. בדקו גם שהקבצים אכן קיימים: פתחו כל כתובת ישירות בדפדפן וודאו שהיא מחזירה HTTP 200, ולא הפניה לעמוד 404 או לדף התחברות.

2. מאפיין sizes חסר או שגוי

בלי sizes, הדפדפנים נאלצים להוריד אייקונים כדי לבדוק אותם, ועלולים לבחור את הלא נכון. הצהירו תמיד על sizes בקישורי PNG וודאו שהוא תואם למידות הפיקסלים האמיתיות. קובץ שמסומן 32x32 ובפועל הוא 64x64 גורם לתוצאות לא עקביות.

3. שמירה אגרסיבית במטמון

דפדפנים שומרים פאביקונים במטמון לזמן רב, לעיתים בנפרד ממטמון העמוד. לאחר שינוי מיתוג האייקון הישן עשוי להישאר ימים. שנו את שם הקובץ או הוסיפו מחרוזת שאילתה עם גרסה (/favicon.ico?v=2) ועדכנו את תגיות ה-link. טעינה מחדש מלאה לרוב אינה מרעננת את אייקון הלשונית; פתיחת כתובת האייקון ישירות וטעינתה מחדש בדרך כלל כן.

4. תמונות לא מרובעות

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

5. אייקוני Apple touch שקופים שהופכים לשחורים

iOS ממלא שקיפות בשחור. תנו לאייקון 180x180 רקע אטום ואל תעגלו מראש את הפינות.

6. אייקוני maskable ללא אזור בטיחות

אם הלוגו נוגע בקצוות של אייקון maskable, אנדרואיד תחתוך אותו. השאירו אותו בתוך עיגול ה-80% המרכזי ומלאו את כל הקנבס בצבע הרקע.

7. חסימת אייקונים מפני סורקים

אם robots.txt אוסר על נתיב הפאביקון שלכם, Google לא יכול לאחזר אותו ויציג אייקון גלובוס כללי בתוצאות החיפוש. זכרו גם ש-Google צריך את הפאביקון באותו host של העמוד ומרענן אותו רק מדי פעם, ולכן שינויים עשויים להופיע רק אחרי ימים או שבועות.

8. שכחת קישור ה-manifest או ה-purpose

manifest שאינו מקושר, או שחסרים בו אייקונים של 192 ו-512 פיקסלים, מונע את חלון ההתקנה ב-Chrome. אמתו אותו בכלי המפתחים של הדפדפן שלכם, בלשונית Application.

יצירת הסט כולו בלחיצה אחת

יצירת תריסר קבצים ידנית בעורך תמונות, המרה ל-ICO וכתיבת ה-manifest הן עבודה מייגעת ונוטה לטעויות. MakeFav מייצר את כל הקבצים שלעיל מתמונה, טקסט או אימוג'י אחד: favicon.ico רב-גדלים, קובצי PNG, SVG, אייקון Apple touch, קובצי PNG בגודל 192/512, אייקון maskable, אריחי Windows, manifest.json ו-browserconfig.xml, וכן קטע HTML מוכן להדבקה, הכול בהורדת ZIP אחת. אפשר לכוונן רקע, ריפוד וצורה בעורך, לבדוק אתר קיים באמצעות בודק הפאביקון, ולאוטמט את היצירה דרך משאבי המפתחים.

רשימת בדיקה לפריסה

1. העלו את כל הקבצים לשורש האתר.
2. הדביקו את קטע ה-HTML ב-<head> של כל עמוד (או בתבנית המשותפת שלכם).
3. ודאו שהנתיבים יחסיים לשורש ומחזירים HTTP 200.
4. בדקו מצב בהיר וכהה, התקנה במסך הבית של iOS והתקנה באנדרואיד.
5. הריצו את הבודק כדי לאתר גדלים חסרים או לא תואמים.
6. נקו מטמונים באמצעות מחרוזת גרסה אם החלפתם אייקון ישן.

שאלות נפוצות

האם עדיין צריך favicon.ico ב-2026?

כן. אף שדפדפנים מודרניים מקבלים PNG ו-SVG, סורקים רבים, קוראי פידים, לקוחות דוא"ל ודפדפנים ישנים עדיין מבקשים את /favicon.ico ישירות. קובץ ICO רב-גדלים עם תמונות של 16, 32 ו-48 פיקסלים הוא קובץ קטן שמונע אייקונים חסרים ושגיאות 404.

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

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

האם 180x180 מספיק לאייקון Apple touch?

כמעט בכל האתרים, כן. iOS ו-iPadOS מכווצים קובץ PNG בגודל 180x180 לכל מכשיר עדכני. הגדלים הישנים יותר (57 עד 152 פיקסלים) חשובים רק לגרסאות iOS ישנות מאוד. זכרו להשתמש ברקע אטום כדי שהאייקון לא יהפוך לשחור.

מהו אייקון maskable והאם אני צריך אחד?

אייקון maskable הוא קובץ PNG בגודל 512x512 שמתוכנן לצורות האייקון האדפטיביות של אנדרואיד. התוכן החשוב שלו נמצא בתוך עיגול בקוטר 80% במרכז, והרקע ממלא את כל הריבוע. אתם צריכים אותו רק אם אתם מציעים PWA הניתן להתקנה, אך הוא גורם לאייקון להיראות מקורי במקום לשבת בתוך עיגול לבן.

למה הפאביקון הישן שלי עדיין מוצג אחרי ששיניתי אותו?

דפדפנים שומרים פאביקונים במטמון בנפרד ולזמן ארוך. שנו את שם הקובץ או הוסיפו מחרוזת שאילתה עם גרסה, כמו ?v=2, עדכנו את תגיות ה-link, ואז פתחו את כתובת האייקון ישירות וטענו אותה מחדש. מנועי חיפוש עשויים להזדקק ליותר זמן כדי לרענן את העותק שלהם.