Favicon چیست و چرا باید از آن استفاده کنیم؟
تا به حال به آیکون کوچکی که کنار نام سایتها در تب مرورگر دیده میشود دقت کردهاید؟ این همان فاویکون یا Favicon است؛ نشانهای کوچک که کمک میکند کاربر میان چند تب باز، سایت شما را سریعتر پیدا کند.
فاویکون فقط یک جزئیات تزئینی نیست. اگر درست طراحی شود، هویت بصری سایت را کامل میکند، ظاهر حرفهایتری به آن میدهد و در بعضی نمایشهای گوگل هم کنار نام سایت دیده میشود. در این مقاله میفهمیم فاویکون چیست، چه تفاوتی با لوگو دارد، بهترین سایز و فرمت آن چیست و چطور آن را به سایت اضافه کنیم.
فاویکون چیست؟
واژه Favicon از ترکیب عبارت Favorite Icon ساخته شده است؛ یعنی آیکونی که برای شناسایی یک وبسایت استفاده میشود. این آیکون معمولاً در بخشهای زیر نمایش داده میشود:
- کنار عنوان سایت در تب مرورگر
- در فهرست بوکمارکها یا سایتهای ذخیرهشده
- میانبر صفحه اصلی موبایل
- تاریخچه مرورگر
- بعضی نتایج جستوجوی گوگل
وقتی کاربر همزمان ده تب باز کرده باشد، احتمالاً متن عنوان سایتها را نمیخواند؛ بلکه با یک نگاه به رنگ و شکل آیکون، تب موردنظرش را پیدا میکند. این دقیقاً همان جایی است که یک آیکون سایت واضح و متمایز ارزش خود را نشان میدهد.
تفاوت لوگو و فاویکون چیست؟
خیلیها فاویکون را همان لوگوی سایت میدانند، اما این دو یک کارکرد ندارند. لوگو برای دیدهشدن در ابعاد مختلف طراحی میشود و ممکن است شامل نام برند، شعار یا جزئیات تصویری باشد. در مقابل، فاویکون باید در فضایی بسیار کوچک، اغلب کمتر از 48 پیکسل، قابل تشخیص بماند.
برای مثال، اگر لوگوی برند شما شامل یک نوشته بلند است، قرار دادن کامل آن در فاویکون انتخاب خوبی نیست؛ چون در اندازه کوچک خوانده نمیشود. بهتر است از یکی از این گزینهها استفاده کنید:
- حرف اول نام برند
- نماد اصلی لوگو
- نسخه سادهشدهٔ نشانه برند
- یک شکل یا رنگ اختصاصی که با برند شما شناخته میشود
یک فاویکون خوب لازم نیست همهچیز را توضیح دهد؛ فقط باید سریع و درست یادآور برندتان باشد.
چرا استفاده از فاویکون مهم است؟
فاویکون بهتنهایی عامل مستقیم رتبهگرفتن در گوگل نیست، اما میتواند تجربه کاربری و اعتماد اولیه مخاطب را بهتر کند. سایتی که در تب مرورگر یا نتایج جستوجو آیکون اختصاصی ندارد، معمولاً ناقصتر و کمحرفهایتر به نظر میرسد.
مهمترین مزایای فاویکون عبارتاند از:
- تشخیص سریعتر برند: کاربر در بین تبها و بوکمارکها سایت شما را راحتتر پیدا میکند.
- برندینگ یکپارچه: لوگو، رنگ و هویت بصری شما از سایت فراتر میرود و در مرورگر هم دیده میشود.
- تجربه کاربری بهتر: کاربران کمتر میان تبهای مشابه گم میشوند.
- ظاهر حرفهایتر: یک آیکون سایت مناسب، حس کاملبودن و توجه به جزئیات را منتقل میکند.
- دیدهشدن در گوگل: گوگل ممکن است فاویکون واجد شرایط را در نتایج جستوجو کنار نام سایت نمایش دهد.
بهترین سایز فاویکون برای سایت چیست؟
فاویکون باید مربع باشد؛ یعنی نسبت تصویر آن 1:1 باشد. اگرچه اندازههای کوچک مثل 16×16 و 32×32 پیکسل هنوز کاربرد دارند، بهتر است فایل اصلی را با کیفیت بالاتر بسازید تا در دستگاهها و موقعیتهای مختلف واضح باقی بماند.
اندازههای پیشنهادی:
- 16×16 پیکسل: تبهای قدیمی مرورگر
- 32×32 پیکسل: مرورگرها و میانبرهای رایج
- 48×48 پیکسل: حداقل مناسب برای نمایش بهتر در سطوح مختلف
- 180×180 پیکسل: آیکون اپل در موبایل
- 192×192 یا 512×512 پیکسل: میانبر اندروید و وباپ
طبق راهنمای گوگل، فایل باید مربع و دستکم 8×8 پیکسل باشد؛ با این حال، استفاده از اندازهای بزرگتر از 48×48 برای کیفیت بهتر توصیه میشود. همچنین گوگل باید بتواند هم صفحه اصلی سایت و هم فایل فاویکون را کراول کند. راهنمای رسمی گوگل برای فاویکون
PNG، ICO یا SVG؛ کدام فرمت فاویکون بهتر است؟
برای ساخت فاویکون، فرمتهای مختلفی وجود دارد و انتخاب آنها به نوع سایت و مرورگرهای هدف شما بستگی دارد.
PNG
PNG انتخابی ساده و رایج است. کیفیت خوبی دارد، از پسزمینه شفاف پشتیبانی میکند و برای بسیاری از سایتها کاملاً کافی است. اگر فاویکون شما یک نماد رنگی یا لوگوی مینیمال است، PNG گزینه مناسبی خواهد بود.
ICO
فرمت favicon.ico قدیمیتر است، اما هنوز سازگاری بسیار خوبی با مرورگرها دارد. میتوانید چند سایز مختلف را در یک فایل ICO قرار دهید. برای سایتهایی که میخواهند از سازگاری گسترده مطمئن باشند، همچنان انتخاب قابلاعتمادی است.
SVG
SVG برای آیکونهای برداری و ساده عالی است؛ چون در اندازههای مختلف بدون افت کیفیت نمایش داده میشود. اگر از این فرمت استفاده میکنید، حتماً بررسی کنید که در مرورگرها و قالب سایت شما درست لود شود.
بهطور کلی، استفاده همزمان از PNG یا SVG در کنار ICO میتواند انتخاب مطمئنی باشد.
اصول طراحی فاویکون حرفهای
طراحی فاویکون با طراحی یک لوگوی عادی فرق دارد. فضای بسیار کمی در اختیار دارید؛ بنابراین هر عنصر اضافی میتواند تصویر را شلوغ و ناخوانا کند.
برای طراحی فاویکون این نکات را رعایت کنید:
- از متنهای طولانی استفاده نکنید.
- جزئیات ریز، خطوط نازک و اشکال پیچیده را حذف کنید.
- کنتراست رنگها را بالا نگه دارید.
- آیکون را روی پسزمینه روشن و تیره بررسی کنید.
- قبل از انتشار، آن را در اندازه 16×16 ببینید.
- از رنگ و فرم همراستا با هویت برند استفاده کنید.
اگر سایت آموزشی دارید، مثلاً میتوانید از نماد ساده کتاب، کلاه فارغالتحصیلی یا حرف اول برندتان استفاده کنید؛ البته بهشرطی که این انتخاب با ظاهر کلی برند هماهنگ باشد.
چگونه فاویکون را در وردپرس اضافه کنیم؟
در بیشتر قالبهای جدید وردپرس، افزودن فاویکون بسیار ساده است:
- وارد پیشخوان وردپرس شوید.
- از بخش «نمایش»، گزینه «سفارشیسازی» را باز کنید.
- وارد بخش «هویت سایت» شوید.
- گزینه «آیکون سایت» را انتخاب کنید.
- فایل مربع خود را بارگذاری و ذخیره کنید.
وردپرس معمولاً خودش نسخههای مناسب را برای دستگاههای مختلف تولید میکند. بعد از ذخیره، سایت را در یک تب ناشناس باز کنید تا نتیجه را ببینید. اگر آیکون قبلی هنوز نمایش داده میشود، کش مرورگر و افزونه کش سایت را پاک کنید.
اضافهکردن فاویکون با HTML
اگر سایت شما وردپرسی نیست یا میخواهید دستی آن را وارد کنید، فایل را در هاست قرار دهید و این کد را داخل بخش <head> سایت بگذارید:
<link rel="icon" type="image/png" href="/favicon.png">
برای فایل ICO نیز میتوانید از این کد استفاده کنید:
<link rel="icon" href="/favicon.ico" sizes="any">
مهم است آدرس فایل درست باشد و فایل با خطای 404 باز نشود. همچنین بهتر است URL فاویکون را مرتب تغییر ندهید؛ چون موتورهای جستوجو ممکن است برای بهروزرسانی آن زمان نیاز داشته باشند.
چرا فاویکون در گوگل نمایش داده نمیشود؟
نمایش فاویکون در گوگل تضمینی نیست و ممکن است مدتی طول بکشد. اگر نمایش داده نمیشود، این موارد را بررسی کنید:
- فایل فاویکون مربع است.
- سایت و فایل تصویر برای خزندههای گوگل مسدود نشدهاند.
- آدرس فایل ثابت و قابلدسترسی است.
- تصویر شما محتوای نامناسب یا گمراهکننده ندارد.
- تگ
linkدر بخش<head>سایت قرار گرفته است. - کش سایت، CDN و مرورگر را پاک کردهاید.
- پس از تغییر، به گوگل برای خزیدن دوباره زمان دادهاید.
جمعبندی
فاویکون کوچک است، اما روی برداشت مخاطب از برند شما اثر میگذارد. یک آیکون سایت ساده، واضح و هماهنگ با هویت بصری، باعث میشود سایتتان در تبهای مرورگر، بوکمارکها و گاهی نتایج گوگل بهتر شناخته شود. پس اگر هنوز فاویکون ندارید، همین امروز یک نسخه مینیمال از لوگوی خود بسازید و آن را به سایت اضافه کنید.
