تبدیل SVG به ICO Scalable Vector Graphics ↔ Icon رایگان آنلاین امن

چرا مردم SVG را به ICO تبدیل می‌کنند

فایل ICO یک آیکون است. تصویر کوچکی است که در زبانهٔ مرورگر کنار نام یک صفحه، در فهرست نشانک‌ها، روی یک میان‌بر و در گوشهٔ پنجرهٔ یک برنامه در ویندوز دیده می‌شود. اگر وب‌سایتی دارید، می‌خواهید آیکونی داشته باشد که نشان شما را حمل کند. اگر برنامه‌ای می‌سازید، برای فایل اجرایی‌اش به آیکون نیاز دارید. و اگر لوگو دارید، به احتمال زیاد نقشی برداری در قالب SVG است. به همین دلیل مردم SVG را به ICO تبدیل می‌کنند: طرح نشان را دارند و فایل آیکونی را لازم دارند که مرورگرها و سیستم‌عامل‌ها هنوز به نام خودش می‌خواهند.

SVG یک تصویر نیست. مجموعه‌ای از دستورهاست برای کشیدن یک تصویر: اینجا دایره‌ای بکش، آنجا منحنی‌ای، این شکل را با آن رنگ پر کن. چون دستور است و پیکسل نیست، SVG را می‌توان در هر اندازه نشان داد بی‌آنکه تار شود. آیکون، در مقابل، مشتی تصویر کوچک است که در یک فایل بسته شده‌اند و هر یک برای اندازه‌ای مشخص ساخته شده است. این صفحه دستورهای SVG شما را برای هر اندازه یک بار دنبال می‌کند و نتیجه‌ها را در یک فایل ICO بسته‌بندی می‌کند.

این صفحه SVG را در مرورگر شما به ICO تبدیل می‌کند. طرح در جعبه‌شنی‌ای ترسیم می‌شود که هیچ چیز درون فایل نمی‌تواند در آن اجرا شود، و هیچ چیزی بارگذاری نمی‌شود. در ادامه می‌یابید که چگونه کار می‌کند، فایل چه اندازه‌هایی دارد، چرا آیکون‌های کوچک مسئله‌ای ویژه‌اند و چه باید کرد.

تبدیل چگونه کار می‌کند

شش اندازه در یک فایل

ICO خروجی شش اندازه را در یک فایل دارد: 16، 32، 48، 64، 128 و 256 پیکسل. هر یک از SVG دوباره کشیده می‌شود، نه از یکدیگر کوچک‌شده، پس نسخهٔ 16 پیکسلی دستورهایی است که در 16 پیکسل دنبال شده‌اند، نه کپی کوچک‌شدهٔ نسخهٔ بزرگ. همه شفافیت خود را نگه می‌دارند. سپس سیستم‌عامل یا مرورگر هر اندازه‌ای را که به جای نمایش آیکون می‌خورد برمی‌گزیند.

جعبه‌شنی‌ای که هیچ چیز در آن اجرا نمی‌شود

فایل SVG می‌تواند، در اصل، اسکریپت و ارجاع به چیزهای دیگر داشته باشد. برای آنکه این هرگز خطر نشود، طرح در جعبه‌شنی‌ای ترسیم می‌شود که هیچ چیز درون فایل نمی‌تواند در آن اجرا شود. فقط شکل‌ها نقاشی می‌شوند. این حتی برای فایل‌هایی که از جایی که کاملاً به آن اعتماد ندارید دانلود کرده‌اید امن است.

چرا دوباره کشیدن از کوچک کردن بهتر است

وقتی تصویری بزرگ را به تصویری ریز کوچک می‌کنید، جزئیات در هم می‌آمیزند و خط‌ها خاکستری می‌شوند. دوباره کشیدن از دستورهای برداری در اندازهٔ هدف تیزترین نتیجه‌ای را می‌دهد که هر اندازه می‌تواند داشته باشد، چون خط‌ها مستقیم روی شبکهٔ پیکسل جای می‌گیرند.

چه چیزی حفظ می‌شود

شش اندازه

16، 32، 48، 64، 128 و 256 پیکسل دریافت می‌کنید، که جاهایی را که آیکون‌ها معمولاً نشان داده می‌شوند پوشش می‌دهد: زبانه‌های مرورگر، نوار وظیفه، میان‌برهای میز کار، فهرست فایل‌ها و پیش‌نمایش‌های بزرگ.

شفافیت

