صانع أيقونة الموقع (Favicon)
تحتاج الأيقونة المصغّرة (favicon) إلى عدة أحجام: 16 و32 و48 بكسل للمتصفحات، و180 بكسل لأجهزة Apple، و192 و512 بكسل لأيقونات تطبيقات الويب. تنشئها الأداة كلها مع ملف favicon.ico متعدد الأحجام دون رفع أي شيء.
طريقة الاستخدام
- اختر نص أو إيموجي واكتب من حرف إلى ثلاثة أحرف، أو اختر صورة واسحب شعارك (حتى 50 MB). الصورة غير المربعة تُقص من المنتصف.
- اختر لون الخلفية ولون النص والشكل. فعّل الخلفية الشفافة إذا أردت زوايا شفافة، أما أيقونة Apple فتبقى خلفيتها مصمتة دائمًا.
- نزّل كل ملف بزره، ثم انسخ وسوم link إلى قسم head في صفحتك، والصق محتوى manifest في ملف باسم site.webmanifest. ضع كل الملفات في المجلد الجذري لموقعك.
طريقة الحساب
يُرسم كل مقاس على لوحة canvas مستقلة. تُصغَّر الصورة الكبيرة إلى النصف على مراحل قبل التحجيم الأخير، فتبقى الخطوط الرفيعة مقروءة بمقاس 16 px. ويُوسَّط النص حسب ارتفاعه المقيس ويُصغَّر تلقائيًا إذا لم يتسع.
تبني هذه الصفحة ملف favicon.ico بايتًا بايتًا: ترويسة من 6 بايت، ثم مدخل من 16 بايت لكل مقاس، ثم ملفات PNG نفسها. تقرأ المتصفحات الحديثة وWindows صيغة PNG داخل ICO، فيغطي ملف واحد مقاسات 16 و32 و48 px.
لا يُرسل شيء إلى أي خادم. متصفحك يقرأ صورتك، والأيقونات موجودة في هذا التبويب فقط، وتُحفظ مباشرة على جهازك عند الضغط على تنزيل.
أين يُستخدم كل مقاس
| الملف | المقاس (px) | الاستخدام |
|---|---|---|
| favicon.ico | 16, 32, 48 | تبويبات المتصفح، المتصفحات القديمة، Windows |
| favicon-32x32.png | 32 | التبويبات والإشارات المرجعية على الشاشات عالية الكثافة |
| apple-touch-icon.png | 180 | الشاشة الرئيسية في iPhone وiPad |
| android-chrome-192x192.png | 192 | الشاشة الرئيسية في Android |
| android-chrome-512x512.png | 512 | شاشة البدء في Android والتطبيقات القابلة للتثبيت |
أين تضع الملفات
ارفع كل الملفات إلى المجلد الأعلى في موقعك، بحيث يفتح العنوان yoursite.com/favicon.ico الأيقونة. تطلب المتصفحات /favicon.ico من تلقاء نفسها حتى دون وجود وسم. وبعد تغيير الأيقونة قد تعرض التبويبات القديمة لفترة لأن المتصفحات تخزنها مؤقتًا. افتح عنوان الأيقونة مباشرة وأعد التحميل للتحقق.
أسئلة شائعة
هل يُرفع شعاري؟
لا. تُرسم الصورة وتُرمَّز داخل تبويب المتصفح هذا. لا رفع ولا حساب ولا نسخة محفوظة في أي مكان آخر.
ما الملفات التي أحتاجها فعلًا؟
ملف favicon.ico في جذر الموقع يكفي لكل المتصفحات تقريبًا. وإضافة PNG بمقاس 32 px وأيقونة Apple touch بمقاس 180 px وأيقونتي 192 و512 px تغطي التبويبات والإشارات المرجعية والشاشة الرئيسية في iPhone والتثبيت على Android.
لماذا أيقونة Apple ليست مستديرة ولا شفافة؟
يدوّر نظام iOS الزوايا بنفسه ويعرض المناطق الشفافة باللون الأسود. لذا تكون أيقونة 180 px مربعًا كاملًا بخلفية مصمتة لتظهر جيدًا على الشاشة الرئيسية.
بأي صورة أبدأ؟
صورة PNG مربعة لا تقل عن 512 × 512 بكسل، والشعار في وسطها مع مساحة صغيرة حوله. التفاصيل الدقيقة يصعب تمييزها بمقاس 16 px، فالعلامة البسيطة أو الحرف الواحد هو الأنسب.
لماذا يبدو الإيموجي مختلفًا على جهاز آخر؟
يُرسم الإيموجي بخطوط جهازك، فتستخدم الأيقونة رسوم نظامك. لكن ملف PNG المحفوظ لا يتغير بعد ذلك، فيرى كل الزوار الصورة نفسها.