Favicon Generator
متقدّم

تقنيات favicon المتقدمة

بعد وضع الملفات الأربعة الأساسية، هذه هي التفاصيل التي تفصل favicon "يعمل" عن آخر يبدو صحيحاً على كل سطح — أشرطة التبويبات الداكنة، ومشغّلات Android، والتبويبات المثبّتة في Safari، ونتائج بحث Google.

favicon يتكيّف مع الوضع الداكن

صيغة SVG وحدها هي التي يمكنها الاستجابة لسمة المتصفح. ضمّن <style> يحتوي استعلام prefers-color-scheme داخل ملف SVG نفسه — فيطبّقه المتصفح عند عرض الأيقونة. هذا يبقي الشعار الداكن ظاهراً على شريط تبويبات داكن:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="…your icon path…"/>
</svg>

أشِر إليه بـ <link rel="icon" href="/icon.svg" type="image/svg+xml">. واحتفظ بملف favicon.ico عادي إلى جانبه من أجل المتصفحات وGoogle Search، التي لن تشغّل استعلام الوسائط.

أيقونة التبويب المثبّت في Safari

عندما يثبّت أحدهم تبويبك في Safari على سطح المكتب، فإنه يستخدم ملف SVG منفصلاً مسطّحاً بلون واحد ("mask icon") — شكل خالص بلا تدرّجات:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">

تحدّد خاصية color لون التثبيت. صدّر نسخة أحادية اللون من علامتك لهذا الغرض؛ فأي شيء يحتوي تفاصيل دقيقة أو ألواناً متعددة سيظهر على شكل لطخة مصمتة.

الأيقونات القابلة للإخفاء (maskable) والمنطقة الآمنة

تقتصّ أيقونات Android التكيّفية صورتك ضمن دائرة أو مربّع دائري (squircle) أو مربّع بحواف مستديرة تبعاً للمشغّل. والأيقونة العادية تُقصّ زواياها. حدّد أيقونات الـ manifest على أنها maskable وأبقِ المحتوى المهم داخل "المنطقة الآمنة" المركزية — أي 80% الوسطى تقريباً، بهامش نحو 10% على كل جانب:

{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
  "type": "image/png", "purpose": "any maskable" }

صمّم بلون خلفية يملأ كامل المساحة والشعار مستقرّ بأريحية داخل ذلك الهامش، كي لا يقتطع منه أي شكل.

theme-color: الشريط المحيط بالأيقونة

ليس favicon نفسه، لكنه يقع بجانبه تماماً على الهاتف — إذ يلوّن theme-color واجهة المتصفح/شريط العنوان. ويمكنه أيضاً الاستجابة للسمة:

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

ما الذي يحتويه ملف .ico الحقيقي فعلاً

ملف .ico السليم هو حاوية تضم عدة صور نقطية في آنٍ واحد — عادةً 16 و32 و48 بكسل. يختار المتصفح الحجم الذي يحتاجه للسطح (التبويب مقابل شريط الإشارات المرجعية مقابل اختصار Windows)، فلا يضطر أبداً إلى تكبير صورة بحجم 16 بكسل أو تصغير صورة بحجم 512 بكسل. أما "favicon.ico" الذي هو في الحقيقة مجرد ملف PNG واحد أُعيدت تسميته فيفقد ذلك ويبدو باهتاً عند بعض الأحجام. وهذا المولّد يكتب ملف ICO حقيقياً متعدد الأحجام.

قواعد favicon في Google Search

كي تظهر أيقونتك بجوار نتيجتك، يشترط Google كل ما يلي: أن يوجد favicon على رابط ثابت؛ وأن يكون مربّعاً ومضاعفاً لـ 48×48 (48، 96، 144…)؛ وأن يكون على المضيف نفسه للموقع؛ وأن تكون الصفحة المستضيفة له قابلة للفهرسة؛ وأن تكون الأيقونة واضحة بصرياً. ويجلب Google الأيقونة ويخزّنها مؤقتاً عبر زاحفه الخاص، بمعزل عن الصفحة — لذا بعد أي تغيير، امنحه أياماً إلى أسابيع وتأكّد من أن /favicon.ico يُعيد 200 لـ Googlebot.

أبقِ الملفات صغيرة

  • SVG: احذف بيانات المحرّر الوصفية والتعليقات؛ فملف SVG نظيف للأيقونة غالباً ما يكون أقل من 1 KB.
  • ICO: 16/32/48 فقط — قاوم إضافة 64/128/256 التي تضخّم الملف دون فائدة.
  • PNG: أيقونة 512 هي الأثقل؛ مرّرها عبر أداة ضغط بلا فقدان.

اختبره حيث يظهر فعلاً

لا تثق بمتصفح واحد. تحقّق من: تبويب عادي (فاتح وداكن)، وإشارة مرجعية، و"إضافة إلى الشاشة الرئيسية" في iOS، وتثبيت على Android، ونتيجة Google بعد إعادة الزحف. من الطرق السريعة لفرض قراءة نظيفة أثناء الاختبار استخدام نافذة خاصة مع استعلام ?v= على روابط الأيقونات.

→ العودة إلى المولّد