شفافیت در هر شش اندازه حفظ می‌شود. بخش‌هایی از SVG که پر نشده‌اند در ICO شفاف می‌مانند، پس آیکون رنگ هر چیزی را که پشتش است می‌گیرد.

شکل نشان

طرح همان‌گونه که هست، با رنگ‌ها و شکل‌هایش، حفظ می‌شود. اگر SVG مربع نباشد، بدون کشیده شدن در مربع هر آیکون جا داده می‌شود.

آنچه پیش از تبدیل SVG به ICO باید بدانید

آیکون طرحی دیگر است

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

برای کوچک‌ترین اندازه طراحی کنید

بهترین آیکون‌ها با در نظر گرفتن کوچک‌ترین اندازه ساخته می‌شوند: یک شکل پررنگ، شمار محدودی رنگ، بدون خط مویی و بدون حروف بیش از یک حرف. اگر می‌توانید، نسخه‌ای ساده‌شده از لوگو را به‌عنوان SVG جداگانه برای این منظور آماده کنید و سپس SVG را با آن به ICO تبدیل کنید.

فونت‌ها و تصویرهای از جای دیگر حل نمی‌شوند

فونت‌ها و تصویرهایی که SVG از جای دیگر می‌کشد در جعبه‌شنی حل نمی‌شوند. متنی که با فونت وب بارگذاری‌شده از یک سرور تنظیم شده به فونت سیستم برمی‌گردد، و تصویری که از بیرون فایل پیوند خورده باشد گم خواهد بود. برای بهترین نتیجه، متن را به کانتور تبدیل کنید و تصویرها را درون فایل بگذارید.

چگونه اینجا SVG را به ICO تبدیل کنیم

طرح خود را بیفزایید

SVG را روی صفحه رها کنید یا از دستگاهتان انتخاب کنید. درون مرورگر شما خوانده می‌شود و بارگذاری نمی‌شود.

تبدیل کنید

دکمه را بزنید. شش اندازه یکی پس از دیگری کشیده می‌شوند، که لحظه‌ای طول می‌کشد. صفحه را تا پایان کار باز نگه دارید.

دانلود و آزمایش

ICO را دانلود کنید و در جایی که به کار خواهد رفت امتحانش کنید. در یک وب‌سایت، آن را با نام favicon.ico در پوشهٔ ریشه بگذارید یا در سرآیند صفحه به آن پیوند دهید، و به زبانهٔ مرورگر نگاه کنید. در ویندوز می‌توانید آن را به یک میان‌بر بدهید و ببینید در اندازه‌های گوناگون چگونه به نظر می‌رسد.

نگاهی دقیق‌تر به SVG و ICO

برداری و بسته

SVG یک طرح واحد است که در هر اندازه می‌تواند ترسیم شود. ICO ظرفی است با چند تصویر درون آن، هر یک با اندازه‌ای ثابت. نرم‌افزاری که آیکون نشان می‌دهد تصویری را برمی‌گزیند که به اندازهٔ مورد نیازش نزدیک‌تر است، که از بزرگ‌نمایی تار جلوگیری می‌کند. تبدیل SVG به ICO یعنی ترسیم طرح در اندازه‌هایی که انتظار می‌رود ظرف در خود جای دهد.

آیکون‌ها کجا به کار می‌روند

مرورگرها کوچک‌ترین اندازه‌ها را برای زبانه‌ها و بزرگ‌ترها را برای نشانک‌ها و صفحهٔ زبانهٔ تازه به کار می‌برند. ویندوز آن‌ها را برای نوار وظیفه، منوی شروع و اکسپلورر به کار می‌برد. دستگاه‌های همراه مجموعه‌های اندازهٔ تصویر خود را برای صفحهٔ اصلی دارند که معمولاً فایل‌های PNG‌اند، نه ICO. اگر آیکون برنامه‌ای برای تلفن آماده می‌کنید، SVG به PNG در اندازه‌هایی که پلتفرم می‌خواهد راه بهتری است.

فاوآیکون‌ها امروز

مرورگرهای مدرن PNG و حتی SVG را به‌عنوان فاوآیکون می‌پذیرند، اما ICO قالبی است که همه‌جا کار می‌کند، از جمله مرورگرهای قدیمی، برخی خوانندهٔ خوراک و ابزارهایی که خودکار دنبال favicon.ico می‌گردند. داشتن یکی انتخاب امن است.

موقعیت‌های رایج به تفصیل

فاوآیکون یک وب‌سایت

