نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ

معنی و پیشینه استفاده از فاوآیکن (Favicon) در وب

فاوآیکن (Favicon مخفف Favorite icon یا آیکن برگزیده) که با عبارات دیگری مانند Shortcut icon, Website icon, Tab icon, URL icon و Bookmark icon هم شناخته می شود ابتدا در سال 1999 میلادی در مرورگر اینترنت اکسپلورر 5 توسط شرکت مایکروسافت معرفی و استفاده شد که یک فایل با عنوان favicon.ico در ریشه سایت (فولدر www یا public_html) بود و با نمونه آدرس زیر فراخوانی می شد:

http://yoursite.com/favicon.ico

کارکرد فاوآیکن همانند کاربردهای امروزی آن استفاده در قسمت بوکمارک ها به عنوان لوگو و نمایش در کنار نشانی URL سایت در نوار آدرس مرورگرها بود، هرچند اینترنت اکسپلورر ابتدا فاوآیکن را صرفا برای صفحات بوکمارک شده نمایش می داد و این ساز و کاری برای اطلاع از تعداد افرادی بود که صفحه را به لیست علاقمندی های خود اضافه می کردند اما در مدت زمانی کوتاه این شیوه برای تمام صفحات وبسایت ها به کار گرفته شد، در همین سال کنسرسیوم جهانی وب W3C در HTML نسخه 4 و XHTML نسخه 1 استانداردی برای استفاده از فاوآیکن در نظر گرفت که مبتنی بر تگ link و خاصیت rel بود که در قسمت head صفحه درج می شد تا فرمت، نام و آدرس URL فایل آیکن را مشخص و به مرورگرها معرفی کند، بر خلاف آنچه گفتیم در این استاندارد فایل آیکن می توانست جایی خارج از ریشه سایت و با فرمتی غیر از ico نیز باشد.

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

چگونه فاوآیکن طراحی کنیم؟

همان طور که اشاره شد امروزه فاوآیکن می تواند فرمت و اندازه های مختلف داشته باشد اما پایه و اساس کار با فرمت ico و اندازه 16 در 16 پیکسل شروع و در حال حاضر هم استفاده می شود، اما برای ساخت و طراحی آیکن با فرمت ico نیاز به برنامه هایی تحت عنوان سازنده آیکن داریم، برای مثال به نظر برنامه Axialis IconWorkshop انتخاب مناسبی برای انجام این کار است که با یک جستجوی ساده در وبسایت های داخلی قابل دریافت خواهد بود، پس از نصب این برنامه می توانیم در محیط آن به کمک ابزارهای موجود آیکن مورد نظرمان را طراحی کنیم، هرچند با توجه به قدرت و انعطاف پذیری بیشتر برنامه های گرافیکی توصیه می کنیم برای طراحی آیکن ترجیحا ابتدا از این برنامه ها استفاده و صرفا برای آماده سازی خروجی نهایی از برنامه های مخصوص ساخت آیکن استفاده کنیم، به طور خلاصه:

طراحی آیکن ----------------> برنامه های گرافیکی نظیر فتوشاپ

خروجی آیکن ---------------> برنامه های اختصاصی آیکن ساز

