حوّل PNG إلى ICO لأيقونة موقع حادة
أيقونة الموقع (favicon) هي الصورة الصغيرة التي تمنح الموقع توقيعه البصري. تراها في تبويب المتصفح بجوار عنوان الصفحة، وفي قائمة مفضّلاتك، وفي قائمة شريط العنوان المنسدلة لسجل تصفّحك، وأحيانًا بجانب نتائج البحث. إنها صغيرة لكنها تؤدي عملًا كثيرًا: أيقونة موقع مميَّزة تساعد المستخدمين على إيجاد تبويبك بين عشرة تبويبات أخرى، وتشير إلى أن الموقع مكتمل ومعتنًى به. والصيغة الكلاسيكية لتلك الأيقونة الصغيرة هي ICO، وأسهل طريقة لصنع واحدة هي البدء من ملف PNG مربّع نظيف وتحويله.
تأخذ هذه الأداة صورة PNG وتحوّلها إلى أيقونة موقع بصيغة ICO داخل متصفحك تمامًا. يجري التحويل محليًا باستخدام جهازك أنت، فالصورة التي تختارها لا تُرفع إلى خادم أبدًا. وهذا يهم حين تكون أيقونتك شعارًا أو أصلًا للعلامة التجارية تفضّل ألّا تسلّمه لطرف ثالث. وحين يصبح الملف جاهزًا، تنزّله ببساطة.
ما هي صيغة ICO ولماذا تحمل عدة أحجام
ICO صيغة حاوية أيقونات نشأت في مايكروسوفت ويندوز، حيث تخزّن الأيقونات المستخدمة للبرامج والاختصارات والمجلدات. وميزتها المُمَيِّزة، وسبب صيرورتها معيارًا لأيقونات مواقع الويب، أن ملف ICO واحدًا يستطيع حمل الصورة نفسها بعدة دقات في آن واحد. فبدل صورة نقطية ثابتة واحدة، يحزم الملف مجموعة صغيرة من الصور المربعة ويترك المتصفح أو نظام التشغيل يختار الحجم الذي يلائم المكان الذي يحتاج رسم الأيقونة فيه.
وهذا مفيد حقًا. فتبويب المتصفح يحتاج أيقونة صغيرة جدًا، وقد يستخدم شريط المفضّلات واحدة أكبر قليلًا، ويمكن لاختصار مثبّت على سطح المكتب أن يطلب شيئًا أكبر بعد. مع ICO متعدد الأحجام، يلتقط كل سياق النسخة التي تناسبه، فتبقى أيقونتك حادة بدل أن تُكبَّر من صورة نقطية صغيرة واحدة فتتحول إلى ضبابية. كما تحفظ ICO الشفافية، ما يبقي زوايا شعار دائري أو غير منتظم نظيفة أمام أي لون تبويب.
أحجام أيقونة الموقع الموصى بها
لأيقونة موقع ويب، الأحجام الثلاثة الجديرة بالتضمين هي 16x16 و32x32 و48x48 بكسل. نسخة الـ16 بكسل هي التي تعرضها معظم المتصفحات في التبويب وشريط العنوان. ونسخة الـ32 بكسل تُستخدم على الشاشات الأعلى دقة وفي بعض عروض المفضّلات والسجل، فتبقي الأمور حادة على الشاشات الحديثة. أما نسخة الـ48 بكسل فتغطي سياقات أكبر مثل اختصارات مواقع ويندوز. ولأنها كلها تعيش داخل ملف ICO واحد، فأنت تشحن أصلًا واحدًا وتترك كل سطح يختار ما يحتاجه.
ابدأ من PNG مربّع كي لا يتمدد شيء. إن كانت صورة مصدرك مستطيلة أو كبيرة الحجم، فاقتصصها أو حجّمها إلى مربع نظيف أولًا بـمغيّر حجم الصور لدينا، ثم أجرِ التحويل. والتصميم البسيط عالي التباين يُقرأ أفضل بكثير عند 16 بكسل من رسم مفصّل، لذا فضّل الأشكال الجريئة على النص الدقيق.
كيف تضيف أيقونة الموقع إلى موقعك
حالما يصبح لديك ملف ICO، ارفعه إلى موقعك، تقليديًا إلى جذر الموقع باسم favicon.ico. ستجده كثير من المتصفحات هناك تلقائيًا، لكن من أفضل الممارسات أن تعلنه صراحةً في رأس صفحة HTML كي لا يكون هناك أي تخمين. أضف وسم رابط هكذا:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
ضع ذلك السطر داخل قسم <head> في صفحاتك. الخاصية rel="icon" تخبر المتصفح بأن هذا المورد هو أيقونة الصفحة، وhref يشير إلى حيث خزّنت الملف. وإن استخدمت مسارًا نسبيًا للجذر مثل الذي بالأعلى، فإن الإعلان نفسه يعمل عبر كل صفحة في موقعك. وبعد النشر، قد تحتاج إلى تحديث صارم أو مسح ذاكرة التخزين المؤقت قبل ظهور الأيقونة الجديدة، إذ تتمسك المتصفحات بأيقونات المواقع بشدة.
تحويل خاص في متصفحك
كل شيء يحدث على جهازك. تُقرأ PNG التي تختارها وتُفكّ وتُعاد ترميزها كـICO محليًا، ولا يغادر شيء جهازك أثناء العملية. لا حساب، ولا طابور انتظار، ولا تخزين على الخادم، ما يجعل هذا مريحًا حتى للشعارات غير المُطلقة أو أعمال العملاء الخاضعة لاتفاق. ولمزيد من طرق إعداد الرسوم وترتيبها، تصفّح مجموعتنا الكاملة من أدوات الصور.
الأسئلة الشائعة
هل تُرفع صورتي إلى أي مكان؟
لا. تُحوَّل PNG إلى ICO بالكامل في متصفحك على جهازك أنت. لا يُرسَل شيء إلى خادم ولا يُخزَّن شيء، فتبقى صورتك خاصة.
أي أحجام ينبغي أن تتضمنها أيقونة موقعي؟
أكثر الأحجام فائدة هي 16x16 و32x32 و48x48 بكسل. تُعرَض صورة الـ16 بكسل في تبويبات المتصفح، بينما تبقي الأكبر الأيقونة حادة على الشاشات عالية الدقة واختصارات سطح المكتب.
لماذا أستخدم ICO بدلًا من PNG فحسب؟
ICO هي صيغة أيقونة الموقع العريقة وتستطيع تخزين عدة أحجام داخل ملف واحد. يختار المتصفح ونظام التشغيل الدقة التي تلائم كل سياق، فتبقى الأيقونة حادة بدل أن تُحجَّم من صورة نقطية واحدة.
هل يحفظ ICO الشفافية من PNG لديّ؟
نعم. تدعم صيغة ICO الشفافية، فتُحفظ المناطق الشفافة من PNG وتمتزج الأيقونة بنظافة مع أي لون تبويب أو خلفية.
كيف أضيف أيقونة الموقع إلى موقعي؟
ارفع ملف ICO إلى موقعك، عادةً باسم favicon.ico في الجذر، وأضف وسم رابط في رأس HTML مثل link rel icon type image x-icon href شَرطة favicon.ico. ثم امسح ذاكرة المتصفح المؤقتة لرؤيته.
صورة مصدري ليست مربعة. ماذا أفعل؟
اقتصصها أو حجّمها إلى مربع أولًا كي لا تتمدد. يمكنك استخدام مغيّر حجم الصور لدينا لصنع مربع نظيف، ثم تحويل ذلك إلى ICO لأفضل أيقونة موقع مظهرًا.