إنشاء أيقونة الموقع (Favicon)
كل الأيقونات التي يحتاجها موقعك، مصنوعة من شعارك وجاهزة للرفع.
أنشئ أيقونة موقعك (Favicon) كاملة انطلاقًا من شعارك: أيقونة تبويب المتصفح، وأيقونات الشاشة الرئيسية في iPhone وAndroid، والملف التعريفي (manifest)، وشيفرة HTML لربطها. ارفع صورة PNG أو JPG أو WebP أو SVG ونزّل ملف ZIP فيه كل شيء، بلا تسجيل وبلا علامة مائية.
كيف تنشئ أيقونة لموقعك
- اختر شعارك أو أيقونتك بصيغة PNG أو JPG أو WebP أو SVG؛ ويُفضّل أن تكون مربعة وبحجم 512 بكسل على الأقل.
- اختر أن تظهر الصورة كاملة أو أن تملأ المربع، ولون خلفية أيقونة Apple.
- اضغط «إنشاء الأيقونة» ونزّل ملف ZIP.
- ارفع الملفات إلى المجلد الجذر لموقعك، والصق الشيفرة الموجودة في head.html داخل وسم head في صفحاتك.
ماذا تتضمن الحزمة
| الملف | فائدته |
|---|---|
favicon.ico |
أيقونة التبويب التقليدية، بأحجام 16 و32 و48 بكسل في ملف واحد. تبحث عنها المتصفحات حتى لو لم تربطها. |
favicon-16x16.png وfavicon-32x32.png |
أيقونات التبويب والمفضلة في المتصفحات الحديثة. |
apple-touch-icon.png |
أيقونة بحجم 180 بكسل يستخدمها iPhone وiPad عند إضافة موقعك إلى الشاشة الرئيسية. |
android-chrome-192x192.png وandroid-chrome-512x512.png |
أيقونات Android وتطبيقات الويب القابلة للتثبيت. |
site.webmanifest |
الملف التعريفي الذي يعلن أيقونات Android ولون موقعك. |
head.html |
الوسوم اللازمة لربط الأيقونات من صفحاتك. |
كيف تثبّتها في موقعك
- فك ضغط الملف وارفع كل الملفات، ما عدا
head.html، إلى المجلد الجذر لموقعك (حيث توجد الصفحة الرئيسية). - انسخ هذه الوسوم، الموجودة أيضًا في
head.html، داخل وسمheadفي صفحاتك:
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- إن شئت، اكتب اسم موقعك في
nameوshort_nameداخلsite.webmanifest.
تحتفظ المتصفحات بنسخة مخزنة من الأيقونة: إذا لم ترَ الجديدة فورًا، فأعد تحميل الصفحة تحميلًا كاملًا أو انتظر قليلًا.
احتواء أم ملء
كل الأيقونات مربعة. إذا لم تكن صورتك مربعة، يمكنك احتواؤها فتظهر كاملة بهوامش شفافة، أو ملء المربع مع قص ما يزيد من الجانبين. ومع شعار أفقي فيه نص، يكون من الأفضل عادةً استخدام رمز الشعار وحده مقصوصًا بشكل مربع.
لا يمكن أن تكون أيقونة Apple شفافة: سيملأ نظام iOS خلفيتها بالأسود. لذلك ننشئها بلون الخلفية الذي تختاره، وهو أيضًا لون موقعك على Android. أما باقي الأيقونات فتحافظ على شفافيتها.
نصائح لنتيجة جيدة
- ابدأ من صورة كبيرة، 512 × 512 بكسل على الأقل، والأفضل ملف SVG: منها تُحسب الأيقونات الصغيرة.
- اجعلها بسيطة: بحجم 16 بكسل لا تُقرأ النصوص ولا التفاصيل الدقيقة. رمز أو حرف أول بألوان متباينة يعمل أفضل بكثير.
وإذا كنت تحتاج إلى ملف .ico فقط، يمكنك تحويل PNG إلى ICO.
القيود
- صورة واحدة في كل مرة، حتى 20 MB و100 ميغابكسل.
- لا نغيّر موقعك: عليك أن ترفع الملفات وتضيف الوسوم بنفسك، أو أن تطلب ذلك ممن يديره.
الأسئلة الشائعة
ما الحجم المناسب للصورة لإنشاء أيقونة الموقع؟
كلما كانت أكبر كان أفضل: 512 × 512 بكسل على الأقل، أو ملف SVG. منها تُحسب كل الأيقونات، من 512 إلى 16 بكسل.
أين أرفع ملفات أيقونة الموقع؟
إلى المجلد الجذر لموقعك، وهو المجلد نفسه الذي فيه الصفحة الرئيسية. ثم الصق الوسوم الموجودة في head.html داخل وسم head في صفحاتك.
لماذا لا أرى الأيقونة الجديدة في متصفحي؟
لأن المتصفحات تحتفظ بنسخة مخزنة من الأيقونة. أعد تحميل الصفحة تحميلًا كاملًا، أو افتحها في نافذة خاصة، أو انتظر قليلًا حتى تتحدث.
لماذا لأيقونة Apple خلفية ملونة؟
لأن iOS لا يدعم الشفافية في أيقونات الشاشة الرئيسية وسيملأ الخلفية بالأسود. لذلك ننشئها بلون الخلفية الذي تختاره لتظهر بشكل جيد.
هل يمكنني إنشاء أيقونة موقعي في WordPress؟
في WordPress خيار خاص بذلك، هو «أيقونة الموقع» (في المظهر › تخصيص › هوية الموقع، أو في الإعدادات العامة حسب الإصدار والقالب): ترفع صورة مربعة فينشئ الأحجام بنفسه. حزمة هذه الأداة مخصصة للمواقع التي يمكنك رفع الملفات إليها وتعديل شيفرتها.