لذا در گام اول در برنامه گرافیکی فتوشاپ (Adobe Photoshop) یا سایر برنامه های طراحی وکتور مانند Adobe Illustrator یا Inkscape آیکنی در ابعاد 228*228 پیکسل و عمق 32 بیت با طراحی دلخواه و با فرمت png یا svg می سازیم (توصیه ما استفاده از فرمت انعطاف پذیر svg است)، سعی کنیم تا حد امکان از ترکیب چند رنگ با قابلیت تمایز مناسب استفاده کنیم به طور مثال برای متن و پس زمینه از رنگ هایی که شباهت زیادی به هم دارند و در ابعاد کوچک به راحتی از هم تفکیک و تمایز داده نمی شوند استفاده نکنیم یا از سایه ها کمتر استفاده کنیم چرا که با کوچک شدن اندازه آیکن وضوح کلی تصویر نیز کاهش می یابد و ممکن است فرم مورد نظر را از دست بدهد، در مجموع آزمون و خطا و بررسی آیکن سایت های معتبر روش متداول و پیشنهاد خوبی است تا به انتخاب ایده آل و ترکیب رنگی مد نظرمان نزدیک شویم، سپس از تصویرمان با فرمت png یا svg خروجی گرفته و فایل را وارد برنامه سازنده آیکن می کنیم و با اندازه 16*16 پیکسل و ترجیحا با استاندارد رنگی True Colors یا RGB/A از آن خروجی با پسوند ico می گیریم (در صورتی که برنامه به صورت پیش فرض این فرمت را نداشت در هنگام ذخیره از منوی Save As نام را به همراه فرمت به فرض file.ico تایپ می کنیم)، در گام آخر فایل خروجی را در سروری آنلاین یا در فضای سایت خود آپلود و آدرس آن را در تگ link جایگذاری کرده و کد را در قسمت head صفحه وب و بین کدهای HTML قالب سایت یا وبلاگمان قرار می دهیم، نحوه تنظیم فایل ico در تگ link در ادامه توضیح داده می شود.
نکته: برنامه ساخت آیکن ممکن است استانداردهای مختلفی را پیشنهاد دهد، در نظر داشته باشیم که برای ساخت آیکن های با پس زمینه شفاف (Transparent) کانال Alpha باید در تنظیمات آیکن و برای خروجی گرفتن فعال باشد.

کد نمایش فاوآیکن در نوار آدرس مرورگر، فرمت ico

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

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

توضیح:
- برای درج فاوآیکن از تگ link با صفت rel و مقدار shortcut icon استفاده می کنیم، در HTML5 این مقدار می تواند هم به صورت shortcut icon و هم به صورت icon استفاده شود اما جهت سازگاری با مرورگرهای قدیمی از جمله نسخه های ماقبل 11 اینترنت اکسپلورر بهتر است از مقدار shortcut icon استفاده کنیم.
- در صفت type باید نوع MIME را برابر image/x-icon قرار دهیم، اگرچه MIME اصلی برای فرمت ico طبق استاندارد IANA (مخفف Internet Assigned Numbers Authority) به صورت image/vnd.microsoft.icon است اما این پارامتر با مقدار image/x-icon برای سازگاری با مرورگر اینترنت اکسپلورر مورد نیاز بوده و در حال حاضر نیز به همین شکل استفاده می شود.
- در قسمت href آدرس URL فایل فاوآیکن را درج می کنیم که بهتر است با همین نام یعنی favicon.ico ذخیره و آپلود شده باشد.
- در نهایت کد فاوآیکن در بین تگ های head صفحه وب (در کدنویسی HTML قالب سایت) درج می شود.

کد نمایش فاوآیکن در نوار آدرس مرورگر، سایر فرمت ها

امروزه با توجه به تنوع دستگاه ها و پلتفرم هایی که کاربران استفاده می کنند از جمله رایانه های شخصی، لپ تاپ ها، تبلت ها، تلفن های همراه و... اغلب مرورگرهای معروف نظیر فایرفاکس، گوگل کروم، سافاری و نظایر آنها علاوه بر فرمت معمول ico از آیکن های با فرمت gif (حتی به صورت متحرک) و آیکن های دارای اندازه و کیفیت های متفاوت با فرمت های png و svg پشتیبانی می کنند که به عنوان یک راه حل سازگاری می توانیم فرمت ها و اندازه های مختلف را با هم ترکیب کرده تا در دستگاه هایی که از این قابلیت ها پشتیبانی می کنند آیکن مناسب آنها به صورت متحرک یا با اندازه و کیفیت های متفاوت نشان داده شود و در سایر مرورگرها آیکن پیش فرض با فرمت ico بارگذاری گردد.

<link rel="icon" type="image/gif" href="http://yoursite.com/favicon.gif">

<link rel="icon" type="image/png" href="http://yoursite.com/favicon.png">

<link rel="icon" type="image/svg+xml" href="http://yoursite.com/favicon.svg">

