یک نمای کلی از نحوه ساخت یک فاویکون تطبیقی.
در این پست می‌خواهم درباره نحوه ساخت یک فاویکون تطبیقی با SVG فکر کنم. نسخه ی نمایشی را امتحان کنید.
اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:
بررسی اجمالی
فاویکون سفارشی یک راه عالی برای صیقل دادن یک پروژه وب است. در برگه‌های مرورگر دسکتاپ، و همچنین در خوانندگان «ذخیره برای بعد»، سایر پست‌های وبلاگی که به سایت شما پیوند می‌دهند و موارد دیگر نمایش داده می‌شود. به طور سنتی این کار با نوع فایل .ico انجام می‌شد، اما اخیراً مرورگرها اجازه استفاده از SVG را داده‌اند که یک فرمت برداری است. با استفاده از بهبود پیشرونده می‌توانید فاویکون‌های .ico را که به خوبی پشتیبانی می‌شوند، ارائه دهید و در صورت موجود بودن آن را به .svg ارتقا دهید.
SVG قادر است بدون از دست دادن کیفیت، بزرگ و کم کند، و به طور بالقوه می تواند از نظر اندازه بسیار کوچک باشد، همچنین می تواند CSS جاسازی شده، حتی درخواست های رسانه ای جاسازی شده داشته باشد. این بدان معناست که اگر یک فاویکون SVG در یک برنامه خواننده یا نوار نشانک‌ها استفاده شود، این احتمال وجود دارد که کاربر بتواند یک نماد تم مرتبط (روشن یا تاریک) را به دلیل سبک‌های ترجیحی تیره موجود در SVG دریافت کند. سپس SVG با استفاده از استایل تعبیه شده خود برای تنظیمات روشن و تاریک کاربر سازگار می شود.
نشانه گذاری
نشانه گذاری 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 باشد، بررسی کنید که از آن استفاده می شود. پنل Network DevTools را باز کنید. بر اساس تصاویر فیلتر کنید و فاویکون را جستجو کنید:
سبک ها
مانند 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 ) تغییر دادم، اما کلاه برجسته صورتی را گذاشتم.
نتیجه
حالا که می دانید من چگونه این کار را انجام دادم، چگونه این کار را انجام می دهید‽🙂
بیایید رویکردهایمان را متنوع کنیم و همه راه‌های ساخت در وب را بیاموزیم. یک نسخه نمایشی ایجاد کنید، پیوندها را برای من توییت کنید ، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم!