مولد أيقونات الموقع
إنشاء أيقونات لموقعكم من نص أو رموز تعبيرية أو صور
تصميم الأيقونة
اختر إيموجي
0% يعني شكلاً مربعاً؛ و100% يعني الشكل المستدير بالكامل الأصلي.
ملف صورة حتى 10 MiB. تمدّد أداة العرض الصورة لتصبح مربعة.
المعاينة والملفات
هذا توضيح فقط. قد يختلف عرض الإيموجي بين المتصفحات والأنظمة.
تم تحديث المعاينة المباشرة. أنشئ الملفات عندما يصبح تصميمك جاهزاً.
ملفات PNG المُنشأة
تغيّر التصميم. لا تزال هذه الملفات تحتوي على آخر تصميم أُنشئ؛ أعد الإنشاء لتحديثها.
ملفات PNG بأحجام: 16 و32 و48 و64 و128 و256 px. يحتوي ملف ICO على صورة PNG المُنشأة بحجم 32 px.
أضفها إلى موقعك
- ارفع الملفات التي نزّلتها واستخدم الوسوم المنسوخة في head الخاص بصفحتك.
- تشير مسارات الوسوم الافتراضية إلى جذر موقعك؛ عدّلها إذا وضعت الملفات في مكان آخر.
- يحتوي ملف ICO المنزَّل على صورة PNG واحدة، وليس على كل الأحجام المُنشأة.
- أيقونات Apple touch وأيقونات ملف manifest لتطبيقات الويب أصول منفصلة؛ ولا تنشئ هذه الأداة تلك الملفات.
- لا يُضمن ظهور الأيقونة في نتائج البحث.
- تقرأ الأداة ملفك في المتصفح دون رفعه. احتفظ بنسخة أصلية غير معدلة.
حول أداة مولد أيقونات الموقع
يتيح لك مولد أيقونات الموقع المجاني عبر الإنترنت إنشاء أيقونات موقع احترافية من نصوص أو أحرف أو رموز تعبيرية أو صور مرفوعة مباشرة داخل متصفحك. أيقونات الموقع (favicon) هي الأيقونات الصغيرة التي تظهر في علامات تبويب المتصفح والإشارات المرجعية ونتائج البحث، ولها دور أساسي في التعرف على العلامة التجارية وتجربة المستخدم. بهذه الأداة يمكنك تصميم أيقونات الموقع وتنزيلها بعدة أحجام دون برامج تصميم أو خبرة تقنية.
يدعم المولد ثلاثة أوضاع للإنشاء: وضع النص/الحرف لإنشاء أيقونات من حرف أو حرفين مع تحكم كامل في الخط واللون والتنسيق، ووضع الرمز التعبيري لإنشاء أيقونات سريعة من أي رمز تعبيري مع خلفيات وأحجام قابلة للتعديل، ووضع الرفع لإنشاء ملفات أيقونات مربعة من صور يستطيع المتصفح فك ترميزها. تعرض الأداة الصورة محليًا دون رفع الملف المحدد، ولا يعني هذا ضمان خصوصية كل نص برمجي أو طلب آخر في الصفحة.
تنشئ الأداة ستة أحجام مربعة بصيغة PNG: 16 و32 و48 و64 و128 و256 px. نزّل الملفات الفردية، وملف ICO مبنيًا على صورة PNG واحدة بحجم 32 px، ووسوم الربط HTML المطابقة. لا تغطي هذه الملفات متطلبات الأيقونات في كل المنصات.
الميزات الرئيسية
- ثلاثة أوضاع للإنشاء: نص/حرف، ورمز تعبيري، ورفع صورة
- لون النص ولون الخلفية وعائلة الخط ووزن الخط قابلة للتخصيص
- نصف قطر حدود قابل للتعديل من المربع إلى الدائرة
- دعم الخلفية الشفافة في وضعي النص والرمز التعبيري
- شبكة اختيار سريع للرموز التعبيرية الشائعة تضم 32 رمزًا شائع الاستخدام
- تنشئ ستة أحجام قياسية لأيقونة الموقع: 16x16 و32x32 و48x48 و64x64 و128x128 و256x256
- معاينة مباشرة مع تحديثات فورية أثناء ضبط الإعدادات
- معاينة لعلامة تبويب متصفح تجريبية توضح كيف ستظهر أيقونة موقعك
- تنزيل الأحجام الفردية كملفات PNG
- تنزيل حاوية favicon.ico تضم صورة PNG واحدة منشأة بحجم 32 px، وتعتمد درجة التوافق على التطبيق العميل
- نسخ وسوم الربط HTML إلى الحافظة لدمجها بسهولة في موقعك
- تتم كل المعالجة داخل المتصفح دون أي رفع إلى الخادم
كيفية استخدام مولد أيقونات الموقع
- اختر وضعًا: حدّد «نص/حرف» لإنشاء أيقونة من أحرف، أو «رمز تعبيري» لاستخدام رمز تعبيري، أو «رفع صورة» لتحويل صورة موجودة.
- خصّص تصميمك: في وضع النص، أدخل حرفًا أو حرفين واضبط حجم الخط والألوان ونصف قطر الحدود وعائلة الخط ووزنه. وفي وضع الرمز التعبيري، اختر رمزًا تعبيريًا أو اكتبه واضبط الخلفية والحجم. وفي وضع الرفع، اختر ملف صورة من جهازك.
- عاين فوريًا: شاهد المعاينة المباشرة بحجم 256x256 تتحدث فورًا عند تغيير الإعدادات. افحص نموذج علامة تبويب المتصفح لترى كيف ستبدو أيقونتك في علامة تبويب حقيقية.
- أنشئ الأيقونات: انقر زر «إنشاء الأيقونات» لإنشاء الأحجام القياسية الستة كلها من تصميمك.
- نزّل أيقوناتك: نزّل ملفات PNG فردية لكل حجم، أو احصل على ملف favicon.ico، أو انسخ وسوم الربط HTML لقسم head في موقعك.
- أضفها إلى موقعك: ضع الملفات المنزّلة في الدليل الجذر لموقعك والصق وسوم الربط HTML في head مستند HTML الخاص بك.
حالات الاستخدام
- إطلاق موقع جديد: أنشئ بسرعة أيقونة موقع احترافية لموقع أو تطبيق ويب جديد دون الحاجة إلى مصمم جرافيك.
- العلامة الشخصية: أنشئ أيقونة موقع بحرف أو أكثر من الأحرف الأولى من اسمك لمدونة شخصية أو معرض أعمال أو موقع مهني.
- النماذج الأولية للشركات الناشئة: أنشئ أيقونة مؤقتة لكنها أنيقة في مراحل التطوير الأولى حين لا تكون الهوية التجارية الكاملة قد تحددت بعد.
- المشاريع الجانبية والتجارب: أضف شخصية إلى مشاريع الهواية ومشاركات الهاكاثون والمواقع التجريبية بأيقونات مخصصة من رموز تعبيرية أو نصوص.
- اختبار تطوير الويب: أنشئ أيقونات مؤقتة لبيئات التطوير وخوادم الاختبار أو النماذج الأولية للعملاء.
- إدارة مواقع متعددة: أنشئ أيقونات متميزة لمواقع أو نطاقات فرعية أو تطبيقات ويب مختلفة للتمييز بين علامات التبويب المفتوحة المتعددة.
- التوثيق والدروس التعليمية: أنشئ ملفات أيقونات لمواقع العرض التوضيحي وأمثلة الشيفرة والمواد التعليمية.
- تطوير إضافات المتصفح: أنشئ ملفات أيقونات لإضافات المتصفح التي تحتاج إلى أيقونات صغيرة يسهل التعرف عليها بأحجام مختلفة.
الأسئلة الشائعة
ما هي أيقونة الموقع (favicon)؟
أيقونة الموقع (favicon، اختصار «favorites icon») هي أيقونة صغيرة مرتبطة بموقع ويب. تظهر في علامات تبويب المتصفح وقوائم الإشارات المرجعية وسجل التصفح ونتائج محركات البحث. تساعد أيقونات الموقع المستخدمين على تمييز موقعك وتحديد مكانه بسرعة بين علامات التبويب والإشارات المرجعية المفتوحة.
ما الأحجام التي ينبغي أن أستخدمها لأيقونة موقعي؟
توفر هذه الأداة ملفات PNG بأحجام 16 و32 و48 و64 و128 و256 px وملف ICO بحجم 32 px. اختر الأحجام التي يتطلبها التطبيق المستهدف. يوصي بحث Google حاليًا بأيقونات مربعة أكبر من 48 px، ولا يُضمن إدراجها.
ما الفرق بين صيغتي PNG وICO؟
PNG صيغة صور نقطية، أما ICO فحاوية أيقونات. تصدّر هذه الأداة ستة ملفات PNG وتضمّن صورة PNG المنشأة بحجم 32 px داخل مدخل واحد في ملف ICO. تحقق من متطلبات التطبيق المستهدف، فلا تضمن أي من الصيغتين دعمًا شاملًا.
هل يمكنني إنشاء أيقونة موقع شفافة؟
نعم، يمكنك في وضعي النص/الحرف والرمز التعبيري تفعيل خيار الخلفية الشفافة. ينشئ ذلك أيقونة بخلفية شفافة، وهو مفيد للأيقونات التي ينبغي أن تندمج مع لون خلفية علامة تبويب المتصفح.
هل تُرسل صورتي المرفوعة إلى خادم؟
تعرض هذه الأداة صورتك المحددة داخل المتصفح دون رفعها. الحد الأقصى للملفات 10 MiB، وتعتمد الصيغ المدعومة على فك ترميز المتصفح. لا يشمل هذا البيان التخزين أو التتبع أو الطلبات التي تجريها نصوص برمجية أخرى على الموقع.
كيف أضيف أيقونة الموقع إلى موقعي؟
ضع ملفات أيقونة الموقع المنزّلة في الدليل الجذر لموقعك (أو في دليل فرعي تختاره)، ثم أضف وسوم الربط HTML إلى قسم head في مستند HTML. يمكنك نسخ وسوم الربط الجاهزة للاستخدام من هذه الأداة. مثال: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
نصائح وأفضل الممارسات
- اجعلها بسيطة: تُعرض أيقونات الموقع بأحجام صغيرة جدًا. استخدم أشكالًا جريئة وبسيطة وألوانًا عالية التباين تبقى واضحة عند 16x16 بكسل.
- استخدم حرفًا أو حرفين كحد أقصى: في أيقونات الموقع النصية، يعطي الحرف الواحد أفضل نتيجة. قد يصلح حرفان لكنهما أقل وضوحًا في الأحجام الصغيرة.
- اختر ألوانًا متباينة: تأكد من أن النص أو الرمز التعبيري يبرز بوضوح على الخلفية. يضمن التباين العالي الظهور في علامات تبويب المتصفح.
- اختبر بأحجام صغيرة: افحص دائمًا شكل أيقونتك عند 16x16 و32x32 قبل اعتمادها. ما يبدو رائعًا عند 256x256 قد لا يكون مقروءًا بأحجام أصغر.
- راعِ الوضع الداكن: يتصفح كثير من المستخدمين بسمات متصفح داكنة. وقد تصبح أيقونة بخلفية شفافة ومحتوى داكن غير مرئية. فكّر في إضافة خلفية ملونة أو استخدام محتوى فاتح اللون.
- استفد من نصف قطر الحدود: تمنح الزوايا المستديرة (20-30%) أيقونات الموقع مظهرًا عصريًا أنيقًا. ويناسب الشكل الدائري الكامل (100%) الأحرف المفردة أو الرموز التعبيرية.
- أدرج أحجامًا متعددة: وفّر ملفات مناسبة للتطبيقات التي تستهدفها. تنشئ هذه الأداة أحجام PNG الستة المذكورة وملف ICO واحدًا، أما أيقونات Apple touch وملف manifest لتطبيقات الويب فتتطلب ملفات منفصلة، ولا يُضمن تغطية شاملة للأجهزة.