Favicon چیست و چرا وبسایت به آن نیاز دارد؟

Favicon (فاویکون) یک تصویر کوچک است که یک وب سایت را در مرورگرهای وب نشان می دهد. اگر در حال حاضر به نوار آدرس مرورگر خود نگاهی بیندازید، مطمئن هستم که چندین Favicon را خواهید دید. به طور معمول، Favicon دارای یک لوگو، حرف اول نام شرکت یا به سادگی تصویری هستند که مشخصات وب سایتی را که نشان می دهد منعکس می کند.

Favicon ها به ما کمک می کنند تا سریعاً هر برگه مرورگر را با یک وب سایت خاص مطابقت دهیم. و اگر شما هم مانند من هستید و تمایل دارید که ده ها برگه را به طور همزمان باز نگه دارید – در نهایت قادر به خواندن نام آنها نیستید – Favicon ها بهترین دوستان شما هستند که پیدا کردن صفحه وب مورد نیاز شما را بسیار آسان تر می کنند.

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

از اینترنت اکسپلورر گرفته تا SERP گوگل

در سال ۱۹۹۹، Favicon در اینترنت اکسپلورر معرفی شد تا به جستجو گران کمک کند تا صفحات وب علامت گذاری شده را از دیگران جدا کنند. از آنجایی که صفحات علامت گذاری شده در اینترنت اکسپلورر «مورد علاقه» نامیده می‌شوند، کلمات «مورد علاقه» و «نماد» با هم ترکیب شدند تا یک عبارت جدید ایجاد کنند.

1. امروزه، فاویکون‌ها دقیقاً بالای نوار آدرس نمایش داده می‌شوند، صرف نظر از اینکه وب‌سایت نشان داده می شود یا خیر. در صورتی که یک وب سایت فاویکون نداشته باشد، مرورگر یک نماد مرورگر عمومی را نمایش می دهد.
2. علاوه بر نوار آدرس، Favicon ها نیز در تاریخچه مرورگر یافت می شوند.
3. صفحات نشانک گذاری شده نیز با فاویکون در نوار نشانک ها همراه خواهند بود.
4. از ماه می ۲۰۱۹، گوگل از فاویکون ها در SERP موبایل استفاده کرده است، اما شما این نمادها را در SERP دسکتاپ نخواهید دید.

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

Favicon های فیس بوک و توییتر دقیقاً شبیه لوگوهای مربوطه خود هستند. بنابراین، آیا به این معنی است که تنها چیزی که برای فاویکون نیاز دارید این است که تصویر لوگوی خود را کوچک کنید و آن را در وب سایت خود آپلود کنید؟ بیایید عمیقاً در تمام جزئیات فنی غوطه ور شویم و در مورد آنچه برای ایجاد یک فاویکون لازم است صحبت کنیم.

الزامات فنی برای ایجاد Favicon

اکنون، اگر می‌خواهید Favicon های شما به درستی در انواع دستگاه‌ها – با کیفیت خوب و با تصویری که در ذهن دارید – نشان داده شوند، باید دستورالعمل‌ها، استانداردها، بهترین شیوه‌ها، اساساً همه پارامترهای فنی را دنبال کنید.

اما از کجا باید شروع کرد؟ با انتخاب قالب و اندازه فاویکون مناسب شروع کنید.

فرمت Favicon

در ابتدا، تمام Favicon ها به‌عنوان فایل‌های ICO ایجاد می‌شدند، قالبی که توسط مایکروسافت برای ذخیره نمادهای برنامه ویندوز ایجاد شد. بزرگترین مزیت این فرمت این است که می تواند تصاویر با اندازه های مختلف را در یک فایل ذخیره کند.

در گذشته، اینترنت اکسپلورر فقط از این فرمت فایل پشتیبانی می‌کرد، اما مرورگر های وب امروزی به شما اجازه می‌دهند از آیکون‌ های PNG و برخی از مرورگر ها حتی از فاویکون‌ های GIF، JPEG و SVG استفاده کنید.

