قالب‌های فایل
ICO چیست؟ توضیح فایلهای آیکون و فاوآیکون
ICO فرمت آیکون ویندوز است که چند اندازه را در یک فایل نگه می‌دارد. ساختار آن، تاریخچهٔ فاوآیکون و اندازه‌هایی که امروز لازم دارید را توضیح می‌دهیم.
نویسنده: Hemen Dönüştür Editör Ekibiتاریخ انتشار: 8 دقیقه مطالعه
ICO فرمتی است که ویندوز برای آیکون برنامهها و پوشه‌ها به کار می‌برد و وب برای آیکون کوچک سایت در زبانهٔ مرورگر (فاوآیکون). آنچه آن را از دیگر فرمت‌های تصویر متمایز میکند این است که یک فایل واحد می‌تواند چند اندازه از یک آیکون را در خود نگه دارد. این مقاله ساختار درونی فایل ICO، تحول آن در نسخه‌های ویندوز، تاریخچهٔ فاوآیکون، اندازه‌هایی که امروز لازم دارید و روش درست ساختن فایلهای ICO را توضیح می‌دهد.
ICO چیست؟
ICO (با پسوند .ico) فرمتی ظرف‌مانند است که Microsoft برای منابع آیکون تعریف کرد. فایل ICO با یک «دایرکتوری آیکون» شروع میشود که هر تصویر موجود در فایل (برای نمونه 16x16، 32x32 و 48x48 پیکسل) را به صورت یک ورودی جداگانه فهرست میکند. سپس ویندوز یا مرورگر اندازه‌ای را انتخاب میکند که با محل نمایش آیکون بهتر جور است.
نوع MIME رسمی ثبت‌شده در IANA image/vnd.microsoft.icon است، اما نرم‌افزارهای مایکروسافت و بسیاری از سرورها هنوز از image/x-icon استفاده میکنند. فرمت CUR برای نشانگرهای ماوس تقریباً یکسان است؛ در فیلد نوع دایرکتوری به‌جای 1 مقدار 2 را دارد و نقطهٔ کلیک نشانگر (hotspot) را ذخیره میکند.
تاریخچه: از آیکونهای ویندوز تا فاوآیکون
- Windows 1.0: آیکون‌ها تک‌رنگ بودند.
- Windows 3.0: ساختار مبتنی بر دایرکتوری که چند تصویر را نگه می‌دارد، به شکلی که امروز می‌شناسیم، از راه رسید.
- 1995: مقالهٔ «Icons» نوشتهٔ جان هورنیک (John Hornick) در مایکروسافت ساختار ICO را با جزئیات مستند کرد و به توسعه‌دهندگان توصیه کرد دست‌کم تصاویر 16x16 (16 رنگ)، 32x32 (16 رنگ) و 48x48 (256 رنگ) را بگنجانند.
- مارس 1999: Internet Explorer 5 نخستین مرورگری بود که از فاوآیکون پشتیبانی کرد. فایل
favicon.icoدر ریشهٔ سایت در علاقه‌مندی‌ها و نوار نشانی نمایش داده می‌شد. - Windows XP: یک کانال آلفای 8 بیتی به تصاویر 32 بیتی اضافه شد و لبه‌های نرم و نیمه‌شفاف را ممکن کرد.
- Windows Vista: تصاویر 256x256 و فشرده‌سازی PNG درون ICO اضافه شدند.
- 2003: نوع MIME
image/vnd.microsoft.iconتوسط شخص ثالثی به IANA ارائه شد.
ساختار فایل ICO
دایرکتوری آیکون (ICONDIR)
فایل با یک سرآیند 6 بایتی شروع میشود: یک فیلد رزروشده (0)، نوع (1 برای آیکون، 2 برای نشانگر) و تعداد تصاویر. پس از آن برای هر تصویر یک ورودی دایرکتوری 16 بایتی میآید.
ورودی دایرکتوری (ICONDIRENTRY)
| فیلد | معنا |
|---|---|
| bWidth، bHeight | عرض و ارتفاع (هر کدام 1 بایت). مقدار 0 یعنی 256 پیکسل. |
| bColorCount | تعداد رنگ‌های پالت (برای 8 بیت و بالاتر 0) |
| wPlanes، wBitCount | صفحه‌های رنگ و تعداد بیت به ازای هر پیکسل |
| dwBytesInRes | اندازهٔ دادهٔ تصویر بر حسب بایت |
| dwImageOffset | محل شروع دادهٔ تصویر در فایل |
چون فیلدهای اندازه تک‌بایتی‌اند، یک تصویر درون ICO حداکثر می‌تواند 256x256 پیکسل باشد.
دادهٔ تصویر: BMP یا PNG
در ICO کلاسیک هر تصویر یک BMP بدون سرآیند فایل (یک DIB) است. طبق مقالهٔ هورنیک، این تصویر یک تصویر رنگی (ماسک XOR) و پس از آن یک ماسک شفافیت 1 بیتی (ماسک AND) دارد؛ به همین دلیل ارتفاعی که در سرآیند ذخیره میشود ارتفاع مجموع دو ماسک، یعنی دو برابر ارتفاع واقعی است. از Windows XP به بعد، تصاویر 32 بیتی کانال آلفای خود را مستقیم در داده‌های پیکسل دارند.
از Windows Vista، یک ورودی می‌تواند به‌جای BMP یک فایل PNG کامل هم باشد. جاسازی PNG، به‌ویژه برای اندازهٔ 256x256، فایل را بسیار کوچک‌تر میکند. MDN یادآوری میکند که PNG درون ICO پیش از Vista پشتیبانی نمی‌شد و ممکن است در نرم‌افزارهای قدیمی دردسر ایجاد کند، اما مرورگرها و نسخه‌های فعلی ویندوز هر دو نوع را می‌خوانند.
به چه اندازه‌هایی نیاز دارید؟
آیکون برنامه‌های ویندوز
راهنمای فعلی مایکروسافت برای آیکون برنامهها می‌گوید یک برنامهٔ Win32 باید دست‌کم اندازههای 16x16، 24x24، 32x32، 48x48 و 256x256 را داشته باشد. اگر ویندوز اندازهٔ دقیقاً منطبقی پیدا نکند، اندازهٔ بزرگ‌تر بعدی را کوچک میکند؛ وقتی تصویر 256 پیکسلی موجود باشد، آیکون همیشه فقط کوچک میشود و هرگز بزرگ نمی‌شود. برای نمونه، در مقیاس 100% نوار عنوان و منوهای راست‌کلیک از 16 پیکسل و نوار وظیفه از 24 پیکسل استفاده میکنند؛ در مقیاس 200% این اعداد 32 و 48 می‌شوند.
فاوآیکون برای وبسایتها
وب به شکل دیگری کار میکند. طبق HTML Standard، اگر صفحه‌ای پیوند rel="icon" نداشته باشد، مرورگرها ممکن است /favicon.ico را از ریشهٔ سایت درخواست کنند. بنابراین نگه داشتن favicon.ico در ریشه هنوز کار درستی است، اما به‌تنهایی کافی نیست:
- جست‌وجوی گوگل فاوآیکونی مربعی (1:1) با دست‌کم 8x8 پیکسل می‌خواهد و برای اینکه در سطوح مختلف خوب دیده شود، اندازه‌ای بزرگ‌تر از 48x48 را توصیه میکند.
- صفحهٔ اصلی iPhone و iPad از یک
apple-touch-iconبا اندازهٔ 180x180 استفاده میکند. - Android و PWAها در manifest برنامهٔ وب آیکونهای 192 و 512 پیکسلی و برای آیکونهای تطبیقی یک نسخهٔ «maskable» انتظار دارند.
- مرورگرهای فعلی از فاوآیکون SVG هم پشتیبانی میکنند؛ یک فایل برداری همهٔ اندازه‌ها را پوشش می‌دهد.
در عمل، گنجاندن اندازههای 16، 32 و 48 پیکسل در favicon.ico مرورگرهای دسکتاپ و سیستم‌های قدیمی‌تر را پوشش می‌دهد و اندازههای بزرگ‌تر به صورت فایلهای PNG جداگانه ارائه می‌شوند.
پشتیبانی در سیستم‌ها، مرورگرها و نرم‌افزارها
ویندوز ICO را به‌طور بومی می‌خواند و می‌نویسد؛ Explorer، میان‌برها و دسکتاپ همه با آن کار میکنند. طبق MDN، Chrome، Edge، Firefox، Opera و Safari فایلهای ICO را نمایش می‌دهند. macOS برای آیکون برنامهها از فرمت اختصاصی ICNS استفاده میکند، اما Preview فایل ICO را باز میکند. ویرایشگرهایی مانند GIMP یک ICO را به صورت فایلی لایه‌دار باز میکنند که هر اندازه یک لایه است. MDN استفاده از ICO را در محتوای عمومی وب توصیه نمی‌کند و یادآوری میکند که فاوآیکون‌ها به سمت PNG همراه با عنصر <link> رفته‌اند.
نقاط قوت و ضعف
| نقاط قوت | نقاط ضعف |
|---|---|
| چند اندازه و عمق رنگ در یک فایل | حداکثر 256x256 پیکسل |
| پشتیبانی همه‌جانبه در ویندوز | جز فاوآیکون کاربردی در وب ندارد |
| کانال آلفا و فشرده‌سازی PNG (Vista و بعد) | ورودی‌های قدیمی مبتنی بر BMP حجیم و دست‌وپاگیرند |
| مرورگرها خودکار به دنبال favicon.ico در ریشه می‌گردند | ابزار ویژه لازم دارد؛ هر برنامه‌ای نمی‌تواند آن را بنویسد |
مشکلات رایج و راه‌حل آنها
آیا تغییر نام یک PNG به .ico کافی نیست؟
برخی مرورگرها آن را تحمل میکنند، اما این یک ICO واقعی نیست: دایرکتوری آیکون ندارد و ویندوز آن را بهعنوان آیکون نمی‌پذیرد. راه درست تبدیل تصویر به یک ICO واقعی است. ابزارهای PNG به ICO و JPG به ICO ما همیشه مربع‌های 16، 32 و 48 پیکسلی را می‌نویسند و اگر تصویرتان به اندازهٔ کافی بزرگ باشد 64، 128 و 256 را هم اضافه میکنند. هر اندازه به صورت PNG جاسازی میشود، بنابراین شفافیت حفظ میشود.
فاوآیکون مات یا ناخواناست
خطوط نازک و متن کوچک در 16 پیکسل محو می‌شوند. از نشانه‌ای پررنگ، پرکنتراست و ساده استفاده کنید؛ در صورت نیاز فقط بخش نمادین لوگوی خود را بردارید. منبعی مربعی با دست‌کم 256x256 و در حالت ایده‌آل 512x512 پیکسل بهترین نتیجه را می‌دهد.
تصویر غیرمربعی له یا کشیده دیده میشود
آیکون‌ها مربعی‌اند. ابزارهای ما هرگز تصویر را نمی‌کشند: آن را با حفظ تناسب‌ها در مرکز یک مربع قرار می‌دهند و لبه‌ها را شفاف می‌گذارند. برای مربعی بی‌نقص، ابتدا با برش تصویر یک بخش مربعی جدا کنید.
فاوآیکون جدید نمایش داده نمی‌شود
مرورگرها فاوآیکون‌ها را مدت زیادی در حافظهٔ نهان نگه می‌دارند. تغییر نام فایل یا افزودن یک پارامتر نسخه (/favicon.ico?v=2) و بررسی اینکه سرور نوع MIME درست را برمی‌گرداند معمولاً مشکل را حل میکند. آیکون در نتایج جست‌وجوی گوگل فقط پس از خزش دوبارهٔ سایت به‌روز میشود.
ویندوز هنوز آیکون قدیمی را نشان می‌دهد
ویندوز آیکون‌ها را در حافظهٔ نهان جداگانه‌ای نگه می‌دارد. ساختن دوبارهٔ برنامه و ایجاد دوبارهٔ میان‌بر، یا خروج از حساب و ورود دوباره، اغلب کافی است.
نکته‌های تبدیل
- یک ICO برای وب‌سایت کافی نیست: سازندهٔ فاوآیکون یک‌جا favicon.ico (16، 32 و 48 پیکسل)، favicon-48x48.png، apple-touch-icon.png (180 پیکسل)، icon-192.png، icon-512.png، نسخهٔ maskable با نام icon-512-maskable.png و site.webmanifest را تولید میکند و اگر منبع SVG باشد icon.svg را هم اضافه میکند. همچنین قطعه‌کدی را که باید در
<head>صفحه بچسبانید به شما می‌دهد. - آیکون اپل به پس‌زمینهٔ مات نیاز دارد: iOS نواحی شفاف را سیاه نشان می‌دهد و گوشه‌ها را خودش گرد میکند؛ بنابراین سازندهٔ فاوآیکون apple-touch-icon را با رنگ پس‌زمینه‌ای که انتخاب می‌کنید پر میکند.
- اگر لوگوی شما SVG است: با تبدیل SVG به PNG یک PNG بزرگ رندر کنید و آن را به ICO تبدیل کنید، یا SVG را مستقیم به سازندهٔ فاوآیکون بدهید.
ابزارهای ICO و فاوآیکون ما در مرورگر شما اجرا می‌شوند؛ تصویر شما آپلود نمی‌شود و هرگز از دستگاه شما خارج نمی‌شود.
پرسش‌های متداول
حداکثر اندازهٔ تصویر ICO چقدر است؟
فیلدهای عرض و ارتفاع در یک ورودی دایرکتوری هر کدام یک بایتاند و 0 به معنای 256 است. بنابراین یک تصویر واحد درون ICO حداکثر 256x256 پیکسل است.
برای فاوآیکون از ICO استفاده کنم یا PNG؟
از هر دو. یک favicon.ico در ریشه با اندازههای 16، 32 و 48 پیکسل به کار مرورگرهای قدیمی و درخواستهای خودکار میآید؛ آیکونهای PNG (و در صورت تمایل SVG) را برای مرورگرهای فعلی و دستگاههای موبایل با تگهای <link> اعلام کنید.
آیا ICO از شفافیت پشتیبانی میکند؟
بله. ICOهای قدیمی از یک ماسک 1 بیتی استفاده میکنند، تصاویر 32 بیتی از Windows XP کانال آلفای کامل دارند و PNG جاسازیشده از Vista شفافیت را حمل میکند.
چطور فایل ICO را به PNG تبدیل کنم؟
فایل ICO را به مبدل تصویر اضافه کنید و PNG را بهعنوان مقصد انتخاب کنید. اگر فایل چند اندازه داشته باشد، بزرگترین آنها به کار میرود.
آیا در مک از فایلهای ICO استفاده میشود؟
macOS برای آیکون برنامهها از فرمت ICNS استفاده میکند. برای وبسایتها، favicon.ico و آیکونهای PNG در مرورگرهای همهٔ سیستمعاملها کار میکنند.
