إنشاء أيقونة الموقع
أنشئ favicon.ico وملفات PNG بكل الأحجام وأيقونات iPhone وAndroid دفعة واحدة من نص أو رمز تعبيري أو صورة شعار.
1. أدخل نصًا أو اختر صورة
اكتب الحروف التي تريدها في الأيقونة (والرموز التعبيرية أيضًا)، أو اختر صورة مثل شعارك.
طريقة الإنشاء
حتى 3 أحرف. تظهر الأيقونة صغيرة جدًا، لذا يُفضَّل حرف أو حرفان.
الخط
2. اختر الشكل والألوان
اختر شكل الخلفية ولونها وحجم المحتوى، وشاهد النتيجة فورًا في المعاينة.
الشكل
لون الخلفية
أيقونة الشاشة الرئيسية في iPhone وحدها لا يمكن أن تكون شفافة (تظهر سوداء)، لذا تُملأ بلون الخلفية الذي اخترته أعلاه.
لون النص
الألوان في الوضع الداكن
يتغيّر favicon.svg وحده. في الوضع التلقائي يُعكس السطوع فقط إذا كان اللون صعب الرؤية على شاشة داكنة.
3. تحقّق من المظهر واحفظ
تحقّق من مظهر الأيقونة في علامة تبويب المتصفح وعلى الشاشة الرئيسية، ثم احفظ كل شيء في ملف ZIP واحد.
اكتب نصًا لتظهر المعاينة هنا
علامة تبويب المتصفح (الوضع الفاتح والداكن)
يُكتب في site.webmanifest ليكون الاسم الظاهر عند الإضافة إلى الشاشة الرئيسية.
تضيف 64 و128 و256 بكسل، وتُستخدم حين تظهر الأيقونة كبيرة، كاختصارات سطح مكتب Windows. يصبح الملف أكبر.
كود HTML للصقه في موقعك
ضع الملفات الموجودة داخل ZIP في جذر موقعك (/)، ثم الصق كود HTML هذا داخل <head>.
عرض HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">الملفات داخل ZIP
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
تتم المعالجة كلها على هذا الجهاز، ولا تُرفع صورك أبدًا.
هل كانت مفيدة؟ يسعدنا أن تشاركها
هل هناك ما لا يعمل، أو لديك فكرة لتحسينه؟
طريقة الاستخدام
1. أدخل النص
مع تحديد «نص»، المس خانة «نص الأيقونة» واكتب من حرف إلى 3 أحرف، ويمكنك استخدام الرموز التعبيرية أيضًا. ويمكنك اختيار شكل الحروف من «الخط» أسفلها.
مع تحديد «نص» في العمود الأيمن، انقر خانة «نص الأيقونة» واكتب من حرف إلى 3 أحرف، ويمكنك استخدام الرموز التعبيرية أيضًا. تتغير المعاينة في العمود الأيسر فورًا. ويمكنك اختيار شكل الحروف من «الخط» أسفلها.
2. اختر الشكل والألوان
المس «اختيار الشكل والألوان بملء الشاشة» لفتح شاشة التحرير. في الشريط السفلي، المس «دائرة» في تبويب «الشكل»، ثم دائرة لون للخلفية في تبويب «الألوان». تُظهر المعاينة في الوسط فورًا شكل الأيقونة على الشاشة الفاتحة والداكنة.
في قسم «اختر الشكل والألوان»، انقر «دائرة» من «الشكل»، ثم انقر دائرة لون من «لون الخلفية». تُظهر لك المعاينة في العمود الأيسر فورًا كيف تبدو الأيقونة على الشاشة الفاتحة والداكنة وفي علامة تبويب المتصفح. وانقر «التحرير بملء الشاشة» فوق المعاينة لتختار وأنت ترى معاينة كبيرة.
3. الإنشاء من صورة
لإنشاء الأيقونة من شعار أو صورة أخرى، المس «صورة» في الأعلى، ثم اختر الصورة من «اختر ملفات». تُفتح شاشة التحرير وتدخل الصورة كاملة في الأيقونة. ولملء الأيقونة حتى الحواف، المس «قص وملء» من «طريقة الملاءمة» في الشريط السفلي.
لإنشاء الأيقونة من شعار أو صورة أخرى، انقر «صورة» أعلى العمود الأيمن، ثم اسحب الصورة وأفلتها (أو اخترها من «اختر ملفات»). تدخل الصورة كاملة في الأيقونة. ولملء الأيقونة حتى الحواف، انقر «قص وملء» من «طريقة الملاءمة» في قسم «اختر الشكل والألوان».
4. احفظ كل شيء دفعة واحدة
المس «تنزيل الكل بصيغة ZIP» في قسم «تحقّق من المظهر واحفظ» لحفظ كل الملفات في ملف ZIP واحد. ويمكنك نسخ كود HTML الخاص بموقعك من «نسخ HTML» أسفله.
انقر «تنزيل الكل بصيغة ZIP» في العمود الأيسر لحفظ favicon.ico وfavicon.svg وملفات PNG بكل الأحجام وsite.webmanifest في ملف ZIP واحد. ويمكنك نسخ كود HTML الخاص بموقعك من «نسخ HTML» أسفله.
متى تفيدك هذه الأداة
أيقونة فورية لموقعك
اصنع في ثوانٍ الأيقونة التي تظهر في علامة تبويب مدونتك أو موقعك الشخصي أو تطبيق الويب الذي بنيته، من حرف واحد أو رمز تعبيري. لا حاجة إلى برامج تصميم.
من يبني موقعه بنفسه
كل الأحجام المطلوبة دفعة واحدة
أنشئ favicon.ico وملفات PNG بحجم 16/32 بكسل وأيقونات iPhone وAndroid في خطوة واحدة، واحفظها معًا في ملف ZIP. لا داعي لتصدير كل حجم على حدة.
مطوّرو ومصمّمو الويب
من شعار متجرك أو شركتك
اختر صورة الشعار فقط، وستُضبط على الأحجام المناسبة لعلامة التبويب والشاشة الرئيسية. ويمكنك الإبقاء على الخلفية الشفافة كما هي.
المتاجر والشركات الصغيرة
لصفحات التدرّب على HTML
يأتي معها كود HTML جاهز للصق، فتعرف أي ملف تضعه وأين. تصلح أيضًا للصفحات التي تُنشأ في الدروس والتمارين.
متعلّمو البرمجة والمعلّمون
قبل أن تبدأ
- النصوص الدقيقة والصور الفوتوغرافية تتداخل وتصبح غير مقروءة بحجم 16 بكسل. يُفضَّل استخدام رمز واضح الشكل أو حرف أو حرفين.
- لا تنشئ الأداة صور مربعات Windows. الملفات التي تنشئها هذه الأداة تكفي المتصفحات والهواتف الحديثة.
- إذا أردت قص الهوامش حول الشعار أولًا، فاستخدم «قص الصور».
الملفات والأحجام التي تحتاجها أيقونة الموقع
أيقونة الموقع (favicon) هي الأيقونة التي تظهر في علامة تبويب المتصفح والإشارات المرجعية ونتائج البحث والشاشة الرئيسية للهاتف. ولأن كل مكان يستخدم حجمًا مختلفًا، يُجهَّز عادةً عدة ملفات من رسم واحد. تنشئ هذه الأداة كل ما تحتاجه المتصفحات والهواتف الحديثة دفعة واحدة، وتجهّز لك كود HTML للصقه في موقعك.
favicon.ico صيغة تجمع في ملف واحد ثلاثة أحجام: 16 و32 و48 بكسل، وتظهر حتى في المتصفحات القديمة واختصارات Windows. أما أيقونة الشاشة الرئيسية في iPhone (apple-touch-icon) فلا يمكن أن تكون شفافة، ويستدير iPhone زواياها تلقائيًا، لذلك تنشئها هذه الأداة مربعة بخلفية ملوّنة. أما favicon.svg فيمكنه تغيير ألوانه بحسب الوضع الداكن، وتستخدمه Chrome وFirefox وEdge في علامات التبويب.
الأسئلة الشائعة
جمعنا هنا ما يسأل عنه الناس كثيرًا حول إنشاء أيقونة الموقع ووضعها.
هل تُرسَل الصورة إلى أي مكان؟
لا. كل شيء، من تحميل الصورة إلى رسم الأيقونة وتجميعها في ملف ZIP، يجري داخل المتصفح على هذا الجهاز. لا تُرسَل الصورة التي تختارها ولا النص الذي تكتبه إلى أي مكان.
ما الصور الأنسب؟
الصور المربعة ذات الأشكال الواضحة. بحجم 16 بكسل تصبح الأيقونة صغيرة جدًا، فتتداخل النصوص الدقيقة والصور الفوتوغرافية. يُفضَّل استخدام جزء الرمز فقط من الشعار، أو إنشاء أيقونة من حرف أو حرفين عبر «نص». وللصور العريضة يمكنك اختيار «الصورة كاملة» أو «قص وملء» من «طريقة الملاءمة».
هل يمكنني إنشاء أيقونة موقع من رمز تعبيري؟
نعم. اكتب رمزًا تعبيريًا في «نص الأيقونة» لتحصل على أيقونة بالرمز التعبيري. يظهر شكل الرمز التعبيري بحسب الجهاز الذي تستخدمه (iPhone أو Android أو Windows وغيرها).
أين أضع الملفات التي أنشأتها؟
افتح ملف ZIP وضع كل الملفات التي فيه في جذر موقعك (المكان الذي يُفتح منه https://example.com/favicon.ico). ثم انسخ «كود HTML للصقه في موقعك» والصقه داخل <head> في كل صفحة.
هل يكفي favicon.ico وحده؟
إذا كان الهدف عرض الأيقونة في علامة تبويب المتصفح فقط، فملف favicon.ico وحده يكفي. أما إذا أردت أن تظهر الأيقونة بشكل جميل أيضًا عند الإضافة إلى الشاشة الرئيسية للهاتف، فضع كل الملفات الموجودة في ZIP والصق كود HTML.
هل يمكن جعل الخلفية شفافة؟
نعم. فعّل «خلفية شفافة» لتصبح الخلفية وما خارج الشكل شفافًا. لكن أيقونة الشاشة الرئيسية في iPhone (apple-touch-icon.png) تظهر أجزاؤها الشفافة سوداء، لذا تُملأ باللون المختار في «لون الخلفية».
هل تصلح لـ WordPress؟
نعم. في WordPress افتح «المظهر» ← «تخصيص» ← «هوية الموقع»، ثم اختر من «أيقونة الموقع» الملف android-chrome-512x512.png الموجود في ZIP (لأن WordPress يتطلب صورة بحجم 512 بكسل أو أكبر).
غيّرت أيقونة الموقع لكنها لم تتغير
قد تحتفظ المتصفحات بأيقونة الموقع لفترة طويلة. إذا لم تتغير بعد إعادة تحميل الصفحة، فامسح ذاكرة التخزين المؤقت للمتصفح أو انتظر قليلًا ثم تحقّق مرة أخرى.
هل يمكن إنشاء أيقونة موقع بصيغة SVG؟
نعم. يحتوي ملف ZIP على favicon.svg. في الوضع الداكن يتحول إلى الألوان المحددة في «الألوان في الوضع الداكن» (في الوضع التلقائي يُعكس السطوع فقط للألوان صعبة الرؤية). يُضمَّن النص كصورة بالخط المختار، ويلوّنه SVG فقط.
هل الأداة مجانية؟
نعم، مجانية. لا تحتاج إلى تسجيل، ولا توجد إعلانات، ولا حدّ لعدد الأيقونات التي تنشئها.
أدوات أخرى
- مولّد رمز QR
أنشئ رموز QR من الروابط أو النصوص أو بيانات Wi-Fi، مع اختيار الأشكال والألوان والأيقونة في المنتصف أو صورة.
- إنشاء صورة بنص عمودي
اكتب النص فقط لتُنشئ صورة (PNG) بالكتابة اليابانية العمودية. وتُوضع علامات الترقيم والأعداد الثنائية (تاته-تشو-يوكو) وفق قواعد الكتابة العمودية.
- تحويل الصور إلى WebP
حوّل صور PNG أو JPEG إلى WebP، وهي صيغة أخف تحافظ على جودة جيدة.
- تحويل الصور إلى PNG
حوّل صور JPEG أو WebP إلى PNG، وهي صيغة لا تفقد الجودة.
- تحويل الصور إلى JPG
حوّل صور PNG أو WebP إلى JPG (JPEG)، وهي صيغة تُفتح في كل مكان.
- تحويل HEIC إلى WebP
حوّل صور HEIC الملتقطة بهاتف iPhone إلى WebP، وهي صيغة أخف وأسهل استخدامًا.