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

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

Adam Argyle

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

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

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

نظرة عامة

يُعدّ favicon المخصّص طريقة رائعة لتحسين مشروع ويب. ويتم عرضها في علامات التبويب في متصفّح الكمبيوتر المكتبي، وداخل ميزة "الحفظ للاطّلاع لاحقًا"، وفي المشاركات الأخرى على المدونات التي تؤدي إلى موقعك الإلكتروني، وغيرها. في السابق، كان يتم ذلك باستخدام نوع الملف .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:

لقطة شاشة للوحة &quot;الشبكة&quot; من DevTools مع فلتر تم البحث عنه باستخدام رمز favicon وتم تمييز المورد favicon.svg

الأنماط

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

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

سيكون إصدار المظهر الفاتح هو اللون التلقائي لملف favicon.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، وسنضيفه إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.

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