كيفية إنشاء أيقونة موقع مجانًا عبر الإنترنت (دليل 2026)

تلك الأيقونة الصغيرة في علامة تبويب متصفحك — الموجودة بجانب عنوان الصفحة — تُسمى أيقونة الموقع (favicon)، وهي من أصغر قرارات العلامة التجارية على موقعك. المواقع التي لا تملك واحدة تعرض أيقونة صفحة فارغة عامة، مما يوحي بهدوء بأن الموقع "غير مكتمل" للزوار. الخبر الجيد: صنع أيقونة موقع يستغرق نحو دقيقة. يوضح لك هذا الدليل كيفية تحويل أي صورة إلى مجموعة أيقونات موقع بمقاسات صحيحة باستخدام مولد الأيقونات المجاني لدينا، وكيفية إضافتها إلى موقعك.

ما هي أيقونة الموقع، ولماذا تهم؟

أيقونة الموقع (اختصارًا لـ "favorites icon") هي الصورة الصغيرة التي تعرضها المتصفحات في علامات التبويب والإشارات المرجعية وقوائم السجل وأحيانًا نتائج البحث. وعادة ما تُعرض بحجم 16×16 بكسل فقط — صغيرة جدًا — لكنها مرئية على كل صفحة من صفحات موقعك. الأيقونة المخصصة تجعل علامات تبويبك قابلة للتمييز من أول نظرة، وتساعد المستخدمين على إيجاد موقعك بين عشرين علامة تبويب مفتوحة، وتكمل المظهر الاحترافي لموقع مكتمل.

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

ماذا يفعل مولد الأيقونات المجاني؟

مولد الأيقونات يأخذ أي صورة ترفعها وينتج أيقونات PNG بأربعة مقاسات قياسية:

• 16×16 — مقاس أيقونة علامة التبويب والإشارة المرجعية الكلاسيكي.
• 32×32 — تستخدمه المتصفحات الحديثة لعلامات التبويب واختصارات شريط المهام على الشاشات عالية الكثافة.
• 48×48 — يُستخدم لاختصارات سطح المكتب في بعض الأنظمة.
• 180×180 — مقاس أيقونة لمس Apple، ويُعرض عندما يحفظ شخص ما موقعك على الشاشة الرئيسية لهاتف iPhone أو جهاز iPad.

كل شيء يحدث في متصفحك — فصورتك المصدر لا تُرفع إلى خادم أبدًا.

خطوة بخطوة: أنشئ أيقوناتك

1. اختر صورة مصدر. اختر شيئًا بسيطًا وجريئًا: علامة شعار، أو حرفًا أوليًا، أو أيقونة نظيفة. الصور المربعة تعمل بأفضل شكل. تجنب الصور المفصلة — فالتفاصيل تختفي عند 16 بكسل.
2. افتح مولد الأيقونات. يعمل في أي متصفح حديث؛ ولا شيء لتثبيته.
3. ارفع صورتك. اختر الملف من جهازك. الأداة تبقى محلية بالكامل — لا شيء يُنقل.
4. أنشئ مجموعة الأيقونات. تنتج الأداة نسخ PNG بمقاسات 16 و32 و48 و180 بكسل من صورتك.
5. نزّل الملفات. احفظ كل مقاس. أبقِ أسماء الملفات بسيطة ومتسقة، مثلًا favicon-16.png وfavicon-32.png وfavicon-48.png وapple-touch-icon.png.
6. ارفعها إلى موقعك. ضع الملفات في الدليل الجذر لموقعك أو في مجلد images، بجانب ملفات موقعك الأخرى.
7. أضف HTML (انظر أدناه). أشِر إلى الأيقونات في <head> صفحاتك حتى تعرف المتصفحات أن تستخدمها.

إضافة أيقونات الموقع إلى موقعك: HTML

بمجرد أن تصبح ملفات أيقوناتك على خادمك، أضف هذه السطور داخل قسم <head> صفحات HTML الخاصة بك (اضبط المسارات لتطابق المكان الذي وضعت فيه الملفات):

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

المتصفحات تختار المقاس الذي تحتاجه تلقائيًا. سطر apple-touch-icon يغطي هواتف iPhone وأجهزة iPad عندما يضيف الزوار موقعك إلى شاشتهم الرئيسية. إذا كان موقعك يستخدم قالب ترويسة مشتركًا، أضف هذه السطور مرة واحدة وستحصل كل صفحة على الأيقونة.

