تبدیل تصاویر به آیکون و فاوآیکون
یک تصویر انتخاب کنید و ما یک مجموعه کامل آیکون از آن تولید میکنیم: یک favicon.ico حاوی شش اندازه، بههمراه آیکونهای PNG برای هر اندازهای که مرورگرها و سیستمعاملها نیاز دارند.
روش استفاده
- 1
یک تصویر انتخاب کنید — ترجیحاً یک PNG مربعی با پسزمینه شفاف.
- 2
حالت تناسب و اندازههای دلخواه را انتخاب کنید.
- 3
پیش از دانلود، هر اندازه را پیشنمایش کنید.
- 4
favicon.ico را بهتنهایی دانلود کنید، یا بسته کامل شامل آیکونهای PNG و یک مانیفست را.
چرا یک تصویر کافی نیست
مرورگرها ۱۶ و ۳۲ پیکسل برای تب میخواهند، iOS برای صفحه اصلی ۱۸۰ پیکسل میخواهد، و اندروید برای مانیفست ۱۹۲ و ۵۱۲ پیکسل میخواهد. سپردن یک تصویر بزرگ واحد به هر دستگاه یعنی خودش آن را کوچک کند، که در اندازههای کوچک تار به نظر میرسد، پس ما هر اندازه را بهطور جداگانه با هموارسازی باکیفیت رندر میکنیم.
فایل ICO چیست
یک فایل واحد که چند تصویر با اندازههای مختلف را نگه میدارد، و سیستم از میان آنها هرکدام را که مناسب یک جا باشد انتخاب میکند. ما اندازههای ۱۶، ۳۲، ۴۸، ۶۴، ۱۲۸ و ۲۵۶ پیکسل را در آن قرار میدهیم — پوششی که مرورگرها و ویندوز بین خودشان نیاز دارند.
کامل نمایش بده یا پر کن و برش بزن؟
آیکونها مربعی هستند و تصویر شما معمولاً نیست. «کامل نمایش بده» همهچیز را نگه میدارد و لایهای شفاف اضافه میکند، که برای لوگوها مناسب است. «پر کن و برش بزن» مربع را پر کرده و لبهها را میبُرد، که برای عکسها مناسب است.
سوالات متداول
- تفاوت favicon.ico و آیکونهای PNG چیست؟
- فایل ICO چند اندازه را با هم نگه میدارد و همه مرورگرها، حتی قدیمیترها، آن را میفهمند. آیکونهای PNG جداگانه چیزی است که iOS، اندروید و مانیفست وب نیاز دارند. بسته کامل هر دو را به شما میدهد.
- فایلها را کجا باید قرار دهم؟
- در ریشه سایت خود، سپس تگهای لینک نشاندادهشده زیر ابزار را داخل head صفحات خود اضافه کنید.
- یک تصویر منبع خوب چه ویژگیهایی دارد؟
- یک تصویر مربعی با پسزمینه شفاف، ۵۱۲ پیکسل یا بیشتر. لوگوهای ساده در ۱۶ پیکسل خیلی بهتر از طرحهای پرجزئیات خوانده میشوند.
- آیا شفافیت حفظ میشود؟
- بله. هر اندازه بهصورت PNG تولید میشود، چه داخل ICO و چه بیرون از آن، و PNG شفافیت را کامل پشتیبانی میکند.
- آیا از SVG پشتیبانی میشود؟
- بله، و بهترین منبع ممکن است — دقیقاً در اندازه هر آیکون رسم میشود، پس نتیجه کاملاً واضح است.
- اندازه آیکون iOS چقدر است؟
- ۱۸۰ پیکسل، برای تگ apple-touch-icon. بهطور پیشفرض در فهرست اندازهها انتخاب شده است.
- آیا تصویرم به سروری آپلود میشود؟
- نه. تولید بهطور کامل در مرورگر شما انجام میشود، و خود فایل ICO بایت به بایت روی همان صفحه ساخته میشود.
- site.webmanifest چیست؟
- فایلی که به اندروید میگوید وقتی کسی سایت شما را به صفحه اصلی اضافه میکند از کدام آیکونها استفاده کند. ما آن را آماده در داخل بسته تولید میکنیم.