تبدیل SVG به ICO
ساختن فاوآیکن از SVG بهترین حالت ممکن است: هر اندازهٔ آیکون مستقیماً از روی وکتور رسم میشود، نه اینکه از یک تصویر بیت‌مپ بزرگ کوچک شود؛ به همین دلیل نسخهٔ 16 px تا جایی که شبکهٔ پیکسل‌ها اجازه می‌دهد واضح میماند.
مبدل عکس
یا فایل‌های JPG, JPEG, JPE … را اینجا رها کنید ·
حداکثر 95 MB برای هر فایل· تا 20 فایل· حذف پس از 30 دقیقه
فایل‌ها روی سرورهای ما پردازش میشوند و پس از 30 دقیقه حذف میشوند.
85 عکسها را از نظر بصری مشابه اصل نگه می‌دارد. فقط وقتی فایل کوچکتر می‌خواهید آن را کمتر کنید.
JPG، BMP و EPS شفافیت ندارند. پیکسلهای شفاف با این رنگ پر میشوند.
رنگ هگز پشت پیکسلهای شفاف، مثلاً #FFFFFF.
این قالب فقط یک تصویر را نگه می‌دارد. اگر می‌خواهید انیمیشن حفظ شود خروجی GIF یا WebP را انتخاب کنید.
آیکون چنداندازه‌ای چند وضوح را در یک فایل دارد؛ مرورگرها و سیستم‌عامل‌ها همان را که لازم دارند برمی‌دارند.
ابعاد اصلی را نگه دارید یا یک ضلع را وارد کنید تا نسبت تصویر حفظ شود.
پیکسل برای ضلعی که در بالا انتخاب کردید.
درصدی از ابعاد اصلی.
sRGB برای صفحه نمایش و وب مناسب است. برای چاپ حالت اصلی را نگه دارید؛ سیاه‌وسفید رنگ را حذف میکند.
فقط فراداده است؛ 0 مقدار اصلی را نگه می‌دارد. چاپگرها و برخی درگاه‌ها این عدد را می‌خوانند؛ ابعاد پیکسلی را تغییر نمی‌دهد.
نحوه استفاده از این ابزار
- 1
لوگوی SVG را بارگذاری کنید
از نماد یا مونوگرام لوگو استفاده کنید، نه از نوشتهٔ کامل برند. viewBox مربعی بهترین نتیجه را می‌دهد.
- 2
همهٔ اندازههای آیکون را نگه دارید
گزینهٔ اندازههای آیکون روی «همه اندازه‌ها (16–256)» تنظیم است که همهٔ وضوح‌ها را در یک فایل ico. جا می‌دهد. فقط وقتی برنامه‌ای دقیقاً یک اندازه می‌خواهد، همان یک اندازه را انتخاب کنید.
- 3
دکمهٔ «تبدیل به ICO» را بزنید
فایل را با نام favicon.ico در پوشهٔ اصلی (root) سایت خود ذخیره کنید یا میان‌بر ویندوز را به آن وصل کنید.
چطور SVG را برای فاوآیکون به ICO تبدیل کنم؟
SVG را بارگذاری کنید، اندازههای آیکون را روی «همه اندازه‌ها (16–256)» نگه دارید و تبدیل به ICO را بزنید. یک فایل ico. می‌گیرید که همهٔ وضوح‌ها از روی وکتور ساخته شده‌اند و شفافیت حفظ میشود.
تبدیل SVG به ICO: چرا وکتور منبع مناسبی است
فرمت ico. به نسخه‌های اولیهٔ ویندوز برمی‌گردد و قرارداد favicon.ico به Internet Explorer 5 در سال 1999 که در ریشهٔ هر سایتِ نشانه‌گذاری‌شده دنبال فایلی با این نام می‌گشت. ICO یک ظرف کوچک است: فهرستی از ورودی‌ها که هرکدام بیت‌مپ مربعی جداگانه‌ای هستند، پس یک فایل می‌تواند آیکون زبانهٔ 16 px و آیکون دسکتاپ 256 px را کنار هم نگه دارد. ویندوز Vista حداکثر را به 256 × 256 رساند و اجازه داد این ورودیهای بزرگ به‌صورت PNG ذخیره شوند.
چون هر ورودی بیت‌مپ جداگانه‌ای است، کیفیت آیکون به نحوهٔ ساخت هر اندازه بستگی دارد. از PNG، هر اندازه کوچک‌شدهٔ همان پیکسل‌هاست. از SVG، هر اندازه رندر تازه‌ای از مسیرهاست و آنتی‌الیاسینگ دقیقاً برای همان شبکه محاسبه میشود. در 16 × 16 px که لوگو فقط 256 پیکسل در اختیار دارد، این تفاوت دیده میشود.
16 × 16 px
16 × 16
زبانههای مرورگر، نشانک‌ها و فهرست تاریخچه.
32 × 32 px
32 × 32
زبانه‌ها در صفحه‌های با تراکم بالا، میان‌برهای نوار وظیفهٔ ویندوز.
64 × 64 px
64 × 64
نماهای بزرگ‌شدهٔ دسکتاپ و موارد سنجاق‌شده.
128 × 128 px
128 × 128
پیش‌نمایش‌های بزرگ در مدیریت فایل.
256 × 256 px
256 × 256
بزرگ‌ترین ورودی ICO؛ آیکون‌های بسیار بزرگ Explorer.
SVG
گرافیک برداری مقیاس‌پذیر
SVG یک فرمت برداری مبتنی بر XML است که W3C در سال 2001 استانداردسازی کرد. به‌جای پیکسل، شکل‌ها، مسیرها و متن را توصیف میکند؛ بنابراین در هر اندازه‌ای شفاف میماند و برای لوگو و آیکن معمولاً بسیار کم‌حجم است. از شفافیت، استایل CSS، اسکریپت و انیمیشن پشتیبانی میکند و همه مرورگرها آن را به‌صورت بومی نمایش می‌دهند. SVG برای عکس مناسب نیست و تصاویر پیچیده ممکن است کند رندر شوند. Illustrator، Inkscape، Figma و مرورگرها می‌توانند آن را باز و ویرایش کنند.
- فشرده‌سازی
- –
- شفافیت
- بله
- انیمیشن
- بله
- سال معرفی
- 2001 · W3C
ICO
آیکون ویندوز (ICO)
ICO فرمت آیکون مایکروسافت است که برای آیکون برنامه‌های ویندوز و favicon وب‌سایت‌ها به کار می‌رود. یک فایل ico. می‌تواند چند تصویر با اندازههای مختلف مانند 16×16، 32×32، 48×48 و 256×256 پیکسل داشته باشد تا سیستم مناسب‌ترین را برگزیند. هر تصویر می‌تواند به‌صورت بیت‌مپ یا داده PNG ذخیره شود و از شفافیت کامل آلفا پشتیبانی میکند. ICO برای عکس یا تصاویر بزرگ ساخته نشده است. مرورگرها، ویندوز و بیشتر ویرایشگرهای آیکون آن را می‌خوانند.
- فشرده‌سازی
- بدون اتلاف
- شفافیت
- بله
- انیمیشن
- خیر
- سال معرفی
- Microsoft
افراد SVG را به ICO تبدیل می‌کنند چون لوگوی‌شان به‌صورت وکتور است، اما ریشهٔ وب‌سایت، میان‌بر ویندوز یا برنامهٔ دسکتاپ هنوز یک فایل ico. می‌خواهد که چند اندازهٔ بیت‌مپ را در خود دارد.
آماده‌سازی SVG پیش از تبدیل SVG به ICO
| انجام دهید | انجام ندهید |
|---|---|
viewBox را روی مربع بگذارید، مثلاً 0 0 512 512. | به خطوط بسیار نازک تکیه نکنید که زیر 32 px ناپدید میشوند. |
| حاشیهٔ کوچکی بگذارید تا نماد به لبهٔ آیکون نچسبد. | نوشتهٔ پهن برند را نگه ندارید که به لکه‌ای باریک تبدیل میشود. |
| متن را به مسیر (outline) تبدیل کنید تا فونت تغییر نکند. | درون SVG به تصویر خارجی یا فونت وب ارجاع ندهید. |
| از نماد یا حروف اول استفاده کنید، نه نام کامل. | پشت لوگو مستطیل سفید نگذارید، مگر اینکه در زبانههای تیره هم آن را بخواهید. |
مبدل فقط آنچه را SVG توصیف میکند رندر میکند، پس فایل‌های پیوندی و فونت‌هایی که جاسازی نشده‌اند قابل دریافت نیستند. ابزارهای طراحی مانند Figma، Illustrator و Inkscape می‌توانند متن را به مسیر خروجی بگیرند؛ با این کار حروف همه‌جا با برند شما یکی خواهند بود.
بعد از ساخت ico.، یک PNG با اندازهٔ 180 px برای آیکون‌های Apple touch و خود SVG را برای مرورگرهایی که فاوآیکون وکتور پشتیبانی می‌کنند اضافه کنید؛ تبدیل SVG به PNG این PNG را در هر اندازه می‌سازد. اگر منبع شما لوگوی بیت‌مپ است، تبدیل PNG به ICO همین کار را از روی پیکسل‌ها انجام می‌دهد.
تبدیل SVG به ICO: پرسش‌های رایج
چرا برای تبدیل SVG به ICO از خود SVG استفاده کنیم و نه از PNG؟
PNG را باید برای هر اندازهٔ آیکون کوچک کرد و کوچکسازی لبهها را محو میکند. SVG مستقیماً در اندازههای 16، 32، 64، 128 و 256 px رندر میشود، بنابراین لبههای هر اندازه متناسب با شبکهٔ پیکسلی خودش تیز میماند.
اگر سایت من آیکون SVG دارد، آیا مرورگرها هنوز به favicon.ico نیاز دارند؟
Chrome و Firefox فاوآیکون SVG را که با تگ link تعریف شده بخوانند، اما بسیاری از مرورگرها، فیدخوان‌ها و خزنده‌ها هنوز به‌طور پیش‌فرض /favicon.ico را از ریشهٔ سایت درخواست می‌کنند. با داشتن هر دو، همه‌چیز پوشش داده میشود.
اگر SVG من مربعی نباشد چه میشود؟
جایگاه آیکون مربعی است، پس لوگوی پهن یا حاشیهٔ خالی پیدا میکند یا بسیار ریز دیده میشود. ابتدا viewBox را طوری ویرایش کنید که عرض و ارتفاع برابر باشد، یا بعد از خروجی گرفتن PNG با ابزار برش عکس نسخهٔ مربعی بسازید.
آیا پسزمینهٔ شفاف در فایل ICO حفظ میشود؟
بله. ICO کانال آلفا را ذخیره میکند، پس بخشهای بدون رنگ در SVG شفاف میمانند و آیکون روی زبانههای روشن و تیرهٔ مرورگر تمیز دیده میشود.
آیا میتوانم SVG را برای آیکون برنامه یا پوشهٔ ویندوز به ICO تبدیل کنم؟
بله، همان فایل کار میکند. ویندوز برای نماهای بزرگ و بسیار بزرگ Explorer تصویر 256 px و برای فهرستها و نوار وظیفه ورودیهای کوچکتر را میخواند.
چرا آیکون من در اندازهٔ 16 px خالی به نظر میرسد؟
خطوط نازک و متن ریز در این اندازه ناپدید میشوند. خطی با ضخامت 2 واحد در بوم 512 واحدی در آیکون 16 px بسیار کمتر از یک پیکسل میشود. خطوط را ضخیمتر کنید یا برای فاوآیکون نماد سادهتری بگذارید.
مبدل‌های دیگر آیکون
- تبدیل PNG به ICOتبدیل آنلاین PNG به ICO: یک فایل .ico با همهٔ سایزها از 16 تا 256 px و حفظ شفافیت. برای فاوآیکون و میان‌بر ویندوز. رایگان و بدون ثبتنام.
- تبدیل JPG به ICOتبدیل JPG یا JPEG به فایل .ico با سایزهای 16، 32، 64، 128 و 256 px برای فاوآیکون سایت یا میان‌بر ویندوز. بدون نیاز به ثبتنام.
- تبدیل ICO به PNGفایل‌های .ico را با حفظ پسزمینهٔ شفاف به PNG تبدیل کنید. بزرگ‌ترین تصویر آیکون استخراج میشود تا فاوآیکون و آیکون ویندوز واضح بمانند.
- تبدیل SVG به PNGلوگو و آیکون SVG را با عرض دلخواه (پیش‌فرض 1024 px) و پسزمینهٔ شفاف به PNG تبدیل کنید و رابطهٔ DPI با پیکسل را بشناسید.
- تبدیل PNG به ICO با ابعاد 256x256ساخت ICO با ابعاد 256 × 256 از PNG برای آیکون‌های خیلی بزرگ ویندوز، نصبکنندهها و Electron. حفظ شفافیت، یک اندازه در هر فایل، بدون ثبتنام.
- تبدیل عکس به ICOهر عکسی را به فایل .ico چنداندازه برای فاوآیکون یا میان‌بر ویندوز تبدیل کنید. PNG، JPG، SVG، WebP، HEIC و بیشتر؛ 16 تا 256 px در یک فایل.