SVG را به ICO تبدیل کنید، فایل را با نام favicon.ico در ریشهٔ سایتتان ذخیره کنید و به آن پیوند دهید. زبانهٔ هر مرورگر نشان شما را حمل خواهد کرد، که صفحه را در میان زبانه‌های بسیار باز قابل‌شناسایی می‌کند.

آیکون یک برنامهٔ ویندوز

برنامه‌ها در ویندوز آیکونی در فایل اجرایی و میان‌برهایشان دارند. توسعه‌دهندگان برای این به ICO چنداندازه نیاز دارند. شش اندازه‌ای که دریافت می‌کنید نیازهای معمول را پوشش می‌دهد.

میان‌برها و پوشه‌ها

در ویندوز می‌توانید به یک میان‌بر یا پوشه آیکون خودتان را بدهید. ICO ساخته‌شده از لوگوی شما میز کار یا پوشه‌های پروژه‌تان را راحت‌تر قابل‌شناسایی می‌کند.

سایت‌های کسب‌وکار کوچک و وبلاگ‌ها

فاوآیکون جزئیات کوچکی است که سایت را تمام‌شده نشان می‌دهد. اگر لوگوی شما SVG است، این تبدیل فایلی را تولید می‌کند که سایت‌سازها از شما می‌خواهند بارگذاری کنید.

توصیه‌های عملی پیش از تبدیل SVG به ICO

طرح را ساده کنید

خط‌های ظریف را بردارید، حروف را حذف کنید یا فقط یک حرف نگه دارید، و از شکل‌های پررنگ استفاده کنید. پیش از تبدیل، SVG را در 16 پیکسل در برنامهٔ طراحی‌تان ببینید تا بدانید کوچک‌ترین آیکون چه شکلی خواهد داشت.

طرح را مربع کنید

آیکون‌ها مربع‌اند. اگر لوگوی شما پهن است، آن را با اندکی حاشیه روی بوم مربع بگذارید تا بریده نشود و در مربع ریز نباشد.

تضاد را بررسی کنید

زبانه‌های مرورگر می‌توانند روشن یا تیره باشند. نشانی با تضاد قوی در برابر هر دو زمینه راحت‌تر دیده می‌شود. یک لبهٔ سفید باریک بر نشان تیره، یا شکلی رنگی و توپر، معمولاً کار می‌کند.

SVG را نگه دارید

SVG نسخهٔ اصلی است. اگر بعداً تصمیم به تغییر آیکون گرفتید، برای تبدیل دوبارهٔ SVG به ICO به آن نیاز خواهید داشت.

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

چرا آیکون من در 16 پیکسل تار به نظر می‌رسد؟

چون 16 پیکسل بسیار اندک است. خط‌های ظریف و متن ریز در آنجا قابل نمایش نیستند. به‌جای جست‌وجوی تبدیل بهتر، طرح را ساده کنید.

فایل کدام اندازه‌ها را دارد؟

16، 32، 48، 64، 128 و 256 پیکسل، هر یک دوباره از SVG کشیده‌شده، همه با شفافیت.

آیا شفافیت می‌ماند؟

بله. زمینهٔ شفاف در SVG در هر شش اندازهٔ ICO شفاف است.

آیا می‌توانم فایل را به‌عنوان فاوآیکون به کار ببرم؟

بله. آن را favicon.ico نام بگذارید، در ریشهٔ سایتتان قرار دهید، یا از سرآیند صفحه‌هایتان به آن پیوند دهید.

آیا فایل من بارگذاری می‌شود؟

خیر. تبدیل در مرورگر شما اجرا می‌شود و فایل هرگز دستگاهتان را ترک نمی‌کند.

آیا می‌توانم از یک آیکون SVG بسازم؟

تا حدی، بله. ICO به SVG آیکون را به شکل‌ها ردیابی می‌کند، هرچند اندازهٔ کوچک آنچه را می‌توان بازیافت محدود می‌کند.

انتخاب آگاهانه هنگام تبدیل SVG به ICO

ICO یا PNG؟

برای فاوآیکونی که همه‌جا کار کند، ICO را برگزینید. برای آیکون برنامه‌ها در تلفن و برای تصویرها در صفحه‌های وب، PNG قالب معمول است. SVG به PNG همان را به شما می‌دهد.

به کل مجموعه فکر کنید

اگر برندی می‌سازید، ممکن است لوگویی به‌صورت PNG، فاوآیکونی به‌صورت ICO و نسخه‌ای چاپی به‌صورت PDF لازم داشته باشید. SVG به PDF طرح را برای چاپ به‌صورت طرح نگه می‌دارد.