چند توصیه:
- بهتر است از آیکن های متحرک در صفحات وب استفاده نکنیم، چرا که نظر کاربران به جای اینکه به مطالب سایت یا وبلاگمان جلب شود ممکن است به آیکن متحرک در نوار آدرس معطوف شود که این حالت خیلی جالب نیست.
- اندازه فایل آیکن را در حد امکان کم حجم ایجاد کنیم، ارزش این کار مخصوصا زمانی که کاربران با اینترنت کیفیت پائین در حال مرور صفحات یا فید آر اس اس سایت یا وبلاگمان هستند مشخص می شود.
- فرمت svg به دلیل حجم کم، کیفیت نمایش خوب (به دلیل بُرداری بودن و انعطاف پذیری با اندازه های مختلف) و سازگاری با اغلب مرورگرها می تواند گزینه مناسبی باشد.
- سعی کنیم آیکنی ساده و واضح  با ترکیب رنگی متمایز (به فرض پس زمینه آبی با نوشته سفید) بسازیم، به یاد داشته باشیم که فاوآیکن تنها یک نشانه است و قرار نیست تمام محتوای صفحه خود را در آن نشان دهیم.
- در HTML نسخه 5 صفت sizes جهت در نظر گرفتن ابعاد مختلف برای آیکن ها پیش بینی شده است که با استفاده از این امکان می توان آیکن هایی در ابعاد متفاوت داشته باشیم تا دستگاههای مختلف (در صورت پشتیبانی و نیاز) با توجه به آیکن و استاندارد مد نظر یک مورد را بر سایر موارد ترجیح دهند، ابعاد آیکن ها می تواند به صورت 32*32، 96*96، 128*128، 192*192 و 228*228 پیکسل باشد که انواع مختلف دستگاههای امروزی را پوشش می دهد.

<link rel="icon" type="image/png" href="http://yoursite.com/favicon.png" sizes="96x96">

یا

<link rel="icon" type="image/png" href="http://yoursite.com/favicon.png" sizes="96x96 128x128">

در حالت اخیر آیکن با ابعاد 128*128 طراحی شده که در دو اندازه مختلف 96 و 128 پیکسل قابل نمایش است.
یادآوری: نکته جالب در مورد صفت sizes استفاده از عبارت x است که برای تعیین ابعاد آیکن ها توسط HTML در نظر گرفته شده است، این عبارت را نباید با علامت ضربدر (×) اشتباه بگیریم، در HTML از علامت X یا x برای تعیین ابعاد آیکن استفاده می کنیم.

توجه» این مطلب قدیمی و در حال بازبینی و ویرایش (طی چند روز آینده) است، محتوای ارائه شده ممکن است به روز نباشد.

کد نمایش آیکن سازگار با سیستم عامل Android و iOS

با وجود در نظر گرفتن استانداردی خاص در HTML نسخه 5 برای درج آیکن در صفحات وب، سیستم عامل های موبایل از جمله Android و بخصوص iOS علاقمند هستند تا همچنان از شیوه های مد نظر خود استفاده کنند، در همین چارچوب با توجه به کثرت کاربرانی که صفحات وب را با موبایل خود مرور می کنند و اهمیت پیش بینی تنظیمات مخصوص موبایل می توانیم کدهای مربوط به آیکن های مخصوص این سیستم عامل ها را در قسمت head صفحه درج کنیم، خوشبختانه سیستم عامل اندروید بیشتر از رقیب خود به استاندارد HTML5 وفادار بوده و تنها کافی است ابعاد مناسب را برای این سیستم عامل در نظر بگیریم، برای iOS نیز باید از عبارت apple-touch-icon در قسمت rel تگ link استفاده کنیم که در ادامه به صورت موردی خواهیم دید.
برای سیستم عامل اندروید و مرورگر Google Chrome از همان روش در نظر گرفته شده در HTML5 استفاده می کنیم، گوگل کروم برای نمایش آیکن در قسمت های مختلف (Favicon، Bookmark، Home Screen) از ابعاد متفاوت و فرمت PNG استفاده می کند، این ابعاد می توانند به صورت 16*16، 96*96، 128*128، 160*160، 196*196 باشند که این اندازه ها صرفا حالت پیشنهادی است و در صورت نیاز آیکن ها در ابعاد دیگر نیز به صورت خودکار توسط مرورگر تغییر اندازه داده شده و مورد استفاده قرار خواهند گرفت، در نسخه های اخیر گوگل کروم به جای اندازه 196*196 اندازه 192*192 پیکسل مورد استفاده قرار می گیرد و اگر کد این اندازه درج نشده باشد، ابعاد پائین تر جایگزین خواهند شد، همین قانون در مورد سایر اندازه های مد نظر مرورگر صدق می کند یعنی هر کجا آیکن مد نظر با ابعاد ایده آل در دسترس نباشد اندازه کوچکتر جایگزین خواهد شد.

