یکی از خطاهایی که کمتر ممکنه در هنگام تست سرعت سایت توسط GTmetrix باهاش مواجه بشین با نام Make favicon small and cacheable نمایش داده میشه که مربوط به فاوآیکون یا نمادک سایت هست که در پنجره مرورگر به صورت یک تصویر نمایش داده میشه.
با استفاده از فایوآیکون شما میتونید یک تصویر با فرمت png، jpg یا در حالت بهترش ico رو در اندازه‌های ۱۶*۱۶ یا ۳۲*۳۲ پیکسل به عنوان نماد سایت انتخاب کنید و در تب مرورگر نمایش بدین. از اونجایی که فاو آیکون به صورت ثابت هست و ممکنه تا سالها تغییری در اون ایجاد نکنید، بهتره کاری کنید که اولا با هر بازدید از صفحه، درخواست HTTP برای لود فاوآیکون ارسال نشه و دوما هم اینکه با کش کردن فاوآیکون کاری کنید که مدت زمان بیشتری در حافظه کش مرورگر بازدیدکننده‌ها باقی بمونه.
در این آموزش قصد دارم به نحوه برطرف کردن ارور Make favicon small and cacheable در Yslow جی تی متریکس بپردازم که با استفاده از این آموزش میتونید تصویر فاوآیکون سایت رو بهینه سازی کرده و از درخواست‌های اضافی برای لود تصویری که سالها ممکنه تغییرش ندین، جلوگیری کنید.
فاوآیکون یا favicon چیست؟
قبل از اینکه به نحوه برطرف کردن خطا بپردازم لازمه تا ببینیم اصلا فاوآیکون چیست؟ favicon همونطوری که از اسمش مشخصه یک آیکون کوچک از لوگوی سایت شما را میتونه تشکیل بده که در کنار عنوان تمامی صفحات وردپرس نمایش داده شده و کاربران آن را مشاهده کنند
همونطور که در تصویر بالا میبینید در کنار عنوان هر تب آیکون‌هایی قرار داره که هنگام مراجعه به سایت مورد نظر به ما نمایش داده میشوند و هر زمان که صفحه‌ای را بوکمارک کنیم و یا بین انبوهی از تب‌های باز شده در مرورگر قرار بگیریم با استفاده از فاوآیکون به راحتی قادر خواهیم بود تا صفحه مورد نظر را باز کرده و مشاهده کنیم.
آموزش رفع خطای Make favicon small and cacheable در GTmetrix
همونطور که در خطا Make favicon small and cacheable هم میبینید گفته شده که آیکون سایت رو کاری کنید که هم کوچک باشه و هم اینکه قابلیت کش رو براش فعال کنید. پس برای اینکه بتونیم بهینه سازی روی آیکون سایت داشته باشیم باید این دو هدف رو دنبال کنیم.
بهینه سازی و کاهش حجم Favicon
قبل از اینکه حجم فاو آیکون رو کم کنید ابتدا باید از اندازه درست و فرمت درست استفاده کنید. اولین کاری که برای ساخت یک آیکون مناسب باید در نظر بگیرید اندازه اون هست. شما میتونید اونو در اندازه ۱۶*۱۶ یا ۳۲*۳۲ پیکسل بسازید. دومین نکته که خیلی هم مهم هست و برای مرحله کش کردن آیکون میتونه بهتر کمکتون بکنه انتخاب فرمت مناسب هست.
فرمت مناسب برای فاوآیکون روی ico. قرار داره و بهتره به جای استفاده از فرمت‌های png، jpg یا svg از این فرمت فایل استفاده کنید. در صورتی که فرمت فایل شما به این شکل نیست میتونید به کمک برنامه‌هایی مثل فتوشاپ فرمتش رو به ico. تغییر بدین و یا اینکه با کلیک روی دکمه زیر به وبسایت معرفی شده رفته و بعد از آپلود فایل با فرمت دیگه، خروجی فاوآیکون با فرمت ico رو دریافت کنید.
با استفاده از این سایت شما میتونید آیکون سایتتون رو که با فرمت‌های png، jpg، svg یا هر فرمت دیگه هست به فرمت ico تبدیل کنید. بعد از اینکه آیکون ساخته شد باید اونو داخل سایت خودتون اضافه کنید.
افزودن فاوآیکون در HTML
برای اضافه کردن فاوآیکون در سند HTML یا سایتی که به صورت HTML طراحی شده و فاقد سیستم مدیریت محتوا یا دیتابیس هست، کافیه به کمک تگ link آیکون رو در صفحه خودتون تعریف کنید تا در تب مرورگر نمایش داده بشه. برای این کار کافیه از کد زیر داخل تگ HEAD استفاده کنید. دقت کنید که این تگ باید قبل از تگ بسته <head/> قرار بگیره.
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
به جای images/favicon.ico/ در قطعه کد بالا هم باید آدرس فاوآیکون خودتون رو وارد کنید.
افزودن فاوآیکون در وردپرس
برای اضافه کردن favicon به وردپرس با استفاده از تنظیمات قالب وردپرس باید این امکان در تنظیمات قالب تعریف شده باشد. ممکنه تا امکان اضافه کردن قاوآیکون در قالب شما وجود نداشته باشه بنابراین اگر چنین نبود میتونید تا از روش کدنویسی استفاده کنید. برای این مورد ابتدا وارد پیشخوان وردپرس شده و سپس به مسیر نمایش> سفارشی سازی مراجعه کنید. بعد از اینکه صفحه سفارشی سازی برای شما باز شد مشابه تصویر زیر روی دکمه هویت سایت کلیک کنید تا وارد بخش مربوط به تغییر فاوآیکون در وردپرس شوید.
بعد از کلیک روی گزینه هویت سایت مشابه تصویر زیر با این صفحه مواجه خواهید شد، حالا کافیه تا از بخش انتخاب تصویر که در قسمت نمادک سایت قرار داره تصویر فاوآیکون دلخواه خودتون را که در اندازه ۱۶*۱۶ پیکسل آماده کردید را انتخاب کرده و آپلود کنید. در نهایت بعد از آپلود شدن فایل روی دکمه ذخیره کلیک کنید تا فاوایکون مورد نظر به سایت شما اضافه شود.
افزودن فاوآیکون در جوملا
در صورتی که از جوملا استفاده می‌کنید کافیه فایل فاوآیکون رو که با نام favicon.ico در مسیر پوشه قالب آپلود کنید. یعنی بعد از اینکه وارد File Manager هاست شدید به مسیر public_html/joomla/templates مراجعه کنید. سپس پوشه قالبی که ازش استفاده می‌کنید رو باز کرده و فایل آیکون رو در این پوشه آپلود کنید.
