مقال
صنع favicon من PNG
favicon رسم صغير تعرضه المتصفحات في التبويبات والإشارات المرجعية وقوائم السجل. الحصول عليه صحيحاً يتجاوز تغيير حجم الشعار: تنسيق .ico يحزم دقات متعددة في ملف واحد، والمتصفحات الحديثة تفضّل PNG، والأجهزة المحمولة لها apple-touch-icon الخاص بها، ومانيفستات تطبيقات الويب تحتاج مجموعة أيقونات خاصة بها. يغطي هذا المقال كل جزء ويشرح كيفية إنتاج المجموعة الكاملة من PNG مصدر واحد.
ما هو favicon وأين تستخدمه المتصفحات
كلمة favicon اختصار لـ "favorite icon". عرضتها المتصفحات أول مرة في شريط العناوين في Internet Explorer 5 (1999)، ثم تبنّتها للإشارات المرجعية. اليوم تظهر في تبويبات المتصفح وشريط أدوات الإشارات المرجعية وسجل التصفح وصفحة التبويب الجديد في بعض المتصفحات وأشرطة مهام أنظمة التشغيل حين يُثبَّت موقع. على الأجهزة المحمولة، إذا أضاف مستخدم موقعاً إلى شاشته الرئيسية، يستخدم الجهاز صورة مرتبطة لكن مستقلة تسمى apple-touch-icon بدلاً من favicon القياسي. تعرض محركات البحث أحياناً favicons بجانب النتائج في واجهتها. الرسم صغير بتصميم، مما يجعله فعّالاً للتعرف البصري السريع لكن يجعل إنتاجه جيداً تحدياً: عند 16x16 بكسل، يصبح الشعار التفصيلي بقعة غير واضحة. مرّ ملف favicon عبر عدة تنسيقات على مدار العقود، مع بقاء .ico الأوسع توافقاً وPNG الافتراضي الحديث لمعظم المتصفحات.
حاوي .ico: دقات متعددة في ملف واحد
تنسيق .ico حاوٍ لا صورة واحدة. يمكن لملف .ico واحد احتواء صور نقطية متعددة بدقات مختلفة، يُخزَّن كل منها كإدخال منفصل في فهرس في بداية الملف. الأحجام الثلاثة الأكثر شيوعاً هي 16x16 و32x32 و48x48 بكسل. حين تعرض Windows favicon في Explorer أو على شريط المهام، تختار الإدخال الأنسب لسياق العرض. احتاجت نسخ Windows القديمة إلى إدخال 48x48 لفتحات شريط المهام عالية الكثافة. تطلب المتصفحات favicon بـ 16x16 للتبويبات لكن قد تستخدم إدخالاً أكبر إذا اكتُشفت شاشة أعلى كثافة. حزم الأحجام الثلاثة في ملف .ico واحد يعني أن طلب HTTP واحداً يغطي كل حالات الاستخدام. توزيعها كملفات PNG منفصلة صالح أيضاً لكنه يتطلب وسوم ربط إضافية ويضيف طلبات HTTP. الصور الداخلية في ملف .ico هي بيانات BMP أو PNG قياسية، لذا يضيف الحاوي فقط عبئاً رأسياً صغيراً لكل إدخال.
التصميم للأحجام الصغيرة: تبسيط الشعار
عند 16x16 بكسل لديك 256 بكسلاً إجمالاً. الشعار النموذجي بنص كلمة أو تفاصيل دقيقة يصبح غير مقروء بهذا الحجم. النهج المعياري هو إنشاء شعار مبسّط: حرف واحد أو شكل تجريدي أو أيقونة تمثّل العلامة التجارية دون الاعتماد على التفاصيل. بعض المشكلات المحددة التي يجب توقعها: الخطوط الرفيعة تختفي تماماً في الأحجام الصغيرة، خاصةً على شاشات غير شبكية. أزواج الأحرف وتفاصيل المساحات السلبية تندمج في ضجيج رمادي. التدرجات تصبح بالكاد مرئية. التباين العالي بين الشعار وخلفيته هو العامل الأهم في وضوح القراءة. شكل صلب على خلفية عادية يُقرأ دائماً تقريباً أفضل من توضيح تفصيلي بـ 16x16. الحجمان 32x32 و48x48 أكثر تسامحاً ويمكن أن يدعما تفاصيل أكثر قليلاً، لكن يجب التعامل مع نسخة 16x16 كالقيد الملزم. إذا لم يظل الشعار مقروءاً بـ 16x16، يحتاج التصميم إلى تبسيط إضافي.
المجموعة الحديثة: .ico وأيقونات PNG وapple-touch-icon والمانيفست ووسوم ربط HTML
يحتاج إعداد favicon كامل لموقع عام حالياً خمسة أشياء. أولاً، favicon.ico في جذر الموقع (المتصفحات تطلب /favicon.ico مباشرة دون وسم ربط كملاذ أخير). ثانياً، PNG بـ 32x32 للمتصفحات المكتبية الحديثة، مُعلَن بوسم ربط: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. ثالثاً، PNG بـ 16x16 لحجم التبويب: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. رابعاً، apple-touch-icon بـ 180x180 بكسل لإشارات شاشة iOS الرئيسية: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. خامساً، مانيفست تطبيق ويب (site.webmanifest) مع PNG بـ 192x192 و512x512 لـ Android وتطبيقات الويب التقدمية. الشفافية مدعومة في PNG وفي الإدخالات المشفّرة بـ PNG داخل .ico، رغم أن apple-touch-icon يجب أن يكون بخلفية معتمة لأن iOS يتجاهل قناة alpha ويملأ المناطق الشفافة بالأسود.
إجراؤه محلياً: favicon-generator يبقي صورتك على جهازك
يأخذ favicon-generator على هذا الموقع PNG وينتج المجموعة الكاملة: favicon.ico متعدد الدقات محزوم بإدخالات 16x16 و32x32 و48x48، وأحجام PNG الفردية للاستخدام المباشر بوسوم الربط، وapple-touch-icon بـ 180x180. كل هذا يحدث في متصفحك باستخدام Canvas API ومُشفِّر .ico بـ JavaScript. صورتك المصدر لا تُرفع في أي مكان؛ تبقى على جهازك. هذا يهم حين يكون الملف المصدر شعار شركة أو أي أصل لا يجب أن يغادر جهازك قبل أن تتحكم في وجهته. يُعرَض كل ملف مُولَّد كتنزيل مستقل خاص به، بأسماء الملفات الاصطلاحية. تنسخها إلى جذر موقعك وتضيف وسوم الربط المقابلة إلى قسم head في HTML. إذا كان شعارك المصدر يحتوي على تفاصيل دقيقة لا تصمد عند 16x16، يمكنك اقتصاصه أو تبسيطه قبل إسقاطه في المولّد، أو توفير صورة مصدر مختلفة مُعدَّة خصيصاً لـ favicon.
الأدوات المذكورة في هذا المقال
الأسئلة الشائعة
هل ما زلت بحاجة إلى favicon.ico إذا أعلنت وسوم ربط PNG؟
نعم، لسببين. أولاً، المتصفحات التي لا تقرأ HTML (زواحف الويب وقراءات RSS وبعض المتصفحات المحمولة القديمة) تبحث عن /favicon.ico مباشرةً في جذر النطاق. إذا كان الملف غائباً تولّد طلب 404 في كل تحميل صفحة، مما يضيف ضجيجاً إلى سجلات خادمك ورحلة ذهاب وإياب إضافية غير ضرورية. ثانياً، نسخ Internet Explorer القديمة تتعرف فقط على تنسيق .ico وتتجاهل وسوم ربط PNG. توفير كليهما يغطي جميع الحالات.
هل يمكنني استخدام SVG كـ favicon؟
يدعم Chrome وFirefox favicons بتنسيق SVG عبر `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari لا يدعم favicons بتنسيق SVG. بما أن favicons بتنسيق SVG مستقلة الدقة، تبدو حادة على أي كثافة عرض بما في ذلك شاشات الشبكية، دون الحاجة إلى متغيرات حجم متعددة. التوصية العملية هي الإعلان عن وسم ربط SVG للمتصفحات التي تدعمه والإبقاء على ملاذ .ico للتغطية الكاملة. يمكن لـ favicons بتنسيق SVG أيضاً تضمين استعلام وسائط `prefers-color-scheme` للتبديل بين نسخة فاتحة وداكنة تلقائياً.
ما الصورة التي يجب أن أبدأ منها للحصول على أفضل نتيجة؟
PNG مربع بـ 512x512 أو أكبر مع خلفية شفافة يمنح أكبر مرونة. البدء بحجم كبير والتصغير يحفظ تفاصيل أكثر من البدء بصورة صغيرة. إذا كان شعارك الرئيسي يتضمن نص كلمة، فكّر في إعداد نسخة مبسّطة منفصلة تُظهر الأيقونة أو الشعار فقط، لأن النص لن يكون مقروءاً بـ 16x16 بغض النظر عن دقة المصدر. التباين العالي بين الشعار وخلفيته هو أكثر المؤشرات موثوقية على ما إذا كانت الأحجام الصغيرة ستُقرأ بوضوح.