به طور کلی، Favicon های ICO در حال حاضر قدیمی در نظر گرفته می شوند و امروزه اکثر وب سایت ها فاویکون هایی با فرمت PNG دارند. دلیل این امر کیفیت تصویر است: فاویکون‌های PNG با سازگاری بین مرورگرها و پلتفرم‌های مختلف در اکثر مرورگر ها و دستگاه‌ های مدرن بسیار بهتر به نظر می‌ رسند.

Favicon ها در فرمت‌ های فایل SVG، GIF و JPEG از نظر سازگاری با مرورگر چندان عالی نیستند. با این حال، این مسئله ممکن است در آینده تغییر کند. فرمت SVG (تصاویر برداری مقیاس پذیر) ممکن است به یک قانون جدید تبدیل شود، زیرا استفاده از آن مشکل ایجاد چندین فاویکون در اندازه های مختلف برای پاسخگویی به هر دستگاه محبوب را حل می کند. بنابراین، در حالی که در حال حاضر تنها تعداد کمی از مرورگر ها از فاویکون های SVG پشتیبانی می کنند، بقیه ممکن است به زودی به آن دسترسی پیدا کنند.

برای اطلاع از اینکه کدام قالب‌ های Favicon توسط مرورگر های مختلف پشتیبانی می‌ شوند، به وب‌ سایت Can I Use مراجعه کنید. برای مثال، در اینجا می توانید ببینید که کدام نسخه مرورگر با فاویکون های PNG و SVG سازگار است.

اندازه فاویکون

اندازه فاویکون کلاسیک ۱۶×۱۶ پیکسل مربوط به ۳۲×۳۲ پیکسل در صفحه نمایش با وضوح بالا است. در حالی که گوگل از ۱۶x16px در SERP های تلفن همراه خود استفاده می کند، دستورالعمل های آن می گوید که فاویکون ها در این اندازه ارائه نشود. در عوض، گوگل توصیه می‌کند فاویکون‌هایی با وضوح بالاتر ایجاد کنید که مضربی از مربع ۴۸ پیکسل است. بنابراین، اندازه فاویکون شما باید ۴۸x48px، ۹۶x96px، ۱۴۴x144px و غیره باشد. در همین حال، فایل های SVG نیازی به اندازه خاصی ندارند.

اکنون، همانطور که ویژگی اندازه در HTML5 معرفی شد، می توانید به راحتی چندین اندازه از یک نماد را مشخص کنید. ویژگی به شما امکان می دهد عرض و ارتفاع فاویکون را تنظیم کنید و همچنین می توانید چندین مقدار را که با یک فاصله از هم جدا شده اند را مشخص کنید:

دستورالعمل های اضافی برای فاویکون

و در اینجا چند دستورالعمل کلی ارائه شده توسط گوگل وجود دارد که باید به آنها پایبند باشید:

• از نماد مربع استفاده کنید.
• فاویکون باید فقط نشان دهنده برند شما باشد و حاوی نمادهای نامناسب (مانند صلیب شکسته) نباشد — در غیر این صورت گوگل آن را نشان نمی دهد و به جای آن از نماد عمومی فاویکون استفاده می کند.
• فایل فاویکون باید برای خزنده های گوگل (نماینده کاربر فاویکون گوگل) قابل دسترسی باشد.

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

چرا نباید سایت شما بدون Favicon بماند

Favicon ها به وب‌ سایت‌ها کمک می‌ کنند تا در اقیانوس وسیع منابع آنلاین شناور بمانند، به علاوه آن‌ ها را در نظر بازدیدکنندگان جذاب‌ تر و حرفه‌ای‌ تر می‌ کنند. حتی این مسئله می تواند در مواردی که حتی فکرش را نمی کنیم، مانند pogo sticking نیز تاثیر گذار باشد.

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

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