نظرة عامة أساسية حول كيفية إنشاء رمز favicon متوافق مع جميع الأجهزة
في هذه المشاركة، أريد مشاركة أفكار حول كيفية إنشاء رمز مفضّل قابل للتكيّف باستخدام SVG. جرِّب الإصدار التجريبي.
إذا كنت تفضّل مشاهدة الفيديوهات، يمكنك الاطّلاع على نسخة من هذه المشاركة على YouTube:
نظرة عامة
يُعدّ الرمز المفضّل المخصّص
طريقة رائعة لتحسين مشروع الويب. ويتم عرضها في علامات التبويب للمتصفّح على أجهزة الكمبيوتر المكتبي،
وداخل ميزة "الحفظ للاطّلاع لاحقًا"، وضمن المشاركات الأخرى في المدونات التي تؤدي إلى موقعك الإلكتروني، وغيرها. في السابق، كان يتم ذلك باستخدام نوع الملف .ico، ولكن في الآونة الأخيرة، سمحت المتصفحات باستخدام SVG، وهو تنسيق رسومات موجّهة. باستخدام
التحسين المبرمَج
، يمكنك عرض رموز favicons بتنسيق .ico متوافقة بشكل جيد، والترقية إلى .svg إذا كان
متاحًا.
يمكن لتنسيق SVG تغيير حجمه إلى الأعلى أو الأسفل بدون فقدان الجودة، ويمكن أن يكون حجمه صغيرًا جدًا، ويمكن أن يتضمّن أيضًا CSS مضمّنة، وحتى طلبات بحث مضمّنة عن الوسائط. وهذا يعني أنّه في حال استخدام رمز favicon بتنسيق SVG في تطبيق قارئ أو أشرطة الإشارات المرجعية، من المحتمل أن يحصل المستخدم على رمز ملائم (فاتح أو داكن) للموضوع بسبب أنماط الإعدادات المفضّلة للوضع الداكن المقدَّمة داخل SVG. بعد ذلك، يتم تعديل ملف SVG باستخدام التنسيق المضمّن لتلبية ملفوظات المستخدِم المفضّلة للوضعَين الفاتح والداكن.
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 رمزًا مصغرًا متكيّفًا.
ربط رمز الشارة المفضّل بتنسيق SVG من ملف HTML
في علامة <head> من رمز HTML، أضِف ما يلي بعد رمز الشارة .ico:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
بما أنّ الرمز الجديد قد يبدو مطابقًا لرمز الإصدار .ico، يُرجى التأكّد من أنّه يتم استخدامه. افتح لوحة "الشبكة" في "أدوات مطوّري البرامج". يمكنك الفلترة حسب الصور والبحث عن ملف favicon:
الأنماط
مثل 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 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، وسنضيفه إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.