آیا هنگامی که برای جست و جوی یک موضوع، چندین تب مختلف را همزمان در مرورگر خود باز می‌کنید، به آیکون‌های کوچک کنار عنوان سایت دقت کرده‌اید؟ می‌دانید این آیکون‌ها چیست و چرا از آن‌ها استفاده می‌کنیم؟ این آیکون‌های کوچک فاوآیکون هستند که یکی از معیارهای امتیازدهی در سئو محسوب می‌شوند. فاوآیکون‌ها با وجود اینکه کوچک هستند، نقش مهمی در برند سازی برای کسب و کار شما ایفا می‌کنند که در این مقاله در مورد آن صحبت می‌کنیم. همچنین با نحوه ساخت فاوآیکون و قرار دادن آن در وبسایت خود نیز آشنا می‌شویم. پس تا انتهای این مقاله با ما همراه باشید.
فاوآیکون یا favicon چیست؟
فاوآیکون، تصویر یا نماد کوچکی است که در کنار عنوان سایت در مرورگر نشان داده می‌شود. با استفاده از فاوآیکون، کاربرانی که همزمان چندین صفحه باز در مرورگر دارند، قادر هستند تا زودتر صفحه شما را پیدا کنند. بنابراین استفاده از فاوآیکون‌ها باعث تجربه کاربری بهتر و افزایش زیبایی سایت می‌شود.
تاریخچه فاوآیکون
در سال 1999 برای اولین بار در اینترنت اکسپلورر 5 ، فاوآیکون‌ها برای کمک به مخاطبان برای تشخیص صفحات مورد استفاده قرار گرفتند. در دسامبر سال 1999، کنسرسیوم وب جهانی (W3C)، فاوآیکون را استاندارد سازی کرد که بر اساس این استاندارد سازی، فاوآیکون می‌تواند در هر دایرکتوری وبسایت و با هر فرمت تصویری، قابل استفاده باشد.
favicon
اهمیت فاوآیکون
فاوآیکون‌ها کوچک و معمولا در ابعاد 16*16 پیکسل هستند. اما نقش آن‌ها در شناخته شدن وبسایت شما قابل توجه است. در ادامه به اهمیت استفاده از فاوآیکون می‌پردازیم.
- کاربرانی که از طریق موبایل سایت شما را به صفحات اصلی در مرورگر خود اضافه می‌کنند، سایت شما را با فاوآیکون مشاهده می‌کنند.
- فاوآیکون‌ها احتمال تعامل کاربران با وبسایت شما را افزایش می‌دهند. بنابراین باعث افزایش رتبه سئو شما نیز می‌شوند.
- باعث افزایش اعتبار برند شما می‌شوند و کاربران بیشتر به شما اعتماد می‌کنند.
نحوه ساخت فاوآیکون
- ابتدا با استفاده از نرم‌افزارهای ویرایش تصویر، فاوآیکون خود را طراحی کنید.
- لوگو ساخته شده را در سایت‌های ساخت فاوآیکون مانند online favicon maker قرار دهید تا با فرمت ico یا png به شما تحویل دهد.
- ابعاد نمادک خود را روی 16*16 پیکسل یا 32*32 پیکسل یا 64*64 پیکسل تنظیم کنید.
- آیکون خود را با استفاده از روش‌هایی که در ادامه ذکر می‌شود در سایت قرار دهید.
اضافه کردن فاوآیکون به سایت وردپرسی
در این قسمت روش‌های مختلف قرار دادن فاوآیکون در سایت وردپرسی را شرح می‌دهیم.
- با استفاده از کد نویسی
ابتدا وارد هاست خود شوید. سپس در files روی گزینه File manager کلیک کنید. وارد Public_html شده و به دایرکتوری Wp-content بروید و در آن دایرکتوری Themes را باز کنید. در اینجا روی گزینه upload که در بالای صفحه وجود دارد، کلیک کنید. تصویر فاوآیکون خودتان را قرار دهید. سپس روی فایل header.php کلیک راست کنید و گزینه edit را بزنید. در فایل باز شده، کد زیر را در بین دو تگ <title></title> قرار دهید.
<link rel=”shortcut icon” href=”favicon.png”/>
اضافه کردن فاوآیکون
- با استفاده از افزونه insert headers and footers
در این روش، ابتدا وارد سایت https://realfavicongenerator.net/ شوید و فاوآیکون خود را بارگذاری کنید تا یک url برای آن ساخته شود. روی گزینه Generate your Favicons and HTML code کلیک کنید تا یک کد HTML ایجاد شود و آن را کپی کنید. در افزونه insert headers and footers، کد خود را در قسمت <head> صفحه قرار دهید و تنظیمات را ذخیره کنید.
- با استفاده از تنظیمات قالب
ابتدا در پنل سایت وردپرسی خود، به قسمت نمایش و سپس به قسمت سفارشی سازی مراجعه کنید.
قسمت سفارشی سازی قالب
گزینه هویت سایت را انتخاب کنید.
هویت سایت
به قسمت نمادک سایت بروید و فاوآیکون مورد نظر خود را بارگذاری کنید تا نمایش داده شود.
نمادک سایت
- گذاشتن فاوآیکون در وردپرس 4.2 یا قدیمی‌تر
فاوآیکون مورد نظر خود را در هاست خود و در ریشه وبسایت قرار دهید. پوشه Public_html را باز کنید و به مسیر Wp-content بروید، در آن به مسیر Themes بروید. سپس کد زیر را در فایل header.php اضافه کنید.
<link rel=”icon” href=”http://yourwebsite.com/favicon.png” type=”image/x-icon” /><link rel=”shortcut icon” href=”http://yourwebsite.com/favicon.png” type=”image/x-icon”/> در نهایت گزینه save changes را بزنید تا تغییرات ذخیره شوند.
اندازه مناسب فاوآیکون
فاوآیکون‌ها اندازه 16*16 پیکسل و فرمت ico دارند. اگر می‌خواهید فاوآیکون اختصاصی ایجاد کنید می‌توانید از اندازه‌های زیر استفاده کنید.
16 پیکسل: مناسب استفاده در همه مرورگرها
24 پیکسل: سایت پین شده در اینترنت اکسپلورر 9
32 پیکسل: صفحه برگه جدید در اینترنت اکسپلورر، دکمه نوار وظیفه در ویندوز 7
57 پیکسل: صفحه اصلی استاندارد ios، نسل اول آیفون تا 3G
72 پیکسل: نماد صفحه اصلی iPad
96 پیکسل: فاویکون مورد استفاده پلتفرم Google TV
114 پیکسل: نماد صفحه اصلی iPhone 4
128 پیکسل: Chrome Web Store
195 پیکسل: Opera Speed Dial
نکات مهم در طراحی فاوآیکون
- اندازه فاوآیکون
بهتر است از اندازه 16* 16 پیکسل برای طراحی فاوآیکون خود استفاده کنید. همانطور که گفته شد این اندازه در همه مرورگرها قابل استفاده است.
طراحی فاوآیکون
- طراحی ساده
طراحی فاوآیکون‌ها بهتر است که ساده باشد. با توجه به اینکه فاوآیکون‌ها اندازه کوچکی دارند، استفاده از جزئیات زیاد در طراحی، باعث می‌شود که شلوغ به نظر برسند و کاربر به آسانی متوجه مفهوم آن نمی‌شود.
- هویت برند
فاوآیکون باید نشان دهنده هویت سایت شما باشد. بنابراین باید به گونه‌ای طراحی شوند که کاربران با دیدن آن متوجه شوند کسب و کار شما چیست و در چه حوزه‌ای فعالیت می‌کنید.
- رنگ‌‌های مورد استفاده
رنگی که برای طراحی فاوآیکون خود از آن استفاده می‌کنید، باید با توجه به کسب و کارتان انتخاب شود. همچنین باید با هر پس زمینه‌ای قابل دیدن باشد.
- فرمت مناسب
مناسب‌ترین فرمت برای فاوآیکون‌ها، .ico است.
- حجم تصاویر
تصاویری که در طراحی استفاده می‌کنید را با استفاده از ابزارهای مربوطه مانند فوتوشاپ، بهینه‌سازی کنید تا حجم کمتری داشته باشند.
فاوآیکون در کجا نمایش داده می‌شود؟
- فاوآیکون‌ها در بالای نوار آدرس مرورگر نمایش داده می‌شوند. اگر برای سایت خود فاوآیکون نداشته باشید، نماد مرورگر عمومی نمایش داده می‌شود.
- در صفحاتی که در تاریخچه مرورگر قرار دارند، در کنار آدرس سایت نمایش داده می‌شود.
- در صفحات بوک مارک شده در کنار آدرس سایت نشان داده می‌شود.
سخن پایانی
در این مقاله با فاوآیکون و تاریخچه آن آشنا شدیم. دانستیم چرا باید از آن‌ها استفاده کنیم و یاد گرفتیم که چگونه و از چه ابزاری باید استفاده کنیم تا آن‌ها را طراحی کنیم و در نهایت در وبسایت خود قرار دهیم. اگر هنوز برای وبسایت خود فاوآیکون نساخته‌اید یا قصد دارید آن را تغییر دهید، می‌توانید طبق آموزش‌های این مقاله اقدام کنید و اعتبار برند خود را افزایش دهید. همچنین نکات گفته شده برای طراحی فاوآیکون را مد نظر قرار دهید تا طرح زیباتری خلق کنید. از اینکه تا پایان این مقاله با ما همراه بودید از شما سپاسگزاریم.
Leave A Comment