لا تراها؟ المتصفحات تخزّن أيقونات المواقع مؤقتًا بشكل قوي. بعد إضافة أيقونتك، قم بتحديث قوي (Ctrl+Shift+R على Windows، أو Cmd+Shift+R على Mac) أو افتح الصفحة في نافذة خاصة/تصفح خفي للتحقق.

نصائح تصميم: ما الذي يصنع أيقونة موقع جيدة؟

• أبقها بسيطة للغاية. عند 16×16 بكسل لا مجال للتفاصيل. حرف واحد أو شكل بسيط واحد أو علامة بلونين يتفوق على شعار كامل في كل مرة.
• استخدم تباينًا عاليًا. حرف أبيض على مربع ملون صلب يُقرأ بوضوح؛ أما الخطوط الرمادية الرفيعة على الأبيض فتختفي.
• اختبر بالمقاس الفعلي. صغّر صورتك المصدر إلى عرض 16 بكسل في ذهنك — إذا لم تستطع معرفة ما هي، بسّطها قبل التوليد.
• طابق لون علامتك. استخدام اللون الأساسي لموقعك كخلفية للأيقونة يربط أيقونة التبويب بعلامتك فورًا.
• تجنب حواف الشفافية. إذا كان مصدرك ذا خلفية شفافة، تأكد من أن الشكل المرئي جريء بما يكفي للنجاة من التصغير — فالحواف الخافتة تتحول إلى عجينة رمادية عند 16 بكسل.
• مفهوم واحد عبر المقاسات. استخدم الصورة المصدر نفسها لكل المقاسات حتى تكون أيقونة التبويب وأيقونة الإشارة المرجعية وأيقونة الشاشة الرئيسية متميزة كعلامة واحدة.

أخطاء شائعة يجب تجنبها

• استخدام شعار كامل مفصل. الشعار ذو الشعار النصي يصبح لطخة غير مقروءة بحجم الأيقونة. استخرج الأيقونة أو الحرف الأول فقط.
• نسيان أيقونة لمس Apple. نسخة 180 بكسل هي ما يراه مستخدمو iPhone عندما يحفظون موقعك على شاشتهم الرئيسية — لا تتخطها.
• مسارات ملفات خاطئة في HTML. إذا لم تظهر الأيقونة، فالسبب الأكثر شيوعًا هو مسار لا يطابق المكان الفعلي للملفات. تحقق من قيم href مرتين.
• الاختبار في متصفح واحد فقط. تحقق من أيقونة علامة تبويبك في Chrome على الأقل وفي متصفح آخر، إضافة إلى حفظ على الشاشة الرئيسية للهاتف إن استطعت.

خصوصيتك: الصور لا تغادر جهازك أبدًا

شعارك هو علامتك — فرفعه إلى موقع أيقونات عشوائي يعني تسليم عملك الفني إلى خادم غريب. مولد الأيقونات يعالج كل شيء محليًا في متصفحك باستخدام JavaScript. لا شيء يُرفع أو يُخزَّن أو يُسجَّل.

الأسئلة الشائعة

هل مولد الأيقونات مجاني؟

نعم — دون تسجيل ودون حدود، والأيقونات التي تنزّلها لك لتستخدمها على أي موقع.

من أي صورة يجب أن أبدأ؟

صورة PNG مربعة لعلامة شعارك أو أيقونة بسيطة، ويفضل أن تكون 512×512 بكسل على الأقل. الصور المصدر الأكبر والأنظف تُصغَّر بشكل أفضل من الصغيرة.

هل ما زلت بحاجة إلى ملف .ico؟

المتصفحات الحديثة كلها تقبل أيقونات PNG، وهو ما تنتجه هذه الأداة. الصيغة الكلاسيكية favicon.ico ما زالت تعمل لكنها لم تعد مطلوبة للمتصفحات الحالية.

لماذا لا تظهر أيقونتي الجديدة؟

في الغالب دائمًا بسبب التخزين المؤقت. قم بتحديث قوي للصفحة، أو امسح ذاكرة المتصفح المؤقتة للموقع، أو اختبر في نافذة تصفح خفي. وتحقق أيضًا من مسارات الملفات في وسوم <link> في HTML الخاص بك.

اصنع أيقونتك الآن: مولد الأيقونات المجاني · ضاغط الصور المجاني · منتقي الألوان المجاني