مولّد أيقونات الموقع الحقيقي المجاني عبر الإنترنت

مولّد أيقونات مجاني عبر الإنترنت. ارفع صورة واحدة وحمّل حزمة أيقونات كاملة — favicon.ico وأيقونات PNG وأيقونة Apple touch وبيان الويب — جاهزة لعلامات تبويب المتصفح والإشارات المرجعية والشاشات الرئيسية في Android وiOS.

الصورة المربعة بمقاس 512 × 512 بكسل أو أكبر تعمل بشكل أفضل.

0%
من الحافة إلى الحافةمساحة للتنفس
0%
مربعدائرة
إعدادات التطبيق والتثبيت

مسار نسبي إلى الجذر، مثل / أو /icons/.

#FFFFFF

اختر صورة أو جرّب أيقونة نصية للبدء.

512 بكسل
علامة تبويب المتصفح
موقعي الإلكتروني
your-website.com
الشاشة الرئيسية
موقعي الإلكتروني
دقة بكسل مثالية؟

قارن المقاسات الصغيرة.

16px
32px
48px
64px

حمّل حزمة الأيقونات الخاصة بك

7 ملفات أيقونات وبيان ويب وتعليمات تثبيت.

داخل تنزيلك

9 ملفات
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

رمز HTML

HTML

ارفع ملفاتك، ثم أضف هذا داخل <head> لموقعك. تتحدّث المسارات وفقًا لإعداداتك.

index.html
من الرفع حتى الانتشار في كل مكان

كيف يعمل

تخلَّص من تغيير المقاسات اليدوي والتخمين بشأن الصيغ.
انتقل من فكرتك إلى موقع ويب معروف في ثلاث خطوات.

01 /

قدّم هويتك.

ارفع شعارك أو أنشئ أيقونة من حرف. الأشكال البسيطة والتباين القوي واللوحة المربعة هي أفضل نقطة بداية لك.

02 /

اضبط التفاصيل بدقة.

اختر خلفية واضبط التباعد وتحقق من المعاينات المباشرة. تأكد من أن علامتك تظل معروفة حتى في علامة تبويب متصفح صغيرة.

03 /

امنح كل علامة تبويب موطنًا.

حمّل حزمتك الكاملة وارفع الملفات والصق رمز HTML. علامتك التجارية جاهزة لعلامات تبويب المتصفح والإشارات المرجعية والشاشات الرئيسية.

مصمم للأشياء الصغيرة

يعمل عبر المتصفحات والأجهزة

غالبًا ما تكون أيقونة الموقع أصغر جزء في علامتك التجارية، ومع ذلك يجب أن تبدو مقصودة. أنشئ المقاسات المناسبة للأماكن التي يجد فيها الناس موقعك ويحفظونه ويعودون إليه.

أنشئ أيقونة موقعك
المتصفحات اليوميةICO + PNG لعلامات التبويب والإشارات المرجعية والاختصارات16-48 بكسل
أجهزة Appleأيقونة شاشة رئيسية مخصصة وغير شفافة180 بكسل
تطبيقات Android والويبأيقونات عالية الدقة مع بيان ويب192 / 512
الدليل السريع في دقيقتين

التثبيت

لا إعداد معقد.
فقط عدد قليل من الملفات في المكان الصحيح.

انتقل إلى رمز HTML الخاص بك
1

حمّل حزمة الأيقونات واستخرجها

اختر مصدرك واضبط المعاينة، ثم اختر "تحميل حزمة الأيقونات". استخرج ملف ZIP للحصول على ملفات الأيقونات السبعة جميعها وsite.webmanifest ودليل التثبيت النصي.

2

ضع الملفات حيث يمكن لموقعك تقديمها

ارفع الأيقونات وبيان الويب إلى الجذر العام لموقعك. إذا كنت تفضّل مجلدًا فرعيًا، فاضبط "دليل الأيقونات" ضمن إعدادات التطبيق قبل التنزيل. على سبيل المثال، يعني /icons/ أنه يجب أن تكون ملفاتك متاحة على your-site.com/icons/.

3

أضف رمز HTML وتحقق من عملك

انسخ الرمز الناتج داخل <head> لكل صفحة أو في التخطيط المشترك لديك. أزل وسوم الأيقونات القديمة المتعارضة. افتح روابط الأيقونات مباشرة للتأكد من تحميلها، ثم زر موقعك في نافذة خاصة لتجنب الأيقونات المخزنة مؤقتًا القديمة.

أيقونة أفضل تبدأ من هنا

نصائح تصميم أيقونة الموقع

تفاصيل أقل. شخصية أكثر.

تختفي الخطوط الرفيعة والكلمات الطويلة في المقاسات الصغيرة. استخدم رمزًا مميزًا أو حرفًا أحاديًا أو حرفًا واحدًا بدلًا من حشر شعارك كاملًا في مربع.

