תיעוד HTML עם דוגמאות להרצה: Favicon

Q: איך מוסיפים favicon ב-HTML?

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

Q: באיזה גודל צריך להיות favicon?

ספקו favicon.ico (או PNG) בגודל 32×32 ללשוניות, SVG שמשתנה לכל גודל, ו-apple-touch-icon מסוג PNG בגודל 180×180 למסכי הבית של iPhone. אפליקציות רשת עם manifest מפרטות גם PNG בגדלים 192×192 ו-512×512.

Q: למה ה-favicon שלי לא מופיע?

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

Q: אפשר להשתמש ב-SVG או PNG כ-favicon?

כן. השתמשו ב- או . SVG עובד ב-Chrome, ב-Edge וב-Firefox; השאירו גם ICO או PNG לדפדפנים שלא תומכים בו.

Q: צריך rel="shortcut icon"?

לא. rel="icon" הוא הערך התקני. המילה shortcut היא שארית מ-Internet Explorer הישן ולא עושה כלום בדפדפנים הנוכחיים.

Q: אפשר להשתמש באימוג'י כ-favicon?

כן, אם עוטפים אותו ב-SVG: data URI של SVG שמכיל אלמנט עם האימוג'י. זה נוח לאבות טיפוס, אבל האימוג'י נראה שונה בכל מערכת הפעלה.

איך מוסיפים favicon

שמרו את האייקון שלכם באתר והפנו אליו מתגית <link rel="icon"> בתוך <head>:

<link rel="icon" href="/favicon.ico">

זו כל התשובה לאתר בסיסי. ה-href יכול להצביע על קובץ .ico, .png או .svg. הדוגמה שלמטה משתמשת ב-SVG שכתוב ישירות בתוך ה-href כ-data URI, כך שהיא לא צריכה קובץ נפרד. תצוגה מקדימה בתוך עמוד אחר לא יכולה לשנות את לשונית הדפדפן שלכם, ולכן הסקריפט מצייר את אותו אייקון בלשונית מדומה ובשלושה גדלים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

ב-16 פיקסלים יש מקום לאות מודגשת אחת או לצורה פשוטה, ופרטים עדינים נעלמים. עצבו את האייקון קודם כל לגודל הקטן ביותר. שנו את fill='%232563eb' לצבע אחר (%23 הוא # בקידוד URL) וכל העותקים יתעדכנו.

אילו קבצים לספק

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

<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">

קובץ	גודל	שימוש
`favicon.ico`	32×32	לשוניות דפדפן, וכלים שמחפשים רק `/favicon.ico`
`icon.svg`	כל גודל (וקטורי)	לשוניות חדות בכל צפיפות מסך, ב-Chrome, ב-Edge וב-Firefox
`apple-touch-icon.png`	180×180	האייקון כשמישהו מוסיף את האתר שלכם למסך הבית של iPhone או iPad
אייקונים ב-manifest	PNG בגדלים 192×192 ו-512×512	מסך הבית של Android ואפליקציות רשת מותקנות

רוב הדפדפנים גם מבקשים /favicon.ico משורש האתר מעצמם כשלעמוד אין קישור לאייקון, כך שקובץ favicon.ico שם הוא ברירת מחדל שימושית. המאפיין sizes אומר לדפדפן באיזה גודל כל קובץ, כדי שיוכל לבחור את ההתאמה הטובה ביותר. השתמשו ב-rel="icon"; ה-rel="shortcut icon" הישן עובד רק כי דפדפנים מתעלמים מהמילה הנוספת.

favicon מאימוג'י

לאב טיפוס או לעמוד אישי, אימוג'י הוא favicon מהיר. שימו אותו בתוך אלמנט <text> של SVG:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA הוא אימוג'י העוגייה בקידוד URL. האימוג'י מצויר על ידי גופן האימוג'י של מערכת ההפעלה, ולכן הוא נראה שונה ב-Windows, ב-macOS וב-Android, ולמוצר אמיתי אייקון מעוצב הוא בחירה טובה יותר.

אייקון שמתאים את עצמו למצב כהה

favicon מסוג SVG יכול לשאת CSS משלו, כולל media query של prefers-color-scheme, כך שאייקון כהה יכול להפוך לבהיר כשהדפדפן משתמש בערכת נושא כהה:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

שינוי ה-favicon עם JavaScript

אתרים משתמשים ב-favicon משתנה בשביל נקודת התראה או צבע סטטוס. ציירו את האייקון החדש על <canvas> והגדירו את ה-href של הקישור לתמונה של ה-canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

בעמוד אמיתי ב-Chrome או ב-Firefox, אייקון הלשונית משתנה בכל פעם ש-href מוגדר, באותו רגע שבו תמונת התצוגה המקדימה משתנה כאן.

טעויות נפוצות

נתיב שגוי. href="favicon.ico" יחסי לעמוד הנוכחי, ולכן הוא נשבר ב-/blog/post. השתמשו בנתיב מהשורש: href="/favicon.ico".
ציפייה שעדכון יופיע מיד. דפדפנים שומרים favicons במטמון בעקשנות. טענו מחדש עם ניקוי המטמון, או שנו את הכתובת (/favicon.ico?v=2) כשאתם מחליפים את האייקון.
לוגו מפורט שמוקטן ל-16 פיקסלים. פשטו אותו: אות אחת או צורה אחת עם ניגודיות חזקה.
רק SVG. השאירו גם ICO או PNG לדפדפנים בלי תמיכה ב-favicon מסוג SVG, והוסיפו את apple-touch-icon בשביל iOS.
שימת הקישור ב-<body>. השאירו אותו ב-<head> יחד עם תגית ה-title ושאר המטא דאטה.

שאלות נפוצות

איך מוסיפים favicon ב-HTML?

שימו את קובץ האייקון באתר שלכם והוסיפו <link rel="icon" href="/favicon.ico"> (או נתיב ל-PNG או SVG) בתוך <head>. דפדפנים יציגו אותו אז בלשונית, בסימניות וברשימת ההיסטוריה.

באיזה גודל צריך להיות favicon?

ספקו favicon.ico (או PNG) בגודל 32×32 ללשוניות, SVG שמשתנה לכל גודל, ו-apple-touch-icon מסוג PNG בגודל 180×180 למסכי הבית של iPhone. אפליקציות רשת עם manifest מפרטות גם PNG בגדלים 192×192 ו-512×512.

למה ה-favicon שלי לא מופיע?

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

אפשר להשתמש ב-SVG או PNG כ-favicon?

כן. השתמשו ב-<link rel="icon" href="/icon.svg" type="image/svg+xml"> או <link rel="icon" href="/icon.png" type="image/png">. SVG עובד ב-Chrome, ב-Edge וב-Firefox; השאירו גם ICO או PNG לדפדפנים שלא תומכים בו.

צריך rel="shortcut icon"?

לא. rel="icon" הוא הערך התקני. המילה shortcut היא שארית מ-Internet Explorer הישן ולא עושה כלום בדפדפנים הנוכחיים.

אפשר להשתמש באימוג'י כ-favicon?

כן, אם עוטפים אותו ב-SVG: data URI של SVG שמכיל אלמנט <text> עם האימוג'י. זה נוח לאבות טיפוס, אבל האימוג'י נראה שונה בכל מערכת הפעלה.

מושגים קשורים