كيفية تصميم الأيقونة المفضلة: الدليل النهائي

تصميم فافيكون
(رصيد الصورة: مايكل فلاروب)
اقفز إلى:


تصميم فافيكون أكثر أهمية مما قد تعتقد. الحجم مهم حقًا هنا لأن الشعار المصمم جيدًا يحتاج إلى التعرف عليه مهما كان الحجم الذي يراه. تحتاج إلى تغيير الحجم من الشاشات الضخمة وصولاً إلى أيقونة يمكن أن تكون صغيرة مثل 16 × 16 بكسل ، والمعروفة باسم الأيقونة المفضلة. يعد شعار Google أحد الأمثلة الرائعة على تصميم favicon. إنه يعمل بشكل مثالي مع الشاشات الأكبر حجمًا بنصه الكبير 'G' وأربعة ألوان مميزة. ولا يزال من السهل التعرف عليه عند تقليصه إلى حرف 'G' الصغير ذي الأربعة ألوان الذي يظهر في شريط عناوين متصفحات الويب.

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

في هذه المقالة ، سنستعرض عملية كيفية تصميم الأيقونة المفضلة المثالية. سنقوم بتضمين نصائح محددة لإنشاء رمز مفضل لأجهزة Apple و Android و Chrome و Opera و Safari. بالإضافة إلى دليل مفيد لأحجام وتنسيقات الرموز المفضلة التي تحتاج إلى معرفتها. استخدم الروابط السريعة (على اليمين) للانتقال مباشرة إلى القسم الذي تريده.

تصميم فافيكون: روابط سريعة

- قواعد تصميم فافيكون
- ورقة الغش أحجام الرموز المفضلة
- الرموز المفضلة لمتصفح سطح المكتب
- مفضلات Apple Touch
- Android و Chrome و Opera
- علامة تبويب سفاري المثبتة



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

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

قواعد تصميم فافيكون

01. اجعلها قابلة للتمييز

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

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

03. حافظ على الوضوح

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

04. إنشاء نسختين

أيقونة مفضلة على خلفية شفافة وواحدة على خلفية تعبئة صلبة

iphone 11 vs iphone 8 size
الخلفيات المختلفة تعمل بشكل جيد لسياقات مختلفة(رصيد الصورة: مايكل فلاروب / تطبيق بيكسلز)

عندما تم تقديم الرموز المفضلة لأول مرة في Internet Explorer 5 ، ظهرت في شريط عنوان URL وفي قائمة الإشارات المرجعية. اليوم ، يتم عرض الرموز المفضلة في الكثير من السياقات الأخرى ، بما في ذلك قوائم الإشارات المرجعية والقوائم المختصرة وحتى الشاشات الرئيسية للجوال والتلفزيون. هذا يجعل من الصعب التنبؤ بكيفية عرض رمزك المفضل للمستخدم النهائي.

للتأكد من أن الأيقونة المفضلة لديك تبدو جيدة في العديد من السياقات المختلفة التي ستظهر فيها ، من الناحية المثالية ، يجب عليك تقديم نمطين للرموز المفضلة:

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

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

ورقة الغش بحجم الرمز المفضل

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

كان يجب تقديم الرموز المفضلة سابقًا بتنسيق ICO. اليوم ، من المقبول تقديم الملفات بتنسيق PNG (باستثناء أيقونة Safari Pinned Tab التي يجب توفيرها كـ SVG).

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

ورقة الغش فافيكون

هذه هي أحجام الرموز المفضلة الأكثر شيوعًا(رصيد الصورة: تظهر تفاعلية)

الآن دعونا نلقي نظرة فاحصة على المتطلبات المحددة لحالات الاستخدام المختلفة.

الرموز المفضلة لمتصفح سطح المكتب

كيفية إنشاء الأيقونة المفضلة لمتصفح سطح المكتب

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

يتم عرض الرموز المفضلة في شريط الإشارات وشريط URL في Google Chrome