روی زبانهٔ واقعی آزمایش کنید

آیکون را در زبانهٔ واقعی مرورگر ببینید، هم در پوستهٔ روشن و هم تیره. آنجا جایی است که بیشتر مردم با آن روبه‌رو می‌شوند.

گرفتن نتیجهٔ خوب پس از تبدیل

حافظهٔ نهان مرورگر را پاک کنید

مرورگرها فاوآیکون‌ها را مدت زیادی نگه می‌دارند. اگر آیکونی را جایگزین کردید و هنوز قدیمی را می‌بینید، حافظهٔ نهان را پاک کنید یا سایت را در پنجرهٔ خصوصی باز کنید.

همهٔ اندازه‌ها را بررسی کنید

اگر ابزاری دارید که فایل‌های ICO را باز می‌کند، هر اندازه را ببینید. نشانی که در 256 پیکسل خوب است ممکن است در 16 ناخوانا باشد، و این به شما می‌گوید ساده‌سازی لازم است یا نه.

درست نام‌گذاری کنید

مرورگرها به‌طور پیش‌فرض favicon.ico را در ریشهٔ سایت جست‌وجو می‌کنند. آن نام را نگه دارید مگر آنکه به فایل صریحاً پیوند دهید.

طراحی نشانی که از کوچک‌ترین اندازه جان به در ببرد

از شبکهٔ 16 پیکسلی شروع کنید

مطمئن‌ترین راه برای نتیجهٔ خوب هنگام تبدیل SVG به ICO طراحی با در نظر گرفتن کوچک‌ترین اندازه است. شبکه‌ای از شانزده در شانزده مربع را تصور کنید و بپرسید چه چیزی می‌توانید روی آن بگذارید. دایره، حرف، نمادی ساده: بله. امضا، نشانی با شعار: نه. اندازه‌های بزرگ‌تر هر چه بکشید خوب به نظر می‌رسند، پس اندازهٔ کوچک قیدی است که باید برایش طراحی کرد.

از شکل‌های قوی و رنگ‌های اندک استفاده کنید

دو یا سه رنگ با تضاد روشن بهتر از گرادیانی از بسیار خوانده می‌شوند. شکل‌های توپر که بیشتر مربع را پر می‌کنند از طرح‌های باریک راحت‌تر شناخته می‌شوند، چون هر پیکسل بخش بیشتری از نشان را حمل می‌کند.

اندکی جا برای نفس کشیدن بگذارید

نشانی که به لبهٔ مربع بچسبد ممکن است تنگ به نظر برسد، و برخی سیستم‌ها گردی یا حاشیهٔ خود را می‌افزایند. حاشیهٔ یک یا دو پیکسل در کوچک‌ترین اندازه شکل را سالم نگه می‌دارد.

آن را کنار آیکون‌های دیگر ببینید

چند زبانه از سایت‌های شناخته‌شده باز کنید و مقایسه کنید. خواهید دید آیکون‌هایی که بهتر کار می‌کنند بسیار ساده‌اند. پیش از تبدیل SVG به ICO این انضباط را وام بگیرید، و نتیجه‌تان در جمع زبانه‌ها پابرجا خواهد ماند.

حریم خصوصی و کار با فایل

چرا تبدیل محلی برای طرح‌ها مهم است

لوگوها و نشان‌های برند ممکن است پیش از انتشار محرمانه باشند. بسیاری از مبدل‌های برخط فایل شما را به سرور بارگذاری می‌کنند، پردازش می‌کنند و نتیجه را بازمی‌فرستند، و مدتی نسخه‌ای روی ماشینی که کنترل نمی‌کنید می‌ماند. اینجا مرورگر خودتان کار را انجام می‌دهد، پس طرح روی دستگاهتان می‌ماند.

وقتی می‌روید چه می‌شود

وقتی صفحه را می‌بندید، فایل تبدیل‌شده از مرورگر ناپدید می‌شود، پس نخست دانلودش کنید. هیچ چیز دربارهٔ طرح شما نگه داشته نمی‌شود.

اگر مشکلی پیش آمد

آیکون خالی درمی‌آید

ممکن است SVG اندازه یا جعبهٔ نما نداشته باشد. آن را در ویرایشگر متن باز کنید و بررسی کنید که عرض و ارتفاع یا جعبهٔ نما دارد، یا در برنامهٔ طراحی‌تان درستش کنید.

آیکون بریده شده است

