favicon چیست؟ چرا باید از favicon استفاده کرد؟ + ساخت favicon

5.0/5 rating (3 votes)

Favicon یک تصویر مربعی کوچک است که در کنار نام وب‌سایت روی تب مرورگرهای مختلف نمایش داده می‌شود. اگر همین حالا به نوار تب‌های مرورگر خود نگاهی بندازید، لوگوی مه ویژن را در کنار عنوان این صفحه مشاهده خواهید کرد.

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

استفاده از favicon تاثیر زیادی روی تجربه کاربری سایت و رضایت کاربر دارد. قرار دادن فاوآیکون برای سایت بسیار ساده است و شما می‌توانید به راحتی این امکان را برای وب‌سایت خود فراهم کنید. در ادامه درباره فاوآیکون و ضرورت استفاده از آن صحبت می‌کنیم و در نهایت مراحل ساخت و قرار دادن favicon روی سایت را آموزش می‌دهیم.

favicon چیست؟

favicon یک تصویر کوچک، معمولا ۱۶ در ۱۶ پیکسل، است که نماینگر نام تجاری و برند شماست و هدف اصلی آن شناسایی وب‌سایت شما از بین چندین تب باز شده در مرورگرهای مختلف است. معمولا کاربران هنگام جستجو در گوگل، چندین تب مختلف را باز می‌کنند و در ابتدا نگاهی کلی به آن می‌اندازند. اگر سایت شما فاوآیکون داشته باشد، این امکان را به کاربر می‌دهد که به راحتی سایت شما را از بین تب‌های مختلف پیدا کنند؛ علاوه‌بر این، فاوآیکون به برندینگ شما نیز کمک می‌کند.

با توجه به اینکه فاوآیکون بسیار کوچک است، طراحی آن نیز باید ساده باشد. معمولا اغلب سایت‌ها از لوگوی سایت به عنوان favicon استفاده می‌کنند؛ اما اگر لوگوی شما پیچیده باشد، می‌توانید از شکل ساده‌تر لوگو برای فاو آیکون استفاده کنید. به عنوان مثال اگر لوگوی شما دربردانده نام تجاری شما باشد، می‌توانید تنها از حرف اول آن استفاده کنید.

علاوه بر تب مرورگر، فاوآیکون در قسمت بوک مارک و تاریخچه سرچ (History) نیز نمایش داده می‌شود و به کاربر برای انتخاب راحت‌تر سایت کمک می‌کند؛ به خصوص اگر کاربر تب‌های زیادی را باز کرده باشد.

چرا باید از favicon استفاده کرد؟

فاوآیکون می‌تواند به صورت غیرمستقیم روی سئو سایت شما تاثیرگذار باشد. امروزه اغلب وب‌سایت‌ها از لوگوی سایت و برند خود به عنوان فاوآیکون استفاده می‌کنند؛ این ویژگی علاوه بر اینکه به کاربر کمک می‌کند تا راحت‌تر سایت شما را از بین تب‌های باز شده پیدا کند، باعث افزایش آگاهی از برند شما نیز می‌شود.

افزایش تجربه کاربری

یکی دلایل مهم برای استفاده از فاوآیکون، افزایش تجربه کاربری سایت است. هنگامی که شما فاو آیکون را برای سایت خود قرار می‌دهد، لوگوی سایت شما در تب مرورگر نیز نمایش داده می‌شود؛ از این رو هنگامی که کاربر تب‌های زیادی را در مرورگر باز کرده باشد، سایت شما به راحتی می‌تواند پیدا کند.

آگاهی از برند

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

اعتبار برند

اگر فاو آیکون را برای سایت خود قرار ندهید، مرورگرها به صورت پیش فرض یک تصویر مشخص و خالی را در تب مرورگر نمایش می‌دهند. از آن جایی که امروز اغلب وب‌سایت‌ها از favicon استفاده می‌کنند، قرار دادن فاوآیکون باعث افزایش اعتبار برند شما می‌شود.

بهینه‌سازی سئو

همانطور که گفتیم، کاربران هنگام جستجو در گوگل در ابتدا روی لینک وب‌سایت‌های مختلفی کلیک می‌کنند و سپس به دنبال بررسی هر یک از سایت‌ها می‌روند. قرار دادن فاوآیکون برای سایت، شناسایی وب‌سایت شما را در تب‌های مختلف مرورگر برای کاربر آسان‌تر می‌کند؛ از این رو شانس کلیک دوباره کاربر روی تب سایت شما بالا می‌رود که این موضوع تاثیر مثبتی روی سئو شما خواهد داشت.

ساخت favicon

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

طراحی فاوآیکون

معمولا از لوگو یا قسمتی از آن به عنوان فاوآیکون استفاده می‌شود. طراحی فاو آیکون شما باید بسیار ساده باشد. مطمئن باشید که از یک طرح ساده برای فاو آیکون استفاده می‌کنید که در ابعاد کوچک نیز قابل تشخیص باشد؛ پس جزئیات زیادی را وارد طرح نکنید. معمولا فاوآیکون را در ابعاد ۱۶ در ۱۶ پیکسل طراحی می‌کنند؛ اما طراحی سایز ۶۴ در ۶۴ پیکسل نیز متداول است.

برای طراحی فاوآیکون می‌توانید از نرم افزارهای گرافیکی مثل فتوشاپ استفاده کنید؛ اگر مهارت کافی در طراحی ندارید، ابزارهای آنلاین نیز می‌تواند به شما کمک کند. یکی از وب‌سایت‌هایی که می‌توانید به کمک آن فاوآیکون سایت را به‌راحتی طراحی کنید، سایت favicon.cc است.

فرمت فاوآیکون

بهترین فرمت برای طراحی فاوآیکون، فرمت ICO است؛ اما امروزه برخی از مرورگرهای فرمت PNG را نیز برای فاوآیکون استفاده می‌کنند. پس از طراحی فاو آیکون، نوبت به تغییر فرمت آن می‌رسد. شما به راحتی می‌توانید به کمک ابزار آنلاین فرمت فایل favicon را تغییر دهید.

یکی از وب‌سایت‌های آنلاینی که می‌توانید به راحتی توسط آن فرمت فایل فاوآیکون را تغییر دهید، convertio.co است. با ورود به سایت و آپلود تصویر و انتخاب فرمت ICO می‌توانید به راحتی فرمت فاو آیکون را تغییر دهید.

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

قرار دادن فاوآیکون روی سایت

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

قرار دادن کد HTML

پس از طراحی و بارگذاری فاوآیکون روی سایت و هاست، آخرین قدم برای ساخت فاوآیکون، قرار دادن کد HTML روی سایت است. در قسمت <head> کدهای وب‌سایت شما باید مانند نمونه زیر، کد مخصوص فاو آیکون را قرار دهید تا favicon روی تب مرورگر نمایش داده شود.
 

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />