كيف تصنع أيقونة موقع (favicon) لا تبدو ضبابية على شاشات Retina

كان ملف favicon.ico صغير واحد يكفي الويب كله. لكنه لم يعد يكفي منذ سنوات، واعتباره كافيًا هو سبب ظهور كثير من الأيقونات ضبابية.

بقلم PulsarKit · نُشر في 8 سبتمبر 2026 · حُدّث في 16 أكتوبر 2026

أيقونة صغيرة واحدة لم تكن لتناسب كل الشاشات

علامة التبويب في المتصفح، واختصار الشاشة الرئيسية على الهاتف، وأيقونة التطبيق على شاشة كمبيوتر محمول عالية الكثافة: لكل منها مقاس مختلف بالبكسل. والأيقونة الصغيرة الواحدة التي تُمطّ لتناسبها جميعًا تبدو حادة في موضع واحد منها وباهتة في كل ما عداه. وملف favicon.ico التقليدي، الذي ما زالت المتصفحات تطلبه من جذر الموقع، ما زال جزءًا من الحل. لكنه صُمم لويب كانت دقة شاشاته أقل بكثير مما هي عليه اليوم، ولم يكن مقصودًا قط أن يكون الملف الوحيد.

لماذا تضم مجموعة الأيقونات الكاملة هذا العدد من الملفات المنفصلة

المجموعة السليمة، كالتي يُنتجها مولّد Favicon من صورة مصدر واحدة، تخدم عدة أغراض في وقت واحد، لا عدة مقاسات للغرض نفسه فحسب. ففيها صورتا PNG بمقاسي 16 و32 بكسل لعلامات التبويب بكثافة البكسل العادية والعالية، وأيقونة بمقاس 180 بكسل لحين يضيف أحدهم الموقع إلى الشاشة الرئيسية في iPhone، وأيقونتان بمقاسي 192 و512 بكسل يجب أن يشير إليهما ملف manifest لتطبيق الويب التقدمي قبل أن يمكن تثبيت التطبيق أصلًا. كل مقاس موجود لأن شيئًا ما يطلب هذا المقاس بعينه. فالأمر ليس تكرارًا لذاته. وإذا أسقطت أحدها، يلجأ الموضع الذي يحتاجه إلى بديل أكثر ضبابية، أو لا يعرض شيئًا على الإطلاق.

الملف الوحيد الذي لا يبقى شفافًا عن قصد

لا يضع نظام iOS أيقونة الشاشة الرئيسية الشفافة فوق خلفية معقولة حين يضيف أحدهم موقعًا إلى هاتفه. بل يملأ كل مساحة شفافة بالأسود الخالص، فيتحول شعار أنيق على خلفية شفافة إلى مربع داكن قبيح لحظة وصوله إلى الشاشة الرئيسية. لذلك تحتاج الأيقونة المخصصة لذلك الموضع إلى دمج شفافيتها مسبقًا، وعن قصد، فوق لون خلفية حقيقي، بدل أن تُترك شفافة كبقية المقاسات في المجموعة. أما كل أيقونة أخرى فيمكنها أن تحتفظ بالشفافية حيثما وُجدت في الصورة المصدر، لأن علامة التبويب في المتصفح واختصار سطح المكتب يعرضانها بشكل صحيح.

لماذا يُنتج المصدر المتجه أيقونة أوضح بمقاس 16 بكسل

الشعار المصنوع بصيغة SVG (ويمكن تحويل شعار نقطي مسطح إلى هذه الصيغة بأداة تحويل PNG إلى SVG) يُرسم من جديد بكل مقاس مطلوب انطلاقًا من أشكاله المتجهة، بدل أن يُولَّد مرة واحدة بمقاس كبير ثم يُصغَّر مرارًا لكل نسخة أصغر. ويظهر الفرق أوضح ما يكون في أصغر مقاس في المجموعة. فالشعار المُصغَّر من صورة نقطية رئيسية كبيرة واحدة يميل إلى أن يصير كتلة مبهمة عند 16 بكسل، وتختفي خطوطه الرفيعة وتفاصيله الدقيقة. أما النسخة المرسومة من المسارات المتجهة بهذا المقاس الصغير نفسه فتحتفظ بخطوط حادة، لأنها لم تكن قط صورة أكبر جرى تصغيرها. لقد رُسمت بهذا المقاس من البداية، ولهذا السبب أيضًا تمر الأيقونة المفردة التي تُصنع يدويًا عبر أداة تحويل SVG إلى PNG بأبعاد دقيقة بالبكسل، لا عبر أداة لتغيير حجم الصور. وفي شعار فيه اسم مكتوب بخط رفيع أو حدّ خارجي دقيق، هذا هو الفرق بين أيقونة تتعرف عليها في شريط علامات التبويب ولطخة رمادية.

