مولد أيقونة الموقع Favicon
يصنع من صورة واحدة حزمة favicon كاملة: أيقونات PNG بمقاسات 16 إلى 512، وملف ICO، وملف site.webmanifest، ووسوم HTML جاهزة.
جرّب أداة أخرى
اخترناها لتكمل هذه الأداةمولد أيقونة الموقع من Tooleem يأخذ صورة PNG أو JPG، ويفضل أن تكون مربعة، ويصنع منها ملف ZIP فيه كل ما يحتاجه موقع حديث: أيقونتا favicon بمقاسي 16 و32 بكسل، وأيقونة Apple touch بمقاس 180، وأيقونتا Android Chrome بمقاسي 192 و512، وملف favicon.ico يضم 16 و32 و48، وملف site.webmanifest باسم موقعك ولون السمة. وتنسخ وسوم HTML لوضعها في رأس الصفحة. يجري كل ذلك في متصفحك.
طريقة الاستخدام
- 01اكتب اسم الموقع ولون السمةيدخل الاسم ولون السمة في ملف site.webmanifest، ويستخدم الهاتف الاسم عند إضافة الموقع إلى الشاشة الرئيسية.
- 02أضف الشعاراسحب صورة PNG أو JPG حتى 10 ميغابايت؛ الصورة المربعة بخلفية شفافة تعطي أفضل نتيجة.
- 03نزّل الحزمة وانسخ الوسومفك ملف ZIP في جذر موقعك، ثم الصق وسوم link المعروضة داخل وسم head.
متى تفيدك هذه الأداة؟
- إطلاق موقع جديدتجهيز كل الأيقونات المطلوبة دفعة واحدة بدلاً من تصديرها مقاساً مقاساً.
- إضافة الموقع إلى شاشة الهاتفأيقونات Apple وAndroid وملف manifest تجعل الموقع يظهر بأيقونة واضحة عند حفظه على الشاشة الرئيسية.
- تحديث شعار قديماستبدال كل ملفات الأيقونة القديمة بنسخة جديدة متسقة.
أمثلة
- شعار مربع لمدونةشعار بمقاس 1024 × 1024 يعطي سبعة ملفات حادة في كل المقاسات، من 16 بكسل في تبويب المتصفح حتى 512 بكسل لشاشة الهاتف.
- شعار عريضصورة بنسبة عرض كبيرة تُصغَّر لتتسع داخل كل مربع في المنتصف، مع فراغ شفاف حولها، فلا تُقص ولا تتمدد.
- موقع باسم عربياسم الموقع العربي يُكتب في ملف manifest كما هو، ويُستخدم أول 12 حرفاً منه اسماً مختصراً للأيقونة على الهاتف.
نصائح لنتيجة أفضل
- صمم للمقاس الصغيرفي 16 بكسل لا يُقرأ النص الطويل. رمز بسيط أو الحرف الأول من الاسم يعمل أفضل.
- ابدأ بمقاس 512 أو أكبرالصورة الأصغر من 512 بكسل تُكبَّر لأكبر الأيقونات، فتفقد حدتها.
- انتظر قبل الحكمالمتصفحات تحتفظ بالأيقونة القديمة في ذاكرتها مدة. افتح الموقع في نافذة خاصة للتأكد من ظهور الجديدة.
ما هو favicon؟
favicon هي الأيقونة الصغيرة التي تظهر بجانب عنوان الصفحة في تبويب المتصفح وفي المفضلة وسجل التصفح. تطورت لتشمل أيقونات أكبر تستخدمها الهواتف عند إضافة الموقع إلى الشاشة الرئيسية، ولهذا يحتاج الموقع الحديث عدة ملفات بمقاسات مختلفة.
ماذا يوجد في الحزمة؟
favicon-16x16.png وfavicon-32x32.png لتبويب المتصفح، وapple-touch-icon.png بمقاس 180 لأجهزة Apple، وandroid-chrome-192x192.png وandroid-chrome-512x512.png للأندرويد ولملف manifest، وfavicon.ico بمقاسات 16 و32 و48 للتوافق مع المتصفحات القديمة، وsite.webmanifest الذي يربط الاسم والأيقونات ولون السمة.
ما الفرق بين هذه الأداة وتحويل PNG إلى ICO؟
أداة تحويل PNG إلى ICO تصنع ملف ICO واحداً بالمقاسات التي تختارها. أما مولد favicon فيصنع الحزمة الكاملة التي يحتاجها موقع اليوم: صور PNG المنفصلة وملف ICO وملف manifest ووسوم HTML.
أسئلة شائعة
أين أضع الملفات بعد التنزيل؟
فك ملف ZIP في المجلد الجذري لموقعك، أي المجلد الذي يحتوي الصفحة الرئيسية، ثم الصق وسوم link في رأس الصفحة.
هل تبقى الخلفية الشفافة؟
نعم. تُرسم الأيقونات على خلفية شفافة، فتبقى شفافية صورة PNG كما هي. صور JPG لا تحمل شفافية أصلاً.
ماذا يفعل لون السمة؟
يُكتب في ملف site.webmanifest كلون للسمة والخلفية، فيستخدمه الهاتف مثلاً في شريط النظام أو شاشة البداية.
هل تُرفع الصورة إلى خادم؟
لا. تُرسم كل المقاسات ويُبنى ملف ZIP داخل متصفحك.
لماذا لا يظهر الشعار الجديد في التبويب؟
غالباً بسبب ذاكرة المتصفح المؤقتة. أعد تحميل الصفحة بالكامل أو افتحها في نافذة خاصة.