اتبع هذا المثال العملي، ثم قم بتكييف نفس عناصر التحكم مع صورتك الخاصة. فتح مولد أيقونة الموقع / ICO.
اختر شعارًا واضحًا أو ابدأ بالأحرف الأولى
افتح مولد Favicon / ICO واختر صورة (Image). قم بتحميل PNG أو JPG أو JPEG أو WebP أو GIF، أو حدد تجربة عينة (Try a sample). يستخدم المثال العملي favicon-orbit.png، وهو علامة مدار بنفسجية بحجم 512 × 512 بكسل مع زوايا شفافة. المدخلات هي 202,491 بايت.
بالنسبة لعلامة تجارية ليس لديها شعار نهائي، حدد نص (Text) في صفحة الأداة. أدخل حرفًا أو حرفين واختر متابعة (Continue). يوفر المحرر خطوط Modern sans و Classic serif و Monospace، بالإضافة إلى ألوان نص وخلفية منفصلة. يتم قبول ما يصل إلى ثلاثة أحرف، ولكن قد يصعب التعرف على الأحرف الإضافية عند الأحجام الصغيرة.
احتفظ بالعمل الفني الأصلي. ينشئ المولد ملفات أيقونات جديدة ولا يستبدل المصدر. تصبح مدخلات GIF أيقونة ثابتة بدلاً من أيقونة مفضلة متحركة.
بالنسبة للنمط المونوغرامي، تبدأ قائمة الخطوط بثلاثة أنماط مضمنة. حدد استخدام خطوط النظام (Use system fonts) على متصفح سطح مكتب مدعوم واسمح بالوصول لإضافة الخطوط المثبتة على جهازك. استخدم أسهم التنقل السابقة والتالية لمقارنة الخطوط المتجاورة، أو اختر عائلة وافحص المعاينة المباشرة، خاصة عند 16 بكسل. تبقى الخطوط على جهازك؛ تعمل الأنماط المضمنة بدون إذن.
استخدم صورة ظلية بسيطة. يمكن أن تبدو الصورة الفوتوغرافية المفصلة جذابة عند 512 بكسل ولكنها تصبح نقطة غير واضحة عند 16 بكسل.
تحسين التأطير وفحص المعاينات الصغيرة
يعرض المحرر علامات تبويب متصفح فاتحة وداكنة بالإضافة إلى معاينات بأحجام الأيقونات الشائعة. تحقق من مثال 16 بكسل أولاً؛ إنه الاختبار الأكثر صرامة لما إذا كانت العلامة تظل قابلة للتعرف عليها. تمثل معاينة Apple Touch تصديرًا بحجم 180 بكسل ويتم عرضها بشكل أصغر في مساحة العمل.
على الهاتف، افتح الإعدادات (Settings). اترك إنشاء من (Create from) مضبوطًا على صورة محملة (Uploaded image) وملاءمة الصورة (Image fit) مضبوطة على إظهار الصورة بالكامل (Show the whole image). بالنسبة لهذه العينة، اضبط المساحة حول المحتوى (Space around content) على 0 وقم بتمكين خلفية شفافة (Transparent background). يحتوي المصدر بالفعل على شكله البنفسجي المستدير وهوامش واضحة، لذا فهو لا يحتاج إلى خلفية ملونة إضافية.
مع مصدر مختلف، يحافظ إظهار الصورة بالكامل (Show the whole image) على حوافها، بينما قد يقوم ملء الأيقونة (Fill the icon) بقصها. يحدد المربع المستدير والمربع والدائرة الشكل الخارجي. تحافظ الخلفية الشفافة (Transparent background) على المناطق الواضحة ولكن لا يمكنها إزالة خلفية غير شفافة مرسومة بالفعل في صورة. راجع أصغر معاينة بعد كل تغيير في التأطير.
يمكن لشعار ذي زوايا شفافة أن يلتقط إطارًا ثانيًا غير مرغوب فيه إذا أضفت خلفية غير شفافة منفصلة. راجع كلا خياري الخلفية.
المثال في هذا الدليل
جرب عينة: favicon-orbit.png، 512 × 512 بكسل. صورة مرفوعة؛ عرض الصورة كاملة؛ مربع مستدير؛ مساحة حول المحتوى 0%؛ تم تفعيل الخلفية الشفافة؛ حزمة أيقونة الموقع (ZIP)؛ اسم الموقع My website.
- صورة المصدر
- 512 × 512 PNG · 202,491 بايت
- ICO إطار
- 16، 24، 32، 48، 64، 128 و 256 بكسل
- حزمة
- 9 ملف · 304,351 بايت
- النتيجة المعروضة
- إطار ICO فعلي بأبعاد 256 × 256
اختر ICO متعدد الأحجام أو حزمة الموقع
تحت قسم التنزيل (Download)، اختر حزمة أيقونة الموقع (ZIP) لهذا المثال. اترك اسم الموقع (Website name) كما هو "My website" للعينة، أو استبدله باسم علامتك التجارية الحقيقي لمشروعك الخاص. يُستخدم هذا الاسم في ملف site.webmanifest؛ ولا يتم إضافته كنص فوق الصورة.
اختر بدء (Start). يقوم المتصفح بإنشاء favicon.ico بسبعة إطارات مع صور مربعة بأبعاد 16 و 24 و 32 و 48 و 64 و 128 و 256 بكسل. كما ينشئ أيقونات PNG بأبعاد 16 و 32 و 48 و 180 و 192 و 512 بكسل، بالإضافة إلى ملف manifest وتعليمات التثبيت. النتيجة هي ملف ZIP واحد بدلاً من زر تنزيل منفصل لكل أيقونة.
إذا كنت تحتاج فقط إلى favicon.ico كلاسيكي، فاختر ICO متعدد الأحجام بدلاً من ذلك. هذا مفيد عندما تقبل منصة الموقع رفع ملف ICO ولا تحتاج إلى حزمة منفصلة.
الحزمة عبارة عن مجموعة من أصول أيقونات الموقع. وهي لا تحول الموقع تلقائياً إلى تطبيق ويب تقدمي (PWA).
تنزيل وتثبيت والتحقق من ملفات الأيقونات
يقوم التنزيل بحفظ ملف website-icons.zip. يحتوي المثال العملي الفعلي على تسعة ملفات وحجمه 304,351 بايت. تُظهر المقارنة أعلاه المصدر بدقة 512 بكسل بجانب الإطار الفعلي بدقة 256 بكسل المستخرج من ICO المُصدّر، بدلاً من لقطة شاشة محاكاة للمتصفح.
قم بفك ضغط ملف ZIP، وارفع ملفات الأيقونات إلى المجلد الرئيسي لموقعك واقرأ INSTALL.txt. يتضمن ذلك وسوم رابط HTML لـ ICO وأيقونة PNG وأيقونة Apple Touch و web manifest. إذا وضعت الملفات في مجلد فرعي، فقم بتحديث مسارات HTML ومسارات الأيقونات داخل ملف site.webmanifest.
تحقق من موقعك في علامة تبويب متصفح جديدة وعلى الأجهزة التي تهتم بها. يمكن للمتصفحات تخزين الأيقونات مؤقتاً، لذا فإن الأيقونة القديمة لا تثبت بالضرورة فشل التثبيت. احتفظ بالصورة الأصلية والحزمة التي تم تنزيلها قبل تحديث المحرر، لأن التحديث يعيد الصفحة إلى أداة العمل الرئيسية.
اختر موقعاً واحداً أساسياً للأيقونة وحافظ على اتساق مسارات HTML. يقوم المولد بإنشاء الأصول؛ أما نشرها فيظل جزءاً من سير عمل موقعك الإلكتروني.
أسئلة شائعة
هل يمكنني إنشاء أيقونة مفضلة (favicon) بدون رفع شعار؟
نعم. اختر "نص" (Text)، وأدخل الأحرف الأولى، ثم اختر الخط والألوان والشكل والتباعد في المحرر.
ما هي الأحجام الموجودة داخل ملف ICO؟
يحتوي ICO على سبعة إطارات تعتمد على PNG: 16 و24 و32 و48 و64 و128 و256 بكسل مربع. يختار المتصفح الإطار المناسب.
ما الذي يتضمنه ملف ZIP الخاص بالموقع؟
يحتوي على favicon.ico، وست أيقونات PNG لاستخدام المتصفح وApple وAndroid، وملف site.webmanifest وINSTALL.txt مع وسوم الرابط HTML.
هل يمكن أن تحتوي الأيقونة المفضلة على خلفية شفافة؟
نعم. قم بتفعيل "خلفية شفافة". هذا يحافظ على المناطق الشفافة حول المصدر؛ ولا يزيل الخلفية غير الشفافة من الصورة.
هل يتم رفع الصورة للتحويل؟
لا. تقوم هذه الأداة بإنشاء وتجميع ملفات الأيقونات في متصفحك. احتفظ بالملفات التي تم تنزيلها لأن المحرر ليس مكاناً دائماً لتخزين المشاريع.
هل يمكنني استخدام الخطوط المثبتة على جهاز الكمبيوتر الخاص بي؟
نعم، عندما يدعم متصفحك الوصول إلى الخطوط المحلية. اختر "نص / مونوغرام"، وحدد "استخدام خطوط النظام" واسمح للمتصفح بالإذن. ستظهر عائلات الخطوط المتاحة لديك في قائمة الخطوط. تظل الأنماط المضمنة قابلة للاستخدام إذا تم رفض الإذن أو كان الوصول إلى الخطوط المحلية غير متاح.
امنح موقعك الإلكتروني القادم توقيعاً صغيراً وواضحاً.
جرب عينة أو استخدم ملفك الخاص، وراجع النتيجة قبل المشاركة.
