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

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

فاوآیکن ابتدا در سال 1999 میلادی در مرورگر اینترنت اکسپلورر 5 توسط شرکت مایکروسافت معرفی و استفاده شد که یک فایل با عنوان favicon.ico در ریشه سایت (فولدر www یا public_html) بود و با نمونه آدرس زیر فراخوانی می شد:

http://yoursite.com/favicon.ico

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

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

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

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

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

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

توضیح:
- برای درج فاوآیکن از تگ link با صفت rel و مقدار shortcut icon استفاده می کنیم، در HTML5 این مقدار معمولا به صورت 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 صفحه درج شود.

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

در حال حاضر با توجه به تنوع دستگاه های رایانه، تبلت ها، تلفن های همراه و... اغلب مرورگرهای معروف نظیر فایرفاکس، گوگل کروم، سافاری و نظایر آنها از آیکن های متحرک با فرمت gif و آیکن های دارای اندازه و کیفیت های متفاوت با فرمت png و svg در کنار فرمت معمول ico پشتیبانی می کنند که به عنوان یک راه حل می توانیم فرمت ها و اندازه های مختلف را با هم ترکیب کرده تا در دستگاه هایی که از این قابلیت ها پشتیبانی می کنند آیکن مناسب آنها به صورت متحرک یا با اندازه و کیفیت های متفاوت نشان داده شود و در سایر مرورگرها آیکن پیش فرض با فرمت 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">

چند توصیه:
- بهتر است از آیکن های متحرک در صفحات وب استفاده نکنیم، چرا که نظر کاربران به جای اینکه به مطالب سایت یا وبلاگمان جلب شود، بیشتر به آیکن متحرک در نوار آدرس جلب می شود.
- اندازه فایل را در حد امکان کم حجم ایجاد کنیم، ارزش این کار مخصوصا زمانی که کاربران با وسایلی نظیر تلفن همراه در حال مرور صفحات یا فید آر اس اس سایت یا وبلاگمان هستند مشخص می شود.
- سعی کنیم آیکنی ساده و واضح بسازیم، به یاد داشته باشیم که فاوآیکن تنها یک نشانه است و قرار نیست تمام محتوای صفحات خود را در آن نشان دهیم.
- در 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 طراحی شده که در دو اندازه مختلف قابل نمایش است.
نکته: نکته جالب در مورد صفت 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">