اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
مواردی که در زمینه فاوآیکن اهمیت زیادی دارند!
استفاده از فاوآیکون سفارشی و خاص امری لازم نیست، بسیاری از فاوآیکون های پیش‌فرض و ساخته‌شده وجود دارد که می‌تواند بهبود کیفیت وبسایت شمارا تضمین کند. اگر قصد دارید فاوآیکونی خاص طراحی کنید و یا فاوآیکون خود را از حالت پیش‌فرض وردپرس به حالتی بهتر تبدیل کنید، ما به شما می‌گوییم که چه‌کارهایی باید انجام دهید:
- در فضای وب یک سازنده Favicon پیدا کنید. (صدها وبسایت برای ساختن آن وجود دارند!)
- فایل خود را بسازید. (فایل باید ۱۶ پیکسل در ۱۶ پیکسل یا ۳۲ در ۳۲ باشد.)
- به بخش تصویر تم خود بروید.
- فاوآیکون طراحی‌شده را به‌جای فاوآیکون قدیمی قرار دهید.
به یاد داشته باشید فاوآیکون تصویری بسیار کوچک است. در طراحی فاوآیکون جزییات زیادی را لحاظ نکنید، به یاد داشته باشید، اگر فاوآیکون شما بسیار با جزییات و غیرقابل‌تفکیک باشد، هیچ برتری نسبت به وب‌سایتی بدون فاوآیکون ندارد.
سعی کنید از اولین حرف نام شرکت خود و یا حرفی که شرکت شما با آن شناخته‌شده است، استفاده کنید. Favicon گوگل یکی از بهترین نمونه‌های این سبک از فاوآیکون ها است. به فاوآیکون آمازون نگاهی بیندازید، متوجه خواهید شد که طراح چگونه بامهارت از نام اول لوگو و علامت شرکت برای طراحی فاوآیکون استفاده کرده است. اگر لوگو مشخصی برای شرکت و یا کسب‌وکار خوددارید، سعی کنید برای طراحی فاوآیکون به سراغ طراحی لوگو خود بروید. اگر تازه به دنیای اینترنت واردشده‌اید و قصد دارید به‌تازگی کسب‌وکار خود را در این بستر شروع کنید، می‌توانید از هر ایده‌ای برای طراحی فاوآیکون خود استفاده کنید. در طراحی فاوآیکون حساس باشید، فاوآیکون باید به بهبود کسب‌وکار شما و جلب مشتری کمک کند و به‌عنوان پله‌ای برای پیشرفت شما عمل کند، نه مانعی که سد راهتان شود.
-
بهینه سازی و کاهش حجم Favicon
قبل از اینکه حجم فاوآیکون را کم کنید، ابتدا باید از اندازه درست و فرمت درست استفاده کنید. اولین کاری که برای ساخت یک آیکون مناسب باید در نظر بگیرید اندازه آن است. شما می‌توانید آن را در اندازه ۱۶*۱۶ یا ۳۲*۳۲ پیکسل طراحی کنید یا بسازید. دومین نکته که خیلی هم مهم است و برای مرحله کش کردن آیکون می‌تواند بهتر کمک کند، انتخاب فرمت مناسب است. فرمت مناسب برای فاوآیکون روی ico. قرار دارد و بهتر است به جای استفاده از فرمت‌های png، jpg یا svg از این فرمت فایل استفاده کنید. در صورتی که فرمت فایل شما به این شکل نیست می‌توانید به کمک برنامه‌هایی مثل فتوشاپ فرمتش رو به ico. تغییر دهید و یا این که با کلیک روی دکمه زیر به وبسایت معرفی شده رفته و بعد از آپلود فایل با فرمت دیگر خروجی فاوآیکون با فرمت ico رو دریافت کنید. با استفاده از سایت https://realfavicongenerator.net شما می‌توانید آیکون سایت خود را که با فرمت‌های 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 مراجعه کنید. سپس پوشه قالبی که ازش استفاده می‌کنید را باز کرده و فایل آیکون را در این پوشه آپلود کنید.
-
فعال‌سازی کش برای فاوآیکون
همان‌طور که در بالا هم اشاره کردیم، فایل فاوآیکون جزء مواردی است که تا سال‌ها تغییری نمی‌کند و بهتر است کاری کنیم که با مدیریت کش این نوع فایل، مدت زمان ماندن در حافظه کش مرورگر را به دلخواه خود بیشتر کنیم. برای این کار می‌توانید طبق add expires headers عمل کرده و با اضافه کردن کد زیر داخل فایل htaccess. کاری کنید که فایل فاوآیکون برای مدت بیشتری در حافظه کش مرورگر باقی بماند.
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 3 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
همان طور که در خط آخر می‌بینید برای فایل‌های تصویری که به صورت فاوآیکون هستند تعیین شده که به مدت یک سال در حافظه کش قرار بگیرند که با انجام این کار شما اقدام به کاهش تعداد درخواست HTTP کردید و باعث می‌شود که سرعت سایت هم بیشتر و بهتر شود.
در مقاله بعدی به ادامه این بحث می‌پردازیم.