الأيقونات ذات النمط الكلاسيكي معروضة في شريط الإشارات وشريط URL في Google Chrome(رصيد الصورة: Michael Flarup / Apply Pixels)

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

  • 16x16
  • 32x32
  • 48 × 48

تفاحة، مدينة، قط

كيفية إنشاء فافيكونز Apple Touch

يستخدم iOS من Apple أيقونات Apple Touch لتمثيل مواقع الويب التي تم حفظها على شاشة iOS الرئيسية كإشارات مرجعية. هذا يعني أنه سيتم تقريب رمز Apple Touch إلى ملف طوق قناع أيقونات تطبيقات iOS.

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

الشاشة الرئيسية لـ iPhone مع الرموز

سيتم عرض هذا الرمز المفضل على خلفية الشاشة الرئيسية للمستخدم(رصيد الصورة: Michael Flarup / Apply Pixels)

يجب توفير فافيكون Apple في ملف تنسيق PNG . يمكنك الابتعاد عن تقديم ملف 180 × 180 Apple Touch Icon الذي سيتسع تلقائيًا لأحجام iPhone و iPad المختلفة. سيعمل هذا بشكل جيد في معظم الحالات.

إذا لم يكن الأمر كذلك ، فيمكنك توفير أحجام إضافية لأجهزة Apple المختلفة:

  • 60 × 60
  • 76x76
  • 120 × 120
  • 152 × 152
  • 180 × 180

Android و Chrome و Opera

كيفية إنشاء الأيقونة المفضلة لأجهزة Android و Chrome و Opera

يستخدم Android و Chrome و Opera ملفات android-chrome-192x192.png و android-chrome-512x512.png الذي - التي توصي Google .

منذ إدخال الرموز التكيفية في Android ، ستعمل مواقع الويب المضافة إلى الشاشة الرئيسية لنظام Android على إخفاء تصميم 192x192 ، بحيث يتشكل الرمز بعد نمط التقنيع المفضل لدى المستخدم. قد يكون هذا شكل دائري أو قطع ناقص أو مستطيل أو مستطيل مستدير الزوايا أو شكل دمعة.

الرموز المفضلة على شاشة Android Pie الرئيسية

سيتم إخفاء الرموز المفضلة هنا بأشكال مختلفة ، وفقًا لتفضيلات المستخدم(رصيد الصورة: Michael Flarup / Apply Pixels)

تحتاج إلى إنشاء ملف بي إن جي الرمز المفضل مع خلفية صلبة ، في 192 × 192 و 512 × 512 .

آيفون 8 بلس وآيفون 11

نفِّذ هذه الرموز المفضلة بإضافة أ البيان. json ملف لموقعك والارتباط به ضمن العلامات:

هنا هو رمز البيان. json ملف:

{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }

سفاري

كيفية إنشاء رمز مفضل لعلامة التبويب المثبتة في Safari

هذا هو الشخص الغريب ، وهو الرمز المفضل الوحيد الذي يجب توفيره فيه تنسيق متجه ك ملف SVG . يتم عرضه كرمز مصغر عندما يقوم المستخدم بتثبيت علامة تبويب في نافذة متصفح Safari.

رمز favicon: تنسيق SVG

على عكس كل الرموز المفضلة الأخرى ، يتم إنشاء هذا الرمز من صورة SVG(رصيد الصورة: Michael Flarup / Apply Pixels)

يجب أن يكون هذا الرمز المفضل هو ملف SVG أسود بنسبة 100٪ بامتداد خلفية شفافة . يمكن أن يكون SVG طبقة واحدة فقط ، وتتطلب رحلات السفاري viewBox سمة SVG المراد ضبطها على ' 0 0 16 16 ' .

أنواع الرموز المفضلة الأخرى

هناك بعض أبعاد وتنسيقات الرموز المفضلة التي لم يتم تضمينها في هذه المقالة على سبيل المثال. Google TV و Chrome Web Store وأيقونات Apple Touch السابقة لنظام iOS 7. لماذا؟ لأنها قد تم إهمالها أو لأنها نادرًا ما تكون ذات صلة بمطور الويب العادي.

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

اقرأ أكثر: