مجانًا · بدون تسجيل · داخل المتصفح

إنشاء أيقونة الموقع

أضف شعارك لتحصل على مجموعة أيقونات كاملة، من أيقونة علامة التبويب بحجم 16 بكسل إلى أيقونة التطبيق بحجم 512 بكسل، مع شيفرة HTML جاهزة للإضافة. تتم العملية داخل المتصفح ولا تُرفع صورتك إلى الخادم.

أفلت شعارك هنا

PNG أو JPG أو WebP أو SVG. الأفضل صورة مربعة بدقة 512 بكسل على الأقل.

تُنشأ في متصفحك، ولا تُرفع صورتك إلى الخادم.

جرّب أحد أمثلتنا

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

أيقونة الموقع هي الصورة المربعة الصغيرة التي تمثّل موقعك. جاء اسمها من «أيقونة المفضلة»، لأن أول متصفح استخدمها عرضها بجانب المواقع المحفوظة في قائمة المفضلة.

تظهر بجانب عنوان الصفحة في علامة التبويب بعرض 16 بكسل أو 32 للشاشات الأدق. وتمثّل موقعك في المفضلة وسجل التصفح. عند حفظ الموقع على شاشة الهاتف الرئيسية، تصبح أيقونة تطبيق. وتعرضها Google بجانب اسم الموقع في نتائج البحث.

مهمتها واحدة في كل مكان: أن يسهل التعرّف على موقعك بين الأيقونات الأخرى.

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

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

تستخدم علامات التبويب والمفضلة والسجل favicon.ico، وهو ملف واحد يتضمن نسخًا بحجم 16 و32 و48 بكسل. هذه أقدم صيغة؛ حتى إن لم تحدّد الصفحة أيقونة، يبحث المتصفح عن favicon.ico في المجلد الرئيسي للموقع.

إذا بدأت بـ SVG، تحصل أيضًا على favicon.svg للمتصفحات التي تدعمه. يتكوّن من أشكال لا بكسلات، لذا يبقى واضحًا على كل شاشة.

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

تستخدم هواتف Android والمواقع المثبّتة كتطبيقات من المتصفح ملفي icon-192.png وicon-512.png. يعثر المتصفح عليهما عبر site.webmanifest، وهو ملف نصي صغير يحدّد اسم الموقع إن أدخلته، ومواقع الأيقونات الكبيرة.

ملفات PNG المنفصلة من 16 إلى 48 بكسل بدائل للخدمات التي تطلب هذه الصيغة. وفي نتائج البحث، تقرأ Google روابط الأيقونات من HTML الصفحة الرئيسية.

كيف تضيف الملفات إلى موقعك

إذا كنت أنت أو مطوّرك تعدّلان ملفات الموقع، فستحتاجان إلى خطوتين فقط.

أولًا، فك ضغط التنزيل وضع الملفات في المجلد الرئيسي للموقع، أي المجلد الأعلى الذي يحتوي الصفحة الرئيسية. للتحقق، أضف /favicon.ico إلى عنوان موقعك؛ ينبغي أن تُفتح الأيقونة.

ثانيًا، ألصق أسطر HTML من README، وهي معروضة في الأداة أيضًا، داخل قسم head في صفحاتك؛ هذا هو القسم الذي يحمل عنوان الصفحة في أعلى HTML. يوجد سطر لملف ICO وآخر لأيقونة شاشة Apple الرئيسية وآخر لملف تعريف التطبيق، ويُضاف SVG إن توفر.

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

إذا استخدمت منصة لإنشاء المواقع، يمكنك تخطّي الخطوتين: ارفع icon-512.png في إعداد أيقونة الموقع، وستضيف المنصة HTML نيابة عنك.

كيف تجعل الشعار واضحًا بحجم 16 بكسل

عند مقاس 16 × 16، تتكوّن الأيقونة كلها من 256 مربعًا لونيًا صغيرًا. معظم الشعارات لم تُصمّم لهذا الحجم.

ابدأ بالرمز لا الاسم. اسم من ثمانية أحرف داخل 16 بكسل يترك لكل حرف عرض بكسلين فقط. إن لم يوجد رمز، استخدم الحرف الأول كبيرًا وعريضًا؛ الحروف العريضة تحافظ على وضوحها أكثر من الرفيعة.

قلّل التفاصيل بعد ذلك. تندمج الخطوط الدقيقة والفجوات الصغيرة مع محيطها، وتصبح العبارة التعريفية بقعة غير مقروءة.

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

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

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

متى تحتاج رسم رمز مبسّط بدل تصغيره؟

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

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

تحتاج رمزًا جديدًا؟ يصمّم مولّد الشعارات بالذكاء الاصطناعي انطلاقًا من اسم علامتك ووصف قصير إن أردت. تأتي شعارات قوالب الشعارات بملف منفصل للرمز إن وُجد، وكل شعار تشتريه منا يتضمن ملفات أيقونات الموقع.

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

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

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

صورة مربعة لا يقل كل ضلع فيها عن 512 بكسل. أكبر أيقونة في المجموعة 512 بكسل، لذا يلزم تمديد PNG أو JPG أو WebP الأصغر، فتقل حدة الأيقونات الكبيرة. تنبّهك الأداة عند ذلك. لا يقيّد الحجم ملف SVG لأنه يتكوّن من أشكال لا بكسلات. الشعار العريض يملأ شريطًا رفيعًا داخل المربع، فابدأ بالرمز أو الحرف الأول.

تحتاجها جميعًا، لأن المتصفحات والهواتف تطلب ملفات مختلفة. تحدّد شيفرة HTML الملف المناسب لكل منها. تفهم كل المتصفحات ملف ICO. أما PNG فللهواتف والتطبيقات المثبّتة، مع نسخ صغيرة بديلة. ويبقى SVG واضحًا على كل شاشة في المتصفحات الداعمة، وتحصل عليه عندما تبدأ بملف SVG.

غالبًا يعرض المتصفح نسخة مخزّنة. يحتفظ المتصفح بأيقونات المواقع أطول من بقية الصفحة، لذلك قد تبقى القديمة بعد نشر الجديدة. جرّب إعادة تحميل كاملة: Ctrl+Shift+R على Windows أو Cmd+Shift+R على Mac، وOption+Cmd+R في Safari. إن لم تتغير، افتح عنوان الموقع متبوعًا بـ /favicon.ico وحدّثه، أو افتح نافذة خاصة. تتحدّث النسخ لدى الآخرين مع الوقت.

في إعدادات المنصة لا في مجلد. تتضمن معظم منصات المواقع والمتاجر إعدادًا لأيقونة الموقع ترفع إليه PNG مربعًا. اختر icon-512.png، أكبر ملف في التنزيل، لتتوفر دقة كافية لصنع المقاسات الأصغر. إذا طُلب مقاس محدد، اختر الملف المطابق. تضيف المنصة HTML تلقائيًا، فلا تحتاج خطوات README.

تلتقط Google الأيقونة الجديدة عند زيارة برنامج الزحف للصفحة الرئيسية مرة أخرى. لا موعد ثابت لذلك. تحتاج Google صورة مربعة ورابط الأيقونة في HTML الصفحة الرئيسية، فتحقّق منهما. بعد ذلك تقرر Google ما تعرضه ومتى؛ امنحها وقتًا.