الأيقونة القابلة للقص (maskable) موجودة لأن Android لا يراعي شكل الأيقونة

يقص Android أيقونة التطبيق المثبّت إلى الشكل الذي اختاره الجهاز أو المشغّل (launcher)، أيًّا كان: دائرة، أو مربع بزوايا مستديرة، أو شكل بين المربع والدائرة (squircle). ويفعل ذلك مهما كان الشكل الذي رُسمت به الأيقونة، فقد تفقد الأيقونة المربعة العادية محتوى مهمًا عند حوافها، والأمر يتوقف فقط على الشكل الذي صادف أن طُبق عليها. والأيقونة القابلة للقص تتجنب هذه المشكلة بإبقاء كل محتواها المهم ضمن نحو ثمانين بالمئة من وسط الصورة. وهذا يترك هامشًا آمنًا حول كل الحواف، يمكن لأي شكل أن يقصه دون أن يضيع شيء مهم في التصميم.

أخطاء شائعة: مصدر صغير، ومجموعة لا تُربط بالصفحات أبدًا

نادرًا ما تبدأ ضبابية مجموعة الأيقونات في المولّد. فكل مقاس يُبنى من نسخة رئيسية بمقاس 512 بكسل، لذا يُمطّ أي مصدر أصغر ليبلغها، والمصدر الذي يقل عن نحو 260 بكسل يجب تكبيره إلى ضعف حجمه أو أكثر، فتخرج المقاسات الكبيرة باهتة. ابدأ من 512 × 512 على الأقل، أو الأفضل من ملف SVG؛ أما المصدر الذي يقل عن 32 بكسل فيُرفض مباشرة. والقرار الثاني هو كيف يصبح الشعار غير المربع مربعًا: القص من المنتصف يُبقي الرمز كبيرًا لكنه قد يقطع اسمًا مكتوبًا عريضًا، أما احتواء الصورة كاملة وملء الجانبين بلون فيُبقي كل شيء ظاهرًا على حساب رمز أصغر. وفي شعار عرضه أكبر بكثير من ارتفاعه، تكون نسخة مربعة من الرمز وحده عادةً مصدرًا أفضل من الشعار الكامل مع الاسم. والخطأ الثالث يقع بعد التوليد. فالملفات الثمانية، أو التسعة مع الأيقونة القابلة للقص، توضع في جذر الموقع، والوسوم الموجودة في head-snippet.html توضع في قسم head من كل صفحة؛ وإذا كانت الملفات في مجلد فرعي، فعدّل قيم href في هذا المقتطف لتطابقه، وإلا أشارت الوسوم إلى ملفات غير موجودة. وأخيرًا، افحص أيقونة 16 بكسل في علامة تبويب حقيقية في المتصفح لا في عارض صور: بهذا المقاس يتحول الحد الخارجي الرفيع أو الاسم المكتوب إلى لطخة رمادية، والحل رمز أبسط، لا تصدير أكثر حدة.

الأدوات المستخدمة في هذه المقالة

مولّد Faviconحوّل شعارًا واحدًا إلى مجموعة favicon كاملة: كل مقاسات PNG، وملف ICO متعدد المقاسات، وملف manifest، ووسوم HTML للصقها في عنصر head بصفحتك.

PNG إلى SVGحوّل PNG بالتتبع إلى رسم SVG متجه قابل للتكبير في متصفحك. تناسب الأداة الشعارات والأيقونات المسطحة ذات الألوان القليلة، لا الصور الفوتوغرافية.

SVG إلى PNGحوّل ملفات SVG إلى PNG بأي مقياس أو بأبعاد دقيقة بالبكسل في متصفحك. وتُحذف النصوص البرمجية والروابط الخارجية قبل رسم أي شيء.