اکثر افراد زمانی که برای خود یک وبسایت جدید طراحی میکنند، یک بخش کوچک به نام فاوآیکون که میتواند باعث ایجاد یک تفاوت بزرگ برای سایتشان شود را فراموش میکنند. اضافه کرد فاوآیکون به سایت میتواند مزایای زیادی به همراه داشته باشد؛ بنابراین به هیچ عنوان اهمیت آن را دست کم نگیرید! در ادامه این مطلب قصد داریم تا شما را با مفهوم فاوآیکون و نحوه ساخت آن آشنا کنیم، پس به شما پیشنهاد میکنیم که در ادامه این مطلب با ما همراه باشید.
فهرست موضوعات در این آموزش
فاوآیکون favicon چیست؟
برای اینکه متوجه شوید فاوآیکون چیست میتوانید همین الان وارد مرورگر خود شده و وارد یک سایت شوید و از قسمت بالای صفحه، تب سایت را مشاهده کنید. فاوآیکون همان آیکون کوچکی است که در نوار بالا مرورگرها نمایش داده میشود. فاوآیکون که مخفف عبارت Favorite Icon میباشد به معنی آیکون مورد علاقه است. علاوه بر تبهای مرور، شما میتوانید فاوآیکون را در نوار بوکمارکها و همچنین تاریخچه مرورگر خود نیز مشاهده کنید. به صورت خلاصه، فاوآیکون همان نماد سایت شما است که وظیفه معرفی وب سایت شما را بر عهده دارد و به کاربران کمک میکند تا زمانی که صفحات زیادی در مرورگر خود باز کردهاند، بتوانند راحتتر با استفاده از فاوآیکون، سایت شما را پیدا کنند.
نگاهی به تاریخچه فاوآیکون
در سال 1999، شرکت مایکروسافت اینترنت اکسپلور 5 را منتشر کرد که برای بار اول از فاوآیکون پشتیبانی میکرد. در حقیقت فاوآیکون یک نوع فایل به اسم favicon.ico است که در بخش دایرکتوری یک وب سایت قرار داده میشود که در بخشهای مختلفی مثل بخش علاقه مندی ها، در کنار URL و در اینترنت اکسپلور نمایش داده میشود. فاوآیکون در سال 1999 توسط کنسرسیوم وب جهانی استاندارد سازی شد، از فایل فاوآیکون میتوان در هر دایرکتوری سایت استفاده کرد.
بیشتر بخوانید : فریم ورک چیست
فاوآیکون چه ویژگیهای باید داشته باشد؟
با توجه به اهمیت فاوآیکون، قرارگیری آن در سایت یکی از ملزومات طراحی سایت به حساب میآید. برای انتخاب فاوآیکون مناسب باید ویژگیهایی که در ادامه به شما معرفی میکنیم را مد نظر خود قرار دهید:
- پیشنهاد میکنیم که لوگوی کسب و کار خود را به عنوان فاوآیکون سایت انتخاب کنید و یا تصویری از نظر شکل و رنگ مناسب لوگوی شما باشد را انتخاب کنید تا به راحتی قابل تشخیص باشید.
- علاوه بر تصویر، فاوآیکون میتواند به صورت گیف یعنی یک تصویر متحرک نیز باشد.
- اندازه مناسب برای فاوآیکون حدود 16 در 16 پیکسل است.
- توجه داشته باشید که حجم فایل را با نرم افزار فتوشاپ یا سایر ابزارهای مشابه تا حد امکان کاهش دهید.
چرا باید هر سایتی از فاوآیکون استفاده کند؟
اصلیترین دلیل استفاده از فاوآیکون، زیبایی سایت و شناخته شدن آن در بین تبهای باز شده مرورگر است. همچنین باید اضافه کرد که فاوآیکون میتواند به برندسازی آنلاین، اعتماد مصرف کنندگان و همچنین تجربه کاربری بهتر نیز کمک کند.
- تجربه کاربری: فاوآیکون را مثل یک قلاب تصویری برای سایت شما است که باعث میشود تا کاربران بتوانند راحتتر سایت شما را پیدا کنند.
- برندسازی: برای اینکه بتوانید یک برند را در ذهن مخاطبین ماندگار کنید، باید تمامی جزئیات توجه داشته باشید. فاوآیکون با اینکه دارای اندازه کوچکی است، ولی با دیده شدن وبسایت شما و به یاد ماندن استایل، رنگ و لوگوی شما در ذهن وی تأثیر زیادی دارد. همچنین باید اضافه کرد که برند شما به عنوان یک کسب و کار که تمامی اجزای آن با دقت و فکر شده کنار یکدیگر قرار گرفتهاند، در ذهن مخاطبین ثبت میشود.
فاوآیکون روی سئو سایت تأثیری دارد؟
فاوآیکون به صورت مستقیم روی سئو سایت شما تأثیری ندارد؛ ولی میتواند به طور غیر مستقیم تأثیر مثبتی داشته باشد. در ادامه این مطلب چند مورد از اصلیترین فواید فاوآیکون و تأثیر آن روی سئو سایت را بررسی میکنیم:
- افزایش بازدید برای سایتهای کاربرپسند: بدون شک، وجود فاوآیکون در تبهای بالای مرورگر باعث میشود تا سایت کاربر پسند و قابل اعتماد به نظر برسد و کاربران بتوانند بدون هیچ مشکلی سایت شما را در میان تبهای خود پیدا کنند که این موضوع یعنی جلوگیری از اتلاف وقت، افزایش نرخ کلیک و تعامل بهتری که کاربران با سایت شما دارند.
- بوکمارک: معمولا سایتهایی که حاوی فاوآیکون هستند، بیشتر بوکمارک میشوند و بوکمارک شدن آنها نیز یکی از مهمترین عوامل موثر روی سئو سایت است؛ از این رو سایتهایی که از فاوآیکون استفاده میکنند به دلیل بالا بودن جذابیت بصری، شانس بیشتری برای بوکمارک شدن و کسب امتیاز مثبت سئو دارند!
چطور برای سایت خود فاوآیکون قرار دهیم؟
برای قرار دادن فاوآیکون روی سایت خود باید طبق روشهای زیر عمل کنید:
- روش اول: در روش اول باید فاوآیکون مورد نظر خود را در هاست خود آپلود کنید و سپس کد دستوری که در ادامه به شما میدهیم، در تگ <head> سایت خود قرار دهید:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
- روش دوم: اگر سایت شما وردپرسی است، میتوانید به راحتی فایل فاوآیکون را آپلود کنید. برای این کار باید وارد منوی پیشخوان شده و روی گزینه نمایش و سپس سفارشی سازی کلیک کنید. در پنجره باز شده روی گزینه هویت سایت کلیک کرده و در بخش آخر با انتخاب گزینه انتخاب آیکون سایت، فایل فاوآیکون را وارد کنید.
نحوه ساخت فاوآیکون
برای اینکه بتوانید یک فاوآیکون مناسب برای سایت خود طراحی و ایجاد کنید، قبل از هر چیز باید اندازه مناسب را بدانید. به صورت کلی اندازه استاندارد برای فاوآیکون 16 پیکسل با فرمت ico است که برای تمامی مرورگرهای قابل استفاده است. ولی اگر قصد دارید برای هر کاربرد یک فاوآیکون استفاده کنید، میتوانید از اندازههای زیر استفاده کنید.
- 16 پیکسل: مورد استفاده برای تمامی مرورگرها
- 24 پیکسل: سایت پین شده در اینترنت اکسپلور 9
- 32 پیکسل: صفحه برگه جدید در اینترنت اکسپلور
- 57 پیکسل: صفحه اصلی استاندارد IOS
- 72 پیکسل: آیکون مناسب صفحه اصلی Ipad
- 96 پیکسل: مورد استفاده برای Google TV
- 114 پیکسل: نماد برای صفحه اصلی Iphone 14
- 128 پیکسل: مناسب برای وب استور مرورگر کروم
- 195 پیکسل: Opera Speed Dial
همچنین در زمان طراحی فاوآیکون به نکات زیر توجه داشته باشید:
- به سادگی توجه کنید: از آنجایی که فاوآیکون اندازه کوچکی دارد، بهتر است تا جای امکان از یک طرح ساده استفاده کنید؛ چرا که طرحهای پیچیده و دارای جزئیات بالا در این اندازه قابل مشاهده نیستند!
- هویت برند خود را برسانید: فاوآیکون را طراحی کنید که بتواند به خوبی منعکس کننده هویت سایت و برند شما باشد. البته این موضوع بسیار سخت است که در این ابعاد کوچک بتوان این کار را به نحوه احسن انجام داد ولی با کمی خلاقیت میتوانید تصویری را طراحی کنید که هویت بصری و ترکیب رنگ برند شما را به کاربران برساند.
- از حروف استفاده کنید: یکی از سادهترین راهها برای انتخاب فاوآیکون، استفاده از حرف اول نام برند یا مخفف آن است! چرا که ممکن است پیدا کردن تصویر مناسب کار سادهای برای شما نباشد.
- از لوگو استفاده کنید: اگر لوگوی شما به گونهای طراحی شده است که در ابعاد کوچک نیز به خوبی قابل مشاهده است، بهترین کار استفاده از لوگو به عنوان فاوآیکون است.
- از فرمت مناسب استفاده کنید: اگر طرح مناسبی برای فاوآیکون خود انتخاب کردهاید، حتما توجه داشته باشید که در زمان خروجی گرفتن، با فرمت PNG آن را ذخیره کنید.
سخن پایانی
در این مقاله سعی کردیم تا به بررسی فاوآیکون و کاربردها و نحوه ساخت آن بپردازیم. با اینکه فاوآیکون اندازه کوچکی دارد ولی از نظر بصری اهمیت زیادی دارد و در زمان طراحی سایت باید حتما آن را مد نظر خود قرار دهید. در این مطلب به اهمیت فاوآیکون در طراحی و سئو سایت پرداختیم. امیدوار هستیم تا با طراحی یک فاوآیکون زیبا و ساده، میزان جذابیت وبسایت خود را برای کاربران چند برابر کنید.
1 Comment
خیلی خوب شده که cms های جدید اومدن و به صورت پیش فرض این امکانات رو داره
قبلا یه طراح سایت یا وردپرس کار باید همه اینها رو خودش انجام میداد