امنحه بعض المساحة.

استخدم الحشوة لإبقاء علامتك بعيدة عن الحواف. عاين علامة تبويب المتصفح والشاشة الرئيسية معًا: قد تبدو الصورة نفسها مختلفة جدًا عند كل مقياس.

اجعل التباين مهمًا.

يمكن أن تختفي الأيقونات الشفافة أمام سمة متصفح فاتحة أو داكنة. تمنحك الخلفية الصلبة تباينًا متوقعًا. تحقق من السمتين معًا قبل النشر.

ابدأ بمصدر حاد.

توفر الصورة الكبيرة النظيفة للمولّد تفاصيل أكثر للعمل بها. لا يمكن لتكبير صورة صغيرة استعادة المعلومات المفقودة. استخدم ملف SVG أو مصدرًا بمقاس 512 بكسل عندما يكون ذلك ممكنًا.

التفاصيل الدقيقة

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

كل ما قد ترغب في معرفته عن أيقونة موقعك الجديدة.

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

أيقونة الموقع هي الأيقونة الصغيرة التي تمثل موقعك في علامات تبويب المتصفح والإشارات المرجعية والسجل وأحيانًا نتائج البحث. تساعد الأيقونة الواضحة والمتسقة الزوار على تمييز موقعك بين العديد من علامات التبويب المفتوحة. تعمل أيقونات الشاشة الرئيسية لغرض مشابه عندما يحفظ شخص ما موقعك على هاتفه.

أي صورة يجب أن أرفع؟

ابدأ بصورة PNG أو SVG أو JPEG أو WebP مربعة، ويفضل أن تكون بمقاس 512 × 512 بكسل على الأقل. تعمل ملفات PNG الشفافة وملفات SVG المكتفية بذاتها بشكل ممتاز. أبقِ التصميم بسيطًا: عادة ما يكون الرمز أو الحرف الأول أوضح للقراءة من الشعار النصي الكامل عند 16 بكسل. تُدعم الملفات حتى 10 م.ب والصور حتى 4096 بكسل لكل ضلع.

هل هذه الأداة مجانية؟ هل يتم رفع صوري؟

المولّد مجاني الاستخدام، دون حساب أو علامة مائية. يتم فك تشفير الصور والمعاينات وإنشاء ملفات ZIP في متصفحك. لا يتم رفع صورتك الأصلية إلى خادم. قد يقوم متصفحك بتنزيل أصول الموقع عند زيارتك الأولى، لكن المولّد لا يرسل صورتك إلى أي مكان.

لماذا تحتوي أيقونات Apple وAndroid على خلفية؟

تبدو أيقونات الشاشة الرئيسية أفضل على لوحة مربعة صلبة. تقوم هذه الأداة بتسوية تلك الصور على لون خلفيتك المحدد، حتى عند تفعيل الأيقونات الشفافة للمتصفح. يطبق الجهاز معالجته الخاصة للزوايا. تستخدم تصديرات Android الغرض القياسي "any"؛ فهي ليست أيقونات قابلة للإخفاء معتمدة.

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

تخزن المتصفحات أيقونات الموقع مؤقتًا بشكل كبير. تحقق أولًا من أن كل رابط مُنشأ يُفتح مباشرة وأن صفحتك تحتوي مجموعة واحدة مقصودة فقط من روابط الأيقونات. ثم جرّب نافذة خاصة أو امسح ذاكرة التخزين المؤقت للموقع. للحصول على تحديث موثوق، استخدم مجلدًا جديدًا مثل /icons-v2/ وحدّث روابط HTML. قد تستغرق محركات البحث وقتًا أطول لإعادة فهرسة الأيقونة.

هل يجعل بيان الويب موقعي تطبيق ويب تقدميًا (PWA)؟

لا. يوفر البيان اسم التطبيق والألوان والأيقونات، لكنه لا يضيف وظائف عدم الاتصال أو عامل خدمة. يعتمد قابلية التثبيت على متصفحك وإعدادات موقعك، بما في ذلك HTTPS. يستخدم البيان المُنشأ / كرابط بدء له؛ عدّله إذا كان تطبيقك يعيش في مسار فرعي.

هل يمكنني استخدام هذه الملفات مع WordPress أو Shopify أو Astro؟

نعم. الملفات عبارة عن صور PNG وICO قياسية. في Astro، ضعها في public/ وأضف الوسوم المُنشأة إلى رأس التخطيط المشترك لديك. بالنسبة إلى WordPress أو Shopify، استخدم إعداد أيقونة الموقع في المنصة عند الإمكان، أو ارفع الملفات واضبط رأس سمتك. قد تتحكم المنصات المستضافة في أسماء الملفات وعناوين URL، لذا عدّل المسارات لتطابق ذلك.