قرار دادن favicon در وردپرس و نوار عنوان مرورگر

شاید پیش آمده باشد که سایتی را باز می‌کنید و در کنار نوار عنوان آن یک آیکون کوچک مشاهده کرده باشید. در این مقاله قصد دارم نحوه قرار دادن favicon در وردپرس را به شما توضیح دهم.

favicon چیست؟

favicon به آرم کوچکی گفته می‌شود که در ابتدای آدرس اینترنتی سایت‌ها قرار می‌گیرد. فاوآیکون  یک آیکون کوچک است که کنار عنوان سایت شما در مرورگرها نمایش داده می‌شود و به‌نوعی می‌توان گفت کاربر با یک نگاه می‌تواند سایت شما را از میان انبوه تب‌های بازشده مرورگر سیستم خود به‌راحتی پیدا کند.

favicon می‌تواند توسط برنامه‌های تولید favicon تولید شود و یا شما می‌توانید طراحی favicon خود را به یک سری سایت که در این خصوص فعالیت می‌کنند بسپارید. توسط این سایت‌ها می‌توانید یک فاوآیکون حرفه‌ای برای تجارت خود داشته باشید و مطمئن باشید یک فاوآیکون با سایز مناسب که در زمان کوچک شدن تصویر کیفیت آن تغییر نمی‌کند دریافت می‌کنید.

طراحی فاوآیکون شما باید به‌گونه‌ای باشد که مخاطب را جذب خود کند؛ و ازاین‌جهت بسیار حائز اهمیت است. شما باید آیکونی را انتخاب و طراحی کنید که کاربران سریع بتوانند سایت شما را تشخیص بدهند.

شما توسط فاوآیکون شما می‌توانید یک آرم تجاری منحصربه‌فرد برای سایتتان داشته باشید. این‌کار سبب می‌شود مخاطبان خاص خود را داشته و همچنین در دنیای تجارت شناخته شوید. فاوایکون می‌تواند به‌دلخواه شما در ابتدای آدرس سایتتان قرار گیرد. فاوایکون به شما کمک می‌کند به‌عنوان یک وب‌مستر حرفه‌ای برند مخصوص خود را داشته باشید.

درواقع فاوایکون زیبایی خاصی هم به سایت شما موقع bookmark شدن در مرورگرها می‌دهد. مثل تصویر زیر:

اهمیت استفاده از favicon

شما با این کار می‌توانید یک تصویر ذهنی از سایت خود به کاربرانتان دهید که سایت شما را بهتر به خاطر داشته باشند. و با دیدن آرم سایت شما سریع آن را تشخیص بدهند. این کار می‌تواند سبب شود در بین رقیبان خود بتوانید در ذهن کاربرتان بهتر ماندگار شوید و درنتیجه با این کار بازدید سایت خود را افزایش دهید. توسط این آیکون کاربر می‌تواند راحت‌تر به سایت شما دسترسی داشته باشد و آن را راحت‌تر پیدا کند.

با استفاده از یک طراحی زیبا برای فاوآیکون می‌توانید در نظر کاربر از محبوبیت بیشتری برخوردار شوید. طراحی زیبا برای آرم سایت می‌تواند نشان دهد که شما چقدر به‌ظاهر سایت خود و کاربران آن اهمیت داده‌اید و برای آن وقت گذاشته‌اید. شما توسط فاوآیکون می‌توانید در مدت‌زمان طولانی بین کاربران از اعتبار بیشتری برخوردار شوید به‌عنوان‌مثال سایت دیجی کالا با آرم معروف خود بین کاربران خود بهتر شناخته‌شده است و کاربران با دیدن این آیکون سریع آن را از بین دیگر سایت‌ها تشخیص می‌دهدند.

در نظر داشته باشید ساخت فاوآیکون برای سایت شما ضروری نیست؛ و درواقع اگر آن را طراحی نکنید یک صفحه سفید در کنار سایت شما نمایش داده می‌شود. حتی شما می‌توانید از فاوآیکون‌های پیش‌فرض استفاده کنید اما اگر قصد دارید در چشم مخاطب اهمیت بیشتری داشته باشید می‌توانید یک فاوآیکون خاص برای سایت خود طراحی کنید.

توسط فاوآیکون می‌توانید به‌راحتی سایت خود را در بین کاربران شناخته‌شده کنید. این موضوع برای کسانی که تازه وارد کسب‌وکار اینترنتی شده‌اند می‌تواند بسیار مفید و کارآمد باشد. و به جذب بیشتر مشتری برای کسب‌وکار جدید شما منجر شود. با استفاده از فاوآیکون می‌توانید سایت خود را از دیگران متمایز کنید و در واقعاً برند منحصربه‌فرد خود را داشته باشید. توسط فاوآیکون در اقدامی ساده می‌توانید برای خود برند سازی کنید.

نکات مورد توجه در استفاده از favicon

favicon سایزهای متفاوتی دارد ولی بهترین سایزی که شما می‌توانید برای تصاویر آن استفاده کنید 16 در 16 پیکسل است. که یک سایز مطلوب و مناسب برای سایت اینترنتی شما است. همچنین در نظر داشته باشید بهترین فرمت برای فاوآیکون فرمت ico است.

شما باید سعی کنید تصویری با حجم پایین برای فاوآیکون در نظر بگیرید چراکه آیکون سایت جزو اولین المان‌هایی است که زمان لود وبسایت بارگذاری می‌شود. بنابراین حجم پایین فاوآیکون می‌تواند در بارگذاری سریع‌تر و بهتر سایتتان به شما کمک کند.

همواره توجه داشته باشید که جزئیات زیاد اهمیت چندانی ندارد. درواقع با کوچک شدن تصویر جزئیات زیاد به چشم نمی‌آید. شما می‌توانید با یک طراحی ساده برند خود را در ذهن کاربر ماندگار کنید. شما می‌توانید از فاوآیکون‌های ساده یا متحرک استفاده نمایید. درواقع برای زیبایی بیشتر و بیرون آمدن از سادگی، می‌توانید از تصاویر متحرک gif هم برای آیکون سایتتان استفاده کنید.

قرار دادن favicon در وردپرس

برای اضافه کردن فاوآیکون به وردپرس ابتدا باید به بخش نمایش > ویرایشگر مراجعه کنید.

از سمت چپ فایل header.php قالب را بازکنید.

حالا کافیه تا کد زیر را در فایل header.php موجود در پوشه قالبتان قبل یا بعد از کد <title></title> اضافه کنید و بعد آن را ذخیره کنید.

<link rel="shortcut icon" href="<?php echo get_bloginfo('template_url');?>"images/favicon.webp"/> 

آدرس تصویر خود را جای favicon.webp در کد بالا قرار دهید؛ یا یک پوشه به نام images در پوشه قالبتان ایجاد کرده و فایل فاوآیکون سایت خود را به اسم favicon.webp در این پوشه قرار دهید.

از سمت چپ فایل header.php قالب را باز کنید.

حالا کافیه تا کد زیر را در فایل header.php موجود در پوشه قالبتون قبل یا بعد از کد title اضافه کنید و بعد آن را ذخیره کنید.

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...