ما هي أيقونة الموقع، وما الأيقونات التي يحتاجها الموقع؟
أيقونة الموقع (favicon) صورة صغيرة يعرضها المتصفح في علامات التبويب والمفضلة والسجل، ويُصرَّح بها عبر link rel="icon" في رأس الصفحة؛ وإن غابت طلبت المتصفحات /favicon.ico من جذر الموقع. وتحتاج مواضع أخرى أيقونات خاصة بها: فاختصارات الشاشة الرئيسية في iOS تقرأ apple-touch-icon (بمقاس 180×180)، وأندرويد والتطبيقات المثبّتة تقرأ أيقونتي 192 و512 بكسل من ملف manifest، ويعرض بحث Google أيقونة مربعة مصرَّحاً بها في الصفحة الرئيسية.
كيفية استخدام فاحص أيقونة الموقع (Favicon)
- أدخل عنوان الصفحة المراد فحصها — غالباً الصفحة الرئيسية، فمنها يقرأ بحث Google أيقونة الموقع.
- أبقِ خيار «اطلب ملفات الأيقونات» مفعّلاً للتحقق من أن كل ملف يجيب، أو ألغِه لقراءة الروابط في HTML فقط.
- اضغط «افحص الأيقونات» واقرأ جدول الأيقونات: كل أيقونة مصرَّح بها مع مقاساتها ونوعها المعلن ورمز حالتها ونوعها المقدَّم وحجمها.
- عالج الملاحظات من المشكلات إلى الملاحظات العامة، ثم أعد الفحص بعد نشر الإصلاحات.
مزايا فاحص أيقونة الموقع (Favicon)
- يقرأ كل رابط أيقونة تصرّح به الصفحة — rel="icon" و"shortcut icon" وapple-touch-icon (وصيغته القديمة -precomposed) ووسم mask-icon الخاص بـ Safari — مع المقاسات والنوع، إلى جانب رابط manifest ولون theme-color
- يطلب كل ملف أيقونة، ومعه /favicon.ico في جذر الموقع، بطلب HEAD من خادم متقن (أو GET مع تجاهل المحتوى إن رُفض HEAD)، حتى ثمانية عناوين
- يعرض رمز حالة كل ملف وContent-Type الذي يُقدَّم به فعلاً وحجمه، فيكشف صفحة الخطأ التي تجيب بالرمز 200 أو الأيقونة المقدَّمة بنوع text/html
- يشرح ما ينقص في كل موضع تظهر فيه الأيقونة: علامات التبويب والمفضلة، والشاشات عالية الكثافة، والشاشة الرئيسية في iOS، واختصارات أندرويد، والتطبيقات المثبّتة
- ينبّه إلى المقاسات المكتوبة بغير صيغة WIDTHxHEIGHT، والأيقونات غير المربعة، والمقاسات المكرّرة، والنوع المعلن الذي يخالف امتداد الملف أو النوع المقدَّم، والأيقونات المحمّلة عبر http في صفحة https
- لا ينزّل أي صورة ولا يعرضها: يعمل الفحص على الترويسات فقط، فلا يُعرض في متصفحك شيء من الموقع
المدخلات والمخرجات
المدخلات
- عنوان الصفحة — الصفحة العامة التي تريد فحص روابط أيقوناتها؛ ويُضاف https:// إلى اسم المضيف المجرد.
- اطلب ملفات الأيقونات — مفعّل افتراضياً؛ وعند إلغائه تُقرأ الروابط في HTML فقط ولا يُطلب أي ملف.
المخرجات
- الملخص — عدد الأيقونات المصرَّح بها، والملفات التي أجابت برمز 2xx، ووجود أيقونة Apple touch وأيقونة SVG، وأكبر مقاس مصرَّح به، ووجود رابط manifest.
- الأيقونات — نوع الرابط والمقاسات والنوع المعلن والعنوان ورمز حالة HTTP وContent-Type المقدَّم والحجم لكل أيقونة، ومعها /favicon.ico في جذر الموقع؛ ويمكن تنزيلها بصيغة CSV.
- الملاحظات — المشكلات والتحذيرات والملاحظات والتأكيدات، الأسوأ أولاً؛ ويمكن تنزيلها بصيغة CSV.
- الصفحة — العنوان النهائي للصفحة ورمز حالتها، ولون theme-color، وعنوان manifest، وهل صُرّح بوسم mask-icon الخاص بـ Safari.
مثال على فاحص أيقونة الموقع (Favicon)
أيقونة Apple تعيد 404 وملف favicon.ico هو صفحة HTML في الحقيقة
الإدخال:
عنوان الصفحة: https://www.example.com/ · اطلب ملفات الأيقونات: مفعّلالنتيجة:
Icons declared 2 · Files that answered 2 / 3 · Apple touch icon Yes · SVG icon No · Largest declared size 152×152 · Manifest Linked
icon 32x32 image/png → 200, image/png, 1210 bytes
apple-touch-icon 152x152 → 404, text/html
/favicon.ico at the site root → 200, text/html, 5120 bytes
Problem: The icon https://www.example.com/apple-touch-icon.png answers HTTP 404.
Warning: The largest apple-touch-icon declares 152×152 pixels; iOS uses 180×180.
Warning: The icon https://www.example.com/favicon.ico is served as text/html, not as an image.كيف تقرأ نتائج فاحص أيقونة الموقع (Favicon)
المشكلة تعني أن الأيقونة لن تظهر: الملف المصرَّح به يجيب برمز 4xx أو 5xx أو لا يمكن الوصول إليه، أو ليس في الصفحة رابط أيقونة ويفشل /favicon.ico أيضاً.
الملف المقدَّم بنوع text/html مع الرمز 200 هو غالباً صفحة خطأ أو هيكل التطبيق يجيب عن ملف غير موجود. ولا تستطيع المتصفحات استخدامه أيقونةً رغم أن رمز الحالة يبدو سليماً.
الملاحظات عن أيقونة SVG وapple-touch-icon وmanifest تصف مدى التغطية لا أخطاء: فالموقع الذي يملك أيقونة PNG جيدة بمقاس 32×32 يعمل في علامات تبويب الحاسوب، لكنه يبدو رديئاً على الهواتف والشاشات عالية الكثافة.
المقاسات هي ما تصرّح به الصفحة لا ما قيس من الصورة: لا ينزّل الفاحص الملفات أبداً، فلا يكتشف أيقونة مصرَّحاً بأنها 180x180 وهي في الحقيقة 64×64.
متى تستخدم فاحص أيقونة الموقع (Favicon)
- بعد تغيير الهوية البصرية، تأكد أن كل أيقونة مصرَّح بها وملف /favicon.ico يشيران إلى ملفات موجودة تُقدَّم كصور.
- اعرف لماذا لا تظهر الأيقونة في نتائج بحث Google أو في علامة تبويب المتصفح، بدءاً من رمز حالة كل ملف ونوعه.
- قبل إطلاق موقع أو تطبيق ويب تقدّمي، تحقق من وجود أيقونة مناسبة لكل من iOS وأندرويد والشاشات عالية الكثافة.
- راجع أثر تغيير نظام إدارة المحتوى أو القالب: كثيراً ما تختفي روابط الأيقونات أو تشير إلى مجلد قالب لم يعد موجوداً.
استكشاف الأخطاء وإصلاحها
- كل الأيقونات تجيب بالرمز 403: بعض شبكات CDN أو جدران الحماية ترفض طلبات HEAD أو العملاء الآليين للملفات الثابتة. قد تحصل المتصفحات على الملف رغم ذلك؛ راجع قواعد CDN إن كان الزوار الحقيقيون لا يرون الأيقونة أيضاً.
- روابط الأيقونات تشير إلى مسار يجيب بالصفحة الرئيسية: الـ href النسبي مثل "favicon.png" يُحل نسبةً إلى مجلد الصفحة الحالية. استخدم مساراً من الجذر مثل /favicon.png.
- ما زال المتصفح يعرض أيقونة قديمة بعد الإصلاح: تحتفظ المتصفحات بالأيقونات مؤقتاً لمدة طويلة. غيّر اسم الملف (أو أضف معامل إصدار) عند استبدال الأيقونة.
- رُفضت الصفحة نفسها برسالة «This address cannot be reached from the Mutqan server»: يُحل المضيف إلى عنوان خاص أو محجوز. لا تُفحص إلا المواقع العامة.
- تعذّر طلب ملفات الأيقونات وذكر التحذير حد الطلبات: لملفات الأيقونات رصيد خاص بها قدره 10 طلبات في الدقيقة دون تسجيل الدخول (30 بعد تسجيل الدخول)، بطلب واحد لكل عنوان، ففحص ثماني أيقونات يستهلك ثمانية من العشرة؛ أما الصفحة نفسها فتستهلك عملية واحدة من عمليات جلب الصفحات العشر المشتركة مع الأدوات الأخرى. انتظر دقيقة، أو ألغِ تحديد «اطلب ملفات الأيقونات» لقراءة الروابط وحدها.
الأسئلة الشائعة حول فاحص أيقونة الموقع (Favicon)
ما مقاسات الأيقونة التي يحتاجها الموقع؟
أيقونة SVG قابلة للتحجيم، أو أيقونات PNG بمقاس 32×32 على الأقل لعلامات التبويب في الشاشات عالية الكثافة، وأيقونة apple-touch-icon بمقاس 180×180 لأجهزة iOS وiPadOS، وأيقونتان بمقاسي 192×192 و512×512 في ملف manifest لأندرويد والتطبيقات المثبّتة. ويطلب بحث Google أيقونة مربعة لا تقل عن 8×8 بكسل، ويوصي بأكبر من 48×48.
هل ما زلت أحتاج إلى ملف /favicon.ico؟
لا تطلب المتصفحات /favicon.ico من جذر الموقع إلا إذا لم تصرّح الصفحة بأي رابط rel="icon"، لكن قارئات الخلاصات وأدوات أخرى ما زالت تبحث عنه. لذلك يطلبه الفاحص مع الأيقونات المصرَّح بها ويخبرك بوجوده من عدمه.
لماذا لا تظهر الأيقونة مع أن الملف موجود؟
من الأسباب الشائعة: ملف يُقدَّم بنوع HTML أو نص (غالباً صفحة خطأ تجيب بالرمز 200)، أو أيقونة على http:// مرتبطة من صفحة https://، أو مسار خاطئ نسبةً إلى الصفحة، أو أيقونة قديمة محفوظة في ذاكرة المتصفح المؤقتة. ويعرض جدول الأيقونات رمز الحالة وContent-Type الذي يجيب به كل ملف فعلاً.
لماذا لا يعرض الفاحص الأيقونات نفسها؟
تُفحص الملفات بطلبات HEAD من خادم متقن، وهي تعيد الترويسات فقط. ولا يُعرض في متصفحك أي شيء جُلب من الموقع، فلا تحمّل الصفحة صوراً بعيدة نيابة عنك.
كم فحصاً للأيقونات أستطيع إجراءه في الدقيقة؟
يقرأ كل فحص الصفحة مرة واحدة، وهذه عملية من عمليات جلب الصفحات العشر المسموح بها في الدقيقة دون تسجيل الدخول (30 بعد تسجيل الدخول)، وهي مشتركة مع الأدوات الأخرى، وكل إعادة توجيه تُتّبع تُحتسب عملية أخرى. ثم يطلب حتى ثمانية عناوين أيقونات، كلٌّ منها واحد من طلبات ملفات الأيقونات العشرة المسموح بها في الدقيقة (30 بعد تسجيل الدخول). لذلك قد يستهلك فحص صفحة كثيرة الأيقونات معظم رصيد الدقيقة، وإذا نفد الرصيد ظهرت نتيجة الصفحة مع تحذير بأن الملفات تعذّر طلبها.
ملاحظات تقنية
يعرّف معيار HTML نوع الرابط icon: يمكن للصفحة أن تسرد عدة أيقونات مع تلميحات المقاس والنوع، فيختار المتصفح أنسبها؛ وإن لم يُصرَّح بشيء طلبت المتصفحات /favicon.ico من جذر الأصل. ويعرّف توثيق Safari من Apple الرابط apple-touch-icon لاختصارات الشاشة الرئيسية، ويستخدم بحث Google أيقونة مربعة لا تقل عن 8×8 بكسل مصرَّحاً بها في الصفحة الرئيسية، ويوصي بأكبر من 48×48.
تُجلب الصفحة عبر POST /api/v1/internet/http/fetch (مع حلّ الاسم عبر DNS over HTTPS أولاً، ورفض العناوين الخاصة، واتباع حتى خمس عمليات إعادة توجيه) وتُحلَّل كنص في المتصفح. وتُرسَل عناوين الأيقونات إلى POST /api/v1/internet/http/assets، الذي يرسل HEAD (أو GET إن أجاب الخادم بالرمز 405 أو 501، مع إلغاء المحتوى دون قراءته) ويعيد رمز الحالة وContent-Type وContent-Length لكل منها؛ أما إعادة توجيه الأيقونة فيُبلَّغ عنها ولا تُتبع.
تُقرأ المقاسات بصيغة WIDTHxHEIGHT أو "any" كما يسمح معيار HTML، ويُقارن النوع المعلن بامتداد الملف وبنوع الوسائط المقدَّم، مع عدّ image/x-icon وimage/vnd.microsoft.icon صيغة ICO واحدة.
الحدود ومنهجية القياس
لا يُفحص من ملفات الأيقونات إلا ردّها على HEAD؛ فالصور لا تُنزَّل أبداً، ولا يُتحقق من مقاسها الحقيقي بالبكسل ولا من شفافيتها ولا من جودتها.
لا يُطلب أكثر من ثمانية عناوين أيقونات في الفحص الواحد، مع أن جدول الأيقونات يسرد كل أيقونة مصرَّح بها.
تُطلب الصفحة وأيقوناتها مرة واحدة من خادم متقن على شبكة Cloudflare؛ والموقع الذي يقدّم HTML مختلفاً بحسب الجهاز أو البلد قد يصرّح بأيقونات أخرى لبعض الزوار.
الأمان والخصوصية
يتسلّم خادم متقن عنوان الصفحة وما يصل إلى ثمانية عناوين أيقونات مأخوذة منها، ويطلبها بترويسات ثابتة دون أي من ملفات تعريف الارتباط الخاصة بك، ولا يخزّن شيئاً. ولا تُنزَّل أي أيقونة إلى متصفحك ولا تُعرض فيه.
المراجع
- HTML attribute: rel — MDNأنواع الروابط في السمة rel، ومنها icon (يمكن سرد عدة أيقونات، فيختار المتصفح أنسبها بحسب media وtype وsizes) وmanifest.
- Define Website Favicon for Search Resultsقواعد بحث Google لأيقونة الموقع: رابط rel="icon" في الصفحة الرئيسية، وصورة مربعة لا تقل عن 8×8 بكسل (ويوصى بأكبر من 48×48)، وعنوان ثابت يستطيع Googlebot-Image الزحف إليه، وصيغ الملفات المدعومة.
- Configuring Web Applications (Safari Web Content Guide)دليل Apple لأيقونات الشاشة الرئيسية في iOS: الرابط rel="apple-touch-icon" مع سمة sizes لكل دقة جهاز، أو ملف apple-touch-icon.png في جذر الموقع للموقع كله.