<link rel="icon" type="image/png" href="http://yoursite.com/favicon.png" sizes="16x16">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-128.png" sizes="128x128">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-160.png" sizes="160x160">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-192.png" sizes="192x192">

نکته: برای تعیین ابعاد آیکن در کد HTML از حرف x انگلیسی استفاده می کنیم.
نکته جالب در خصوص گوگل کروم این است که در حال حاضر ظاهرا این مرورگر در صورت وجود تنظیمات مخصوص iOS ترجیح می دهد از آیکن های در نظر گرفته شده برای رقیب سنتی خود (شرکت اپل) استفاده کند و اولویت دوم را به HTML می دهد!
برای سیستم عامل iOS شرکت اپل و مرورگر Safari باید عبارت apple-touch-icon را در قسمت rel تگ link با ابعاد مختلف در نظر بگیریم، این ابعاد پیشنهادی با توجه به طیف وسیع دستگاه های شرکت اپل می توانند به صورت 60*60، 76*76، 120*120، 152*152، 167*167، 180*180 باشند.

<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-60.png" sizes="60x60">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-76.png" sizes="76x76">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-120.png" sizes="120x120">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-152.png" sizes="152x152">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-167.png" sizes="167x167">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-180.png" sizes="180x180">

علاوه بر مقدار apple-touch-icon می توانیم از مقدار apple-touch-icon-precomposed نیز استفاده کنیم، در حالت اخیر سیستم عامل iOS افکت درخشش و انعکاس را روی آیکن اعمال نخواهد کرد و این کار می تواند در هنگام طراحی آیکن صورت گیرد.

کد پیشنهادی برای نمایش آیکن سازگار با تمام مرورگرها

بسیاری از قابلیت های دنیای وب به مرور زمان شکل گرفته و رفته رفته تکمیل شده اند که در مورد فاوآیکن نیز این فرآیند صدق می کند، اگر پیش از این صرف استفاده از فرمت ico در ابعاد 16*16 کفایت می کرد امروزه با وجود طیف وسیعی از دستگاه های مورد استفاده مخاطبان بهتر است همگام با این نیاز، صفحات وبی با تکنولوژی به روز و آیکن هایی بهینه و در ابعاد متنوع داشته باشیم، بر همین اساس به نظر ترکیب روش های گفته شده به صورت کد نهایی پیشنهادی زیر می تواند برای استفاده های امروزی و پوشش حداکثری دستگاه ها و پلتفرم های مختلف مناسب باشد.

<link rel="shortcut icon" type="image/x-icon" href="http://yoursite.com/favicon.ico">
<link rel="icon" type="image/png" href="http://yoursite.com/favicon.png" sizes="16x16">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-96.png" sizes="96x96">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-128.png" sizes="128x128">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-160.png" sizes="160x160">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://yoursite.com/icon-228.png" sizes="228x228">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-60.png" sizes="60x60">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-76.png" sizes="76x76">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-120.png" sizes="120x120">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-152.png" sizes="152x152">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-167.png" sizes="167x167">
<link rel="apple-touch-icon" type="image/png" href="http://yoursite.com/icon-180.png" sizes="180x180">