كيفية إنشاء أيقونة مفضلة لموقعك على الويب: دليل ملف ICO
يقوم هذا الرمز الصغير الموجود في علامة تبويب المتصفح الخاص بك بعمل أكثر مما تعتقد. تظهر الرموز المفضلة في علامات التبويب، والإشارات المرجعية، وسجل المتصفح، والشاشات الرئيسية للجوال، واختصارات سطح المكتب. الرمز المفضل المفقود يجعل موقعك يبدو غير مكتمل. الميزة الجيدة تجعل من الممكن التعرف عليها على الفور من بين العشرات من علامات التبويب المفتوحة. يستغرق إنشاء واحدة حوالي خمس دقائق عندما تعرف الأحجام والتنسيقات المطلوبة.
ما هو الرمز المفضل؟
الرمز المفضل (اختصار لـ "الرمز المفضل") هو الرمز الصغير المرتبط بموقعك على الويب. تعرضها المتصفحات في شريط علامات التبويب بجوار عنوان صفحتك، وفي قائمة الإشارات المرجعية، وفي سجل المتصفح. تستخدمه الأجهزة المحمولة عندما يضيف المستخدمون موقعك إلى شاشتهم الرئيسية. قد تعرضه محركات البحث في النتائج. إنها واحدة من أصغر العناصر المرئية في موقعك، ولكنها واحدة من أكثر العناصر التي يتم مشاهدتها بشكل متكرر.
أحجام المفضلة المطلوبة
تعرض السياقات المختلفة أيقونة المفضلة الخاصة بك بأحجام مختلفة. لتغطية جميع حالات الاستخدام، تحتاج إلى عدة إصدارات:
16 × 16 بكسل - علامات تبويب المتصفح. هذا هو حجم الأيقونة المفضلة الكلاسيكية وأصغر إصدار تحتاجه. 32 × 32 بكسل - اختصارات شريط المهام، وعلامات تبويب المتصفح الأحدث على شاشات DPI العالية. 48 × 48 بكسل - اختصارات سطح مكتب Windows وأيقونات الموقع.
180x180 بكسل - أيقونة أبل تاتش. هذا هو ما يستخدمه نظام التشغيل iOS عندما يضيف شخص ما موقعك إلى شاشته الرئيسية. هذا هو حجم الهاتف المحمول الأكثر أهمية. 192 × 192 بكسل - أيقونة شاشة Android Chrome الرئيسية وأيقونة PWA (تطبيق الويب التقدمي). 512 × 512 بكسل - شاشات البداية PWA ومربع حوار تثبيت Android.
شرح تنسيقات المفضلة
تنسيق إيكو: تنسيق المفضلة الأصلي، والوحيد الذي يعمل في كل مكان - بما في ذلك المتصفحات القديمة جدًا وInternet Explorer. يمكن لملف ICO تجميع أحجام متعددة في ملف واحد (عادةً 16x16 و32x32 و48x48). لتحقيق أقصى قدر من التوافق، يجب أن يحتوي كل موقع ويب على ملف favicon.ico في الدليل الجذر. ال محول PNG إلى ICO على ifformat.io يجعل إنشاء واحد بسيط.
تنسيق PNG: البديل الحديث . تعد أيقونات PNG المفضلة أسهل في الإنشاء (صورة واحدة لكل ملف) وتدعم الشفافية الكاملة. تدعم جميع المتصفحات الحديثة أيقونات PNG المفضلة. الجانب السلبي هو أنك تحتاج إلى ملفات منفصلة لكل حجم، وقد لا تدعمها المتصفحات القديمة جدًا.
تنسيق SVG: الخيار الأحدث. نظرًا لأن SVG هو تنسيق متجه، يمكن تغيير حجم الملف الواحد بشكل مثالي إلى أي حجم - بدون بكسلات، ولا توجد ملفات متعددة. يتم دعم أيقونات SVG المفضلة بواسطة Chrome وFirefox وEdge، ولكن ليس بواسطة Safari (اعتبارًا من أوائل عام 2026). تدعم أيقونات SVG المفضلة أيضًا التكيف مع الوضع المظلم من خلال استعلامات وسائط CSS، وهو ما لا تستطيع PNG وICO القيام به.
الخطوة 1: تصميم الرمز الخاص بك
أهم قاعدة لتصميم الأيقونة المفضلة: اجعل الأمر بسيطًا. سيتم عرض الرمز الخاص بك بحجم صغير يصل إلى 16 × 16 بكسل - وهي عبارة عن شبكة مكونة من 256 مربعًا فقط. التفاصيل الدقيقة والخطوط الرفيعة والنص الصغير لن تكون قابلة للقراءة بهذا الحجم. أفضل الرموز المفضلة هي أشكال جريئة يمكن التعرف عليها وذات تباين عالٍ.
استخدم شعارك إذا كان يعمل بأحجام صغيرة. تستخدم العديد من الشركات الحرف الأول فقط من اسمها أو نسخة مبسطة من علامة الشعار الخاصة بها. تجنب الصور الفوتوغرافية - فهي تصبح نقاطًا لا يمكن التعرف عليها بحجم 16 × 16. تعمل الألوان الصلبة والأشكال الهندسية البسيطة بشكل أفضل. اختبر تصميمك من خلال مشاهدته بحجم 16 × 16 بكسل قبل الالتزام به.
الخطوة 2: إنشاء ملف ICO
ابدأ بصورة مربعة PNG بحجم 512 × 512 بكسل على الأقل. يمنحك المصدر الأكبر نتائج أنظف عند تصغيره. استخدم PNG لتحويل ICO لإنشاء ملف ICO الخاص بك. يقوم المحول بإنشاء ICO متعدد الأحجام يحتوي على إصدارات 16x16 و32x32 و48x48 - كل ذلك من صورة مصدر واحدة.
إذا كانت الصورة المصدر الخاصة بك عبارة عن تنسيق JPG (مثل شعار تم تصديره من أداة تصميم)، فاستخدم ملف محول JPG إلى ICO بدلاً من. بالنسبة للشعارات المتجهة بتنسيق SVG، فإن محول SVG إلى ICO ينتج أفضل النتائج لأنه يعرض المتجه عند كل حجم مستهدف.
الخطوة 3: أضف كود HTML
ضع ملف favicon.ico الخاص بك في الدليل الجذر لموقع الويب الخاص بك. ستجده معظم المتصفحات تلقائيًا على /favicon.ico حتى بدون علامة HTML. ولكن للتحكم الصريح ولدعم جميع التنسيقات، قم بإضافة هذه العلامات داخل HTML الخاص بك
<head> قسم:<link rel="icon" type="image/x-icon" href="/favicon.ico"> - أيقونة ICO الكلاسيكية المفضلة. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - أيقونة PNG المفضلة للمتصفحات الحديثة. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — أيقونة الشاشة الرئيسية لأجهزة Apple.الخطوة 4: إنشاء أيقونة Apple Touch وأيقونات Android
يتم عرض أيقونة Apple Touch (180 × 180 PNG) عندما يضيف مستخدمو iOS موقعك إلى شاشتهم الرئيسية. قم بإنشاء نسخة PNG بحجم 180 × 180 بكسل من الأيقونة الخاصة بك مع بعض الحشو حول الحواف - سيطبق نظام iOS زواياه الدائرية الخاصة. قم بتسميته apple-touch-icon.png وقم بالإشارة إليه في ملف HTML الخاص بك.
بالنسبة إلى تطبيقات Android وتطبيقات الويب التقدمية، تحتاج إلى أيقونات PNG بحجم 192 × 192 و512 × 512. تتم الإشارة إليها عادةً في ملف بيان تطبيق الويب (manifest.json أو site.webmanifest). يتيح لك ملف البيان أيضًا تعيين اسم تطبيقك ولون السمة ووضع العرض عندما يقوم المستخدمون بتثبيت موقعك كتطبيق.
الأخطاء الشائعة في استخدام الأيقونات المفضلة
استخدام الكثير من التفاصيل: يبدو الشعار المعقد ذو الخطوط الرفيعة والنص الصغير رائعًا عند 200 بكسل، لكنه يصبح لطخة غير قابلة للقراءة عند 16 بكسل. تبسيط بلا رحمة. نسيان الوضع المظلم: إذا كان الرمز المفضل لديك يستخدم لونًا داكنًا على خلفية شفافة، فسيكون غير مرئي في المتصفحات التي تحتوي على أشرطة علامات تبويب داكنة. فكر في إضافة حد فاتح أو استخدام أيقونات SVG المفضلة مع الوضع الداكن CSS.
لا يتم الاختبار بالحجم الفعلي: قم دائمًا بمعاينة الرمز المفضل لديك بحجم 16 × 16 في علامة تبويب المتصفح الفعلية. ما يبدو جيدًا في أداة التصميم الخاصة بك عند تكبير/تصغير بنسبة 400% قد لا يعمل بالحجم الحقيقي. تخطي ملف ICO: بينما تعمل أيقونات PNG المفضلة في المتصفحات الحديثة، فإن وجود favicon.ico في الدليل الجذر الخاص بك يضمن التوافق مع كل متصفح وزاحف، بما في ذلك الأنظمة القديمة.
اختبار الأيقونة المفضلة لديك
بعد تحميل ملفات الأيقونة المفضلة لديك وإضافة HTML، قم بإجراء الاختبار عبر متصفحات متعددة: Chrome وFirefox وSafari وEdge على الأقل. تأكد من ظهور الأيقونة بشكل صحيح في علامة التبويب، وفي الإشارات المرجعية (ضع إشارة مرجعية على صفحة وتحقق منها)، وعلى الهاتف المحمول (أضفها إلى الشاشة الرئيسية على كل من iOS وAndroid). يمكن أن تكون ذاكرة التخزين المؤقت للمتصفح عدوانية مع الرموز المفضلة - إذا كنت لا ترى الرمز الجديد الخاص بك، فحاول مسح ذاكرة التخزين المؤقت أو فتح نافذة التصفح المتخفي.
إذا كنت بحاجة إلى السير في الاتجاه الآخر - استخراج الرموز من ملف ICO موجود - فإن محول ICO إلى PNG يستخرج الصور المدمجة. يعد هذا مفيدًا عندما تحتاج إلى تحديث أيقونة مفضلة ولكن لديك ملف ICO فقط وليس العمل الفني المصدر الأصلي.
يستغرق إنشاء الرمز المفضل المناسب خمس دقائق ولكنه يمنح موقع الويب الخاص بك مظهرًا احترافيًا مصقولًا. ابدأ بتصميم بسيط وجريء، وقم بإنشاء ملف ICO الخاص بك باستخدام محول عبر الإنترنت، وأضف علامات HTML، واختبره عبر المتصفحات. سيبدو موقعك مكتملاً، وسيتمكن المستخدمون من العثور على علامة التبويب الخاصة بك من بين العشرات من علامات التبويب المفتوحة لديهم.