برخی SVGها عناصری دارند که از ناحیهٔ اعلام‌شده‌شان فراتر می‌روند. جعبهٔ نما را در اصل تنظیم کنید تا همه‌چیز درون جا بگیرد.

صفحه یخ می‌زند

همه‌چیز روی دستگاه شما اجرا می‌شود. دوباره روی رایانه یا با طرحی ساده‌تر امتحان کنید.

ابزارهای مرتبط

همین خانوادهٔ ابزارها کارهای همسایه را پوشش می‌دهد. برای تصویر در اندازه‌های دلخواه، از SVG به PNG یا SVG به JPG استفاده کنید. برای سندی که در هر بزرگ‌نمایی تیز می‌ماند، SVG به PDF طرح را به‌صورت طرح نگه می‌دارد. برای ردیابی تصویرها به شکل‌ها، ICO به SVG، PNG به SVG و JPG به SVG کار را انجام می‌دهند.

یک مثال کاری

فرض کنید وبلاگی کوچک راه انداخته‌اید و لوگویتان SVG است: برگی سبز با نام وبلاگ زیر آن. SVG را اینجا رها می‌کنید و دکمه را می‌زنید. ICO می‌رسد، و در زبانهٔ مرورگر برگ قابل‌شناسایی است، اما نام زیرش ناخوانا. برنامهٔ طراحی‌تان را باز می‌کنید، نسخه‌ای فقط با برگ می‌سازید، دوباره SVG را به ICO تبدیل می‌کنید و فایل تازه را با نام favicon.ico بارگذاری می‌کنید. اکنون زبانه برگی سبز و روشن نشان می‌دهد و لوگوی کامل در صفحه می‌ماند.

فهرست کوتاه

پیش از تبدیل

طرح را ساده کنید. آن را مربع کنید. متن را به کانتور تبدیل کنید و تصویرها را درون فایل بگذارید.

هنگام تبدیل

تا آماده شدن فایل در صفحه بمانید.

پس از تبدیل

ICO را در زبانهٔ مرورگر و در یک میان‌بر، در پوسته‌های روشن و تیره آزمایش کنید و SVG را نگه دارید.

اشتباه‌های رایج

استفاده از لوگوی کامل

حروف و جزئیات ظریف در 16 پیکسل ناپدید می‌شوند. نشانی ساده‌شده به کار ببرید.

انتظار اینکه تبدیلی بهتر طرحی شلوغ را درست کند

عیب در اندازه است، نه در ابزار. SVG را ساده کنید.

فراموش کردن حافظهٔ نهان

فاوآیکون قدیمی می‌تواند در مرورگر بماند. پیش از آنکه حکم کنید تازه شکست خورده، حافظهٔ نهان را پاک کنید.

طرح شما روی دستگاهتان می‌ماند

تبدیل به‌صورت محلی انجام می‌شود. طرح شما را مرورگر خودتان می‌خواند، همان‌جا نقاشی می‌کند و به‌صورت ICO تحویل می‌دهد. چیزی بارگذاری نمی‌شود، پس نسخه‌ای روی سرور نمی‌ماند و هیچ‌کس دیگر نمی‌تواند آن را ببیند. برای نشان‌های برند منتشرنشده، این راه امن تبدیل SVG به ICO است.

جمع‌بندی

برای تبدیل SVG به ICO در اینجا، طرح را رها کنید و دکمه را بزنید. SVG تصویر نیست بلکه دستورهایی برای کشیدن تصویر است، و اینجا آن دستورها برای هر اندازه یک بار دنبال می‌شوند و نتیجه‌ها به‌صورت ICO ذخیره می‌شوند. طرح در جعبه‌شنی‌ای ترسیم می‌شود که هیچ چیز درون فایل نمی‌تواند در آن اجرا شود، و چیزی بارگذاری نمی‌شود. فایل شش اندازه دارد: 16، 32، 48، 64، 128 و 256 پیکسل، هر یک دوباره از SVG کشیده‌شده نه از یکدیگر کوچک‌شده، و همه با شفافیت. آیکون تصویر کوچک نیست، طرحی دیگر است: هر چیزی با خط‌های ظریف یا متن ریز در 16 پیکسل، هر قدر هم با دقت ترسیم شود، به لجن بدل می‌شود. اگر نتیجه گل‌آلود به نظر می‌رسد، پاسخ SVG ساده‌تر است نه تبدیلی بهتر. فونت‌ها و تصویرهایی که از جای دیگر کشیده می‌شوند حل نمی‌شوند.