إنشاء رمز مفضّل تكيُّفي

نظرة عامة أساسية حول كيفية إنشاء رمز favicon قابل للتكيّف

Adam Argyle

في هذه المشاركة، أود أن أشارككم أفكارًا حول كيفية إنشاء رمز مفضّل تكيّفي باستخدام رسومات موجّهة يمكن تغيير حجمها (SVG). جرِّب الإصدار التجريبي.

يتم عرض علامات التبويب في المتصفّح وفقًا لتغييرات المظهر الفاتح والداكن في نظام التشغيل macOS. تجربة الإصدار التجريبي

إليك نسخة من هذه المشاركة على YouTube إذا كنت تفضّل ذلك:

نظرة عامة

يُعدّ الرمز المفضّل المخصّص طريقة رائعة لتحسين مشروع الويب. ويتم عرضها في علامات التبويب للمتصفّح على أجهزة الكمبيوتر المكتبي، وكذلك في ميزة "الحفظ للاطّلاع لاحقًا"، وفي المشاركات الأخرى على المدونات التي تؤدي إلى موقعك الإلكتروني، وغيرها. في السابق، كان يتم ذلك باستخدام نوع الملف .ico، ولكن في الآونة الأخيرة،سمحت المتصفحات باستخدامSVG، وهو تنسيق رسومات موجّهة. باستخدام التحسين المبرمَج ، يمكنك عرض رموز favicons بتنسيق .ico متوافقة بشكل جيد، والترقية إلى .svg إذا كان متاحًا.

يمكن لتنسيق SVG تغيير حجمه إلى الأعلى أو الأسفل بدون فقدان الجودة، ويمكن أن يكون حجمه صغيرًا جدًا، ويمكن أن يتضمّن أيضًا CSS مضمّنة، وحتى طلبات بحث مضمّنة عن الوسائط. وهذا يعني أنّه في حال استخدام رمز favicon بتنسيق SVG في تطبيق قارئ أو أشرطة الإشارات المرجعية، من المحتمل أن يحصل المستخدم على رمز مرتبط بموضوع التطبيق (فاتح أو داكن) بسبب أنماط الإعدادات المفضّلة للوضع الداكن المقدَّمة داخلملف SVG. بعد ذلك، يتم تعديل ملف SVG باستخدام التنسيق المضمّن لتلبية ملفوظات المستخدِم المفضّلة للوضعَين الفاتح والداكن.

أمثلة على الرموز المفضّلة الكبيرة والتي يسهل تمييزها

علامتا التبويب الفاتحة والداكنة في كل متصفّح لتقديم نظرة عامة على الرمز التكيُّفي من الأعلى إلى الأسفل: Safari وFirefox وChrome
علامات التبويب الفاتحة والداكنة في كل متصفّح توفّر نظرة عامة على الرمز التكيُّفي من أعلى إلى أسفل: Safari وFirefox وChrome

Markup

ترميز SVG هو XML يستخدم امتداد نوع ملف .svg الذي يتيح له تخزين أنواع أكثر ديناميكية من الترميز.

ابدأ بإنشاء favicon.svg.

أنشئ ملفًا جديدًا باسم favicon.svg وأضِف ما يلي:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

في ما يلي ملف SVG الذي أرسلته، وقد غيّرت حجم viewBox بما يتناسب مع عملي الفني:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

إضافة أشكال ومسارات

بعد ذلك، أضِف رمز مسار SVG. ويعني ذلك غالبًا فتح ملف SVG في محرِّر رموز، ولكن لا يكون هذا الرمز سهل الفهم بالنسبة إلى المستخدمين بشكل عام. إليك دليل رائع يرشدك خلال تصدير ملفات SVG وتحسينها من أدوات التصميم.

إنّ العمل الفني الخاص بتحدي واجهة المستخدم الرسومية هذا صادر من مصمم أنشأه في برنامج Adobe Illustrator. لقد صعّدتُه بشكل كبير. لقد أجريتُ عملية تحويل باستخدام SVGOMG ثم أزلتُ يدويًا المحتوى غير المرغوب فيه.

في ما يلي مثال على مجموعة مسارات عمل فني على skull من أعمالي، بعد تنظيفها:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <g id="skull">
    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
  </g>
</svg>

لاحِظ أداة اختيار رقم التعريف السهلة القراءة مثل #eyes-and-nose والفئات مثل .favicon-stroke. هذه البيانات من تعديلي اليدوي، استعدادًا لخدمة مقارنة الأسعار (CSS). لا يُشترط إضافة فئات وأرقام تعريف ليكون ملف SVG رمزًا مصغرًا قابلاً للتكيّف.

في علامة <head> من رمز HTML، أضِف ما يلي بعد رمز الشارة .ico:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

بما أنّ الرمز الجديد قد يبدو مطابقًا لرمز الإصدار .ico، يُرجى التأكّد من أنّه يتم استخدامه. افتح لوحة "الشبكة" في "أدوات مطوري البرامج". يمكنك الفلترة حسب الصور والبحث عن ملف favicon:

لقطة شاشة لجزء الشبكة من DevTools مع وجود عامل تصفية بحث عن الرمز المفضل وتمييز المورد favicon.svg.

الأنماط

يمكنك إضافة علامة <style> إلى الترميز كما هو الحال في HTML لاستخدامها مع نطاق المستند هذا:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

سيكون إصدار المظهر الفاتح هو اللون التلقائي لرمز SVG المفضّل لديّ. كانت الأنماط التي كتبت عنها تتضمّن في الغالب ألوانًا للخطوط والتعبئة:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    .favicon-stroke {
      stroke-width: 8px;
      stroke: #8929ff;
    }
    #skull-outline { fill: white }
    #eyes-and-nose, #hat-outline { fill: #8929ff }
    #hat-fill, #hat-bill { fill: #e662e6 }
  </style>
  …
</svg>

مثال لمعاينة رمز مفضّل في المظهر الفاتح

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  …
</svg>

لقطة شاشة لأدوات المطوّر تعرِض طلب البحث عن الوسائط في المظهر الداكن الذي يستبدل لون الملء للعينين والأنف في ملف SVG

انتهى الأمر على النحو التالي:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      .favicon-stroke { stroke: #343a40 }
      #skull-outline { fill: #adb5bd }
      #hat-outline { fill: #343a40 }
      #eyes-and-nose { fill: #343a40 }
    }
  </style>
  …
</svg>

مثال على معاينة الرمز المفضّل بالمظهر الداكن

اخترتُ تبديل الحدود الأرجوانية الساطعة إلى اللون الرمادي الداكن البارد (#343a40)، وغيّرتُ لون عظمة الجمجمة من الأبيض إلى اللون الرمادي الفاتح (#adb5bd)، ولكن تركت قبعة اللهجة الوردية.

معاينة رمزَي التطبيقات المفضّلَين بالوضعَين الفاتح والداكن جنبًا إلى جنب

الخاتمة

الآن بعد أن عرفت كيف فعلت ذلك، كيف يمكنك‽ 🙂

لننوّع أساليبنا ونتعرّف على جميع الطرق لإنشاء تطبيقات على الويب. أنشئ عرضًا توضيحيًا وأرسِل إلينا رابطًا على Twitter، وسنضيفه إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.

الريمكسات التي أنشأها المستخدمون