خطا Make favicon small and cacheable
خطا Make favicon small and cacheable
یکی از خطاهایی که کمتر ممکن است، در هنگام تست سرعت سایت توسط GTmetrix باهاش مواجه می شوند با نام خطا Make favicon small and cacheable نمایش داده میشود. که مربوط به فاوآیکون یا نمادک سایت هست که در پنجره مرورگر به صورت یک تصویر نمایش داده میشود.
با استفاده از فایوآیکون شما میتونید یک تصویر با فرمت png، jpg یا در حالت بهترش ico رو در اندازه‌های 16*16 یا 32*32 پیکسل به عنوان نماد سایت انتخاب کنید و در تب مرورگر نمایش بدید. از اونجایی که فاو آیکون به صورت ثابت هست و ممکنه تا سالها تغییری در اون ایجاد نکنید، بهتره کاری کنید که اولا با هر بازدید از صفحه، درخواست HTTP برای لود فاوآیکون ارسال نشود و دوما هم اینکه با کش کردن فاوآیکون کاری کنید که مدت زمان بیشتری در حافظه کش مرورگر بازدیدکننده‌ها باقی بماند.
favicon چیست
favicon یا favicon.ico هست یک آیکون از تصویر کوچیک که همراه سایر فایل‌های سایت شما برای کاربران بارگذاری میشود. وقتی مرورگر یک کاربر با سایت شما برخورد می‌کند در پیش‌زمینه به دنبال یک favicon.ico است. favicon در جاهای مختلف نمایش داده میشود مثلا در تب مرورگر و یا وقتی یک سایت را در مرورگر خود بوک‌مارک (Bookmark) می‌کنید.
دیگر فقط مثل گذشته favicon را نباید برای مرورگرهای دسکتاپ تنظیم کرد، ما در حال حاضر دستگاه‌های iOS، دستگاه‌های اندروید و … را در ابعادهای مختلف که هر کدام یک نوع از فرمت favicon را پشتیبانی می‌کنند را داریم.
قطعا هر وب سایت حرفه ای نیاز به favicon دارد و در گذشته مرورگرها به شکل پیش‌فرض همیشه درخواست favicon در برخورد با یک سایت انجام می‌دادند و اگر سرور favicon را نیز نداشت خطای 404 رخ می‌داد (البته این موضوع در آپدیت های بعدی مرورگرها بهبود یافت).
خطا Make favicon small and cacheable
چگونه یک favicon بسازیم
خطای موجود در YSlow یاهو هم چنین چیزی میخواهد Make favicon small and cacheable ، بسازید یک favicon کوچک و قابل کش شده.
فرمت یک favicon درواقع می‌تواند هم PNG ، GIF و یا ICO باشد، برهرحال فرمت ICO به طور معمول استفاده میشود و از طرفی بیشتر از فرمت‌های دیگر کوچک‌تر است و همین‌طور این فرمت را مرورگرهای بیشتری پشتیبانی می‌کنند. در این مقاله می‌توانید ابعاد صحیح و مختلف favicon را مشاهده کنید. در ادامه تمرکز بر نحوه ساخت favicon خواهد بود.
قدم یک
یک favicon به شکل کلی باید دارای ابعادی 16×16 پیکسل یا 32×32 باشد. و همچنین پیشنهاد می شود حجم آن زیر 1KB باشد. شما می‌توانید favicon خود را در برنامه‌های مختلفی که تمایل دارید بسازید، همانند فتوشاپ، ایلستریتور، Paint و غیره. و بعد این آنکه با چنین نرم افزارهایی عکس خود را ساختید به راحتی می‌توانید فایل را ذخیره کنید و فرمت آن را دستی تغییر دهید و یک اسم همانند favicon.ico به وجود بیاورید.
شما همچنین می توانید برای ساختن favicon از ابزارهای آنلاین همانند real favicon generator استفاده کنید، در این ابزارهای آنلاین می‌توانید با فرمت‌های مختلفی همانند PNG، JPG و یا SVG (البته از نوع وکتور باشد بهتر است) اپلود کنید و سپس توسط این نرم افزار فرمت ICO تولید میشود. (برای دیدن ابزارهای بیشتر می‌توانید قسمت ابزارهای سئو را مطالعه نمایید)
قدم دو
بعد از ساخت favicon شما نیاز دارید آن را در سایت خود آپلود نمایید به دین منظور می‌توانید از FTP و سپس وصل شدن به root سرور خود این کار را انجام دهید، favicon باید در تگ بین <head> قرار بگیرد و در کدی همانند زیر می‌توانید آن را در سایت خود فراخونی کنید.
<link rel=”shortcut icon” href=”http://mizfa.com/images/favicon.ico” type=”image/x-icon” />
خطا Make favicon small and cacheable
فاوایکون در وردپرس
اگر وب سایت شما دارای CMS وردپرس است. می‌توانید به راحتی به کمک افزونه اشاره شده favicon خود را بسازید. افزونه Favicon by RealFaviconGenerator چینن قابلی را به شکل رایگان برای شما فراهم می‌کند. همچنین می توانید به codex وردپرس مراجعه کنید.
فاوایکون در جوملا
اگر وب سایت شما دارای CMS جوملا است می‌توانید favicon خود را در مسیر قالب خود یعنی
/joomla/templates/<your template>
قرار دهید. همچنین می‌توانید توضیحات رسمی سایت جوملا را مطالعه کنید
فاوایکون در دروپال
و اگر سایت CMS سایت شما دروپال است می‌توانید توضیحات رسمی این CMS را در اینجا مطالعه کنید.
خطا Make favicon small and cacheable
بهینه سازی Favicon
یک favicon بهینه سازی شده باید قابلیت کش شدن را داشته باشد. تا وقتی مرورگر کاربر درخواست سمت سرور ارسال می‌کند. سرور آن فایل را در لوکال کاربر ذخیره کنید تا در دفعات بعد دوباره آن فایل را درخواست نکند. این عمل می‌تواند leverage browser caching را تقویت کند به معنای قدرت کش کردن مرورگر. توسط هدرهایی نظیر expire headers و cache-control می‌توان انجام داد.
همان‌طور که اشاره کردیم بهتر است favicon زیر 1KB باشد. و اگر در CDN آن را قرار دهید دیگر نهایت بهینه سازی را انجام داده‌اید.
دیدگاهتان را بنویسید