كيفية إنشاء favicon.ico (متعدد الأحجام) من PNG أو SVG
ابنِ favicon.ico حادًا ومتعدد الأحجام يعمل في كل متصفح وشريط تبويبات
أنشئ أيقونتك المفضلةالأيقونة المفضلة هي الأيقونة الصغيرة التي تظهر في تبويبات المتصفح والإشارات المرجعية وقوائم السجل وأشرطة العناوين. إنها من أوائل العناصر المرئية التي يلاحظها المستخدمون في موقعك، والحصول عليها بشكل صحيح أهم مما يدركه معظم المطورين. أيقونة مفضلة ضبابية أو مفقودة أو بحجم خاطئ تجعل الموقع يبدو غير مكتمل وغير احترافي.
تبقى صيغة ICO الخيار الأكثر موثوقية للأيقونات المفضلة لأنها تستطيع تجميع أحجام صور متعددة في ملف واحد. عندما يحتاج المتصفح إلى أيقونة 16×16 لشريط التبويبات، يسحب صورة 16×16 من ملف ICO. عندما يحتاج نظام التشغيل إلى أيقونة 32×32 لاختصار شريط المهام، يسحب نسخة 32×32. هذا يضمن أن أيقونتك المفضلة تبدو دائمًا حادة بكل حجم.
في هذا الدليل، ستحضّر صورة مصدر، وتحوّلها إلى ملف ICO متعدد الأحجام باستخدام Any2ICO، وتختار أحجام الأيقونة المفضلة المناسبة، وتضيف وسوم HTML الصحيحة ليجدها المتصفح ويعرضها. العملية بالكامل تستغرق أقل من دقيقتين، والتحويل يحدث في متصفحك مباشرة.
الخطوة 1: حضّر صورتك المصدر
أيقونة مفضلة رائعة تبدأ بصورة مصدر رائعة. جودة المدخلات تحدد مباشرة جودة المخرجات.
استخدم صورة مربعة. الأيقونات المفضلة تُعرض دائمًا كمربعات. إذا كان شعارك أعرض من طوله، فكّر في قصه إلى جزء مربع أو استخدام علامة مبسطة. يوفر Any2ICO وضعي تحجيم الاحتواء والتغطية إذا لم تكن صورتك مربعة تمامًا.
ابدأ بأعلى دقة متاحة. صورة بحجم 256×256 بكسل على الأقل تعطي Any2ICO بيانات مصدر نظيفة لكل حجم أيقونة مفضلة من 16×16 حتى 256×256.
PNG هي صيغة الإدخال المثالية. تحافظ PNG على الشفافية وهي بدون فقدان، مما يجعلها أفضل نقطة بداية لتحويل الأيقونات.
SVG تعمل، لكن مع تحفظات. SVG صيغة متجهية يمكنها نظريًا التحجّم لأي دقة. يقبل Any2ICO ملفات SVG ويحوّلها إلى صور نقطية أثناء التحويل. ومع ذلك، قد لا تُعرض ملفات SVG التي تحتوي على مراجع خطوط خارجية أو صور مرتبطة أو CSS معقد كما هو متوقع.
الخطوة 2: حوّل إلى ICO متعدد الأحجام باستخدام Any2ICO
مع صورتك المصدر جاهزة، توجّه إلى Any2ICO لتحويلها إلى ملف ICO متعدد الأحجام منظم بشكل صحيح.
ارفع صورتك. اسحب وأفلت ملف PNG أو SVG أو JPG أو WebP أو GIF أو BMP أو AVIF على منطقة المحوّل. يمكنك أيضًا اللصق من الحافظة أو الاستيراد من URL أو الاتصال بـ Google Drive أو OneDrive. يقبل Any2ICO ملفات بحجم أقصى 10 ميجابايت.
حدد أحجام ICO. يتيح لك Any2ICO اختيار الأحجام المراد تضمينها: 16 و32 و48 و64 و128 و256 بكسل. لمعظم المواقع، اختيار 16 و32 و48 يغطي حالات الاستخدام الأساسية.
اختر وضع التحجيم. اختر الاحتواء لملائمة الصورة الكاملة داخل حدود المربع أو التغطية لملء المربع بالكامل مع قص الحواف.
اضبط الخلفية. إذا كان مصدرك يحتوي على شفافية وتريد الحفاظ عليها، اختر خلفية شفافة. إذا كنت تفضل خلفية صلبة، اختر بيضاء.
نزّل ICO. انقر على زر التحويل ونزّل ملف favicon.ico المُنشأ. يتم التحويل بواسطة Canvas API مباشرة في متصفحك. لفهم كيف يتعامل Any2ICO مع ملفاتك بالضبط أثناء الرفع والاستيراد، زُر صفحة حول.
الخطوة 3: اختر أحجام الأيقونة المفضلة المناسبة
ليست كل الأحجام بنفس الأهمية. يوضح الجدول أدناه أحجام الأيقونات المفضلة القياسية وما إذا كان يجب تضمينها ولماذا.
| الحجم | تضمينه؟ | لماذا |
|---|---|---|
| 16x16 | نعم (أساسي) | تبويبات المتصفح وشريط العناوين والسجل. هذا هو حجم الأيقونة المفضلة الأكثر عرضًا. |
| 32x32 | نعم (أساسي) | اختصارات شريط مهام Windows وتبويب المتصفح على شاشات عالية الكثافة وبلاطات صفحة التبويب الجديد. |
| 48x48 | موصى به | اختصارات سطح مكتب Windows وبعض عروض إشارات المتصفح المرجعية. |
| 64x64 | اختياري | أيقونات مواقع Windows في سياقات عالية الدقة. نادرًا ما تستخدمه المتصفحات مباشرة. |
| 128x128 | اختياري | أيقونات متجر Chrome الإلكتروني وبعض بيئات سطح المكتب عالية الكثافة. |
| 256x256 | اختياري | Windows Vista والإصدارات الأحدث لعروض الأيقونات الكبيرة. مفيد إذا أنشأ المستخدمون اختصارات سطح مكتب لموقعك. |
لموقع ويب نموذجي، 16 و32 و48 هو الحد الأدنى العملي. للتعمق أكثر في كيفية اختيار المتصفحات بين الأحجام، اقرأ دليلنا شرح أحجام الأيقونات المفضلة.
الخطوة 4: أضف وسوم الأيقونة المفضلة إلى موقعك
بمجرد حصولك على ملف favicon.ico، تحتاج إلى وضعه على خادمك وإخبار المتصفحات بمكانه.
ضع الملف في جذر نطاقك. احفظ ملف favicon.ico في المجلد الجذر لخادم الويب بحيث يكون متاحًا على https://yourdomain.com/favicon.ico. معظم المتصفحات ستبحث تلقائيًا عن ملف في هذا المسار بالضبط.
أضف وسم link في رأس HTML. مع أن وضع الملف في الجذر يكفي غالبًا، إضافة وسم <link> صريح في قسم <head> يضمن أن كل متصفح يجده بشكل موثوق.
<link rel="icon" href="/ar/favicon.ico" sizes="any">سمة sizes="any" تخبر المتصفح أن ملف ICO يحتوي على أحجام متعددة وعليه اختيار الأنسب للسياق الحالي.
تحقق من عمله. افتح موقعك في متصفح وتحقق من أيقونة التبويب. إذا رأيت الأيقونة القديمة أو لا أيقونة على الإطلاق، فمن المحتمل أنك تحتاج إلى مسح ذاكرة التخزين المؤقت للمتصفح. تُخزّن الأيقونات المفضلة بشكل مكثف في كل متصفح رئيسي، لذا التحديث القوي (Ctrl+Shift+R أو Cmd+Shift+R) أو فتح الصفحة في نافذة خاصة هو أسرع طريقة للتأكيد. للمزيد حول وسوم الأيقونات المفضلة، انظر دليلنا حول وسوم HTML للأيقونات المفضلة.
الملخص
إنشاء favicon.ico متعدد الأحجام بشكل صحيح هو عملية من أربع خطوات: حضّر صورة مصدر مربعة عالية الجودة (يفضل PNG أو SVG بحجم 256×256 أو أكبر)، حوّلها إلى ICO بالأحجام المناسبة باستخدام Any2ICO، اختر أحجامًا تتناسب مع جمهورك (16 و32 و48 كحد أدنى)، وأضف وسم <link> بسيط إلى رأس HTML. العملية بالكامل تستغرق أقل من دقيقتين وتنتج أيقونة مفضلة تبدو واضحة في كل تبويب متصفح وشريط إشارات مرجعية واختصار سطح مكتب.
هل أنت جاهز لإنشاء أيقونتك المفضلة؟ توجّه إلى Any2ICO، ارفع شعارك، حدد أحجامك، ونزّل favicon.ico المكتمل في ثوانٍ. بدون تسجيل، بدون علامات مائية، والتحويل يحدث في متصفحك مباشرة.