وثائق HTML قابلة للتشغيل: Favicon

Q: كيف أضيف favicon في HTML؟

ضع ملف الأيقونة في موقعك وأضف (أو مسار PNG أو SVG) داخل . عندها تعرضها المتصفحات في التبويب وفي المفضلة وفي قائمة السجل.

Q: ما المقاس المناسب لـ favicon؟

وفّر favicon.ico بمقاس 32×32 (أو PNG) للتبويبات، وملف 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 القديم ولا تفعل شيئًا في المتصفحات الحالية.

كيف تضيف 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 خاصًا بها، بما في ذلك استعلام الوسائط 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".
توقع ظهور التحديث فورًا. تخزّن المتصفحات favicon مؤقتًا بشدة. أعد التحميل مع مسح الذاكرة المؤقتة، أو غيّر العنوان (/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 بمقاس 32×32 (أو PNG) للتبويبات، وملف 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: عنوان SVG من نوع data URI يحتوي على عنصر <text> فيه الرمز التعبيري. هذا مفيد للنماذج الأولية، لكن الرمز يبدو مختلفًا في كل نظام تشغيل.

مفاهيم ذات صلة