قطعا نام فاوآیکون یا همان favicon را شنیده اید. در این مطلب روش افزودن فاویکون یا همان favicon وردپرس را یاد می گیریم.
فاویکون در فرآیند طراحی و راه اندازی وب سایت کمتر مورد توجه قرار می گیرد. اما این آیکون و تصویر کوچک تاثیر زیادی بر روی برندینگ و تجربه کاربر دارد. favicon در واقع همان آیکون کوچک کنار نام سایت در بالای مرورگر است. این تصویر کوچک به کاربر برای شناخت سریعتر وب سایت در بین وب سایت های دیگر کمک می کند. از طرفی در موتور های جستجو نیز، کنار عنوان سایت نمایش داده می شود. تمام این موارد یعنی دیده شدن بیشتر لوگو و برند ما!
یکی از کاربرد های دیگر favicon وردپرس، نمایش آن به عنوان آیکون در تلفن های هوشمند است. کاربر با افزودن سایت به لیست علاقه مندی ها و یا صفحه اصلی خود، این آیکون را به عنوان نشان سایت می بیند. به صورت کلی استفاده از favicon در وردپرس تجربه کاربر را برای دسترسی سریع تر به وب سایت ما بیشتر می کند. در این مطلب روش افزودن فاوآیکون را به وردپرس به چند روش یاد می گیریم.
افزودن favicon وردپرس
روش های مختلفی برای افزودن این قابلیت به وردپرس وجود دارد. در این مطلب به بررسی و معرفی ۳ روش اصولی می پردازیم. هر کدام از این روش ها نیز کاربرد و شرایط خود را دارد. قبل از هر کار باید آیکون خود را آماده کنیم. در این آموزش از یک تصویر بدون زمینه و با ابعاد ۵۱۲ در ۵۱۲ پیکسل و با فرمت PNG استفاده می کنیم.
روش اول: favicon در شخصی سازی قالب
روش اول و ساده ترین روش، استفاده از بخش شخصی سازی قالب وردپرس است. در این بخش امکان افزودن فاویکون به سادگی وجود دارد. برای این کار باید از مسیر نمایش > شخصی سازی وارد بخش هویت سایت شویم. در این پنجره یک بخش برای بارگذاری و یا انتخاب فایل آیکون وجود دارد. وردپرس به صورت خودکار آیکون را در کد های سایت قرار می دهد.
روش دوم: افزونه RealFaviconGenerator
دلایل مختلفی برای عدم دسترسی به بخش قالب ها و یا شخصی سازی آن وجود دارد. برای مثال پشتیبان سایت به دلیل احتمال دستکاری و بروز خطا این بخش را غیر فعال می کند. در این حالت استفاده از افزونه ها کاربردی است. یکی از افزونه های محبوب در این زمینه، «پلاگین Favicon by RealFaviconGenerator» است. با نصب و فعال سازی این افزونه، یک بخش در منوی نمایش سایت ایجاد می شود. در این بخش به سادگی امکان ایجاد و شخصی سازی favicon وردپرس وجود دارد. یکی از مزیت های افزونه RealFaviconGenerator، نمایش و امکان شخصی سازی برای دستگاه های مختلف است. پس از تایید نهایی افزونه به صورت خودکار کد های مورد نیاز را به وب سایت ما اضافه می کند.
روش سوم: افزودن دستی favicon وردپرس
روش سوم افزودن favicon وردپرس به صورت دستی است. این روش نیز بسیار ساده اجرا می شود. برای این کار از ابزار آنلاین سسس استفاده می کنیم. این وب سایت به سادگی امکان تبدیل و ایجاد سایز های مختلف آیکون را به صورت رایگان برای ما فراهم می کند. پس از ورود و انتخاب بخش png -> ico، فایل خود را بارگذاری می کنیم. بعد از این کار یک فایل زیپ متشکل از آیکون های مورد نیاز ما برای دانلود آماده می شود. پس از دانلود، این فایل ها را در روت هاست خود بارگذاری می کنیم. در قسمت پایین تر کدی مشابه کد زیر قرار دارد:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">این کد را باید در فایل header.php قالب خود و بین تگ <head> قرار دهیم. در صورت بارگذاری فایل ها در قسمت دیگر از هاست خود باید لینک های موجود در این کد را شخصی سازی کنید. حال با بروزرسانی وب سایت favicon وردپرس ما اضافه می شود.
توجه! در صورت عدم نمایش favicon وردپرس کش وب سایت و مرورگر را بروز کنید!