Конвертировать SVG в ICO Scalable Vector Graphics ↔ Icon Бесплатно Онлайн Безопасно
SVG — это не картинка, а указание, как её нарисовать. Здесь оно выполняется один раз, в выбранном вами размере, и результат сохраняется как ICO. Рисование идёт в песочнице, где ничто из файла не может выполниться, и никуда ничего не отправляется.
Преобразуйте свой файл
Перетащите SVG сюда или выберите файл.
Ваш файл не покидает это устройство. Всё работает в вашем браузере.
Ничего не загружается
Чем вектор отличается
SVG — не картинка; это набор указаний, как её нарисовать: круг такого-то радиуса здесь, линия отсюда досюда, эта фигура залита тем цветом. В 2001 году он стал стандартом веба, и, поскольку хранит рисунок, а не результат, из того же файла, что выводит значок в шестнадцать пикселей, можно отпечатать рекламный щит. PNG или JPEG хранит обратное: готовую сетку цветных точек без всякой памяти о том, что их нарисовало. Эта несимметричность решает всё на этой странице. Путь от вектора к растру — просто отрисовка указаний в выбранном размере; путь обратно — трассировка: программа смотрит на сетку точек и гадает, какие фигуры могли её породить.
Где они встречаются
Логотипы, значки, карты, схемы и графики живут как SVG, потому что должны читаться в любом размере и часто требуют перекраски. Из них же делают значки вкладок и приложений. Обратное направление — для того мига, когда вектор обязан стать плоской картинкой: почтовая программа, которая не показывает SVG, предпросмотр в социальной сети, документ, который напечатает кто-то с программами старше ваших, или форма загрузки, принимающая только фотографии.
Частые вопросы
Я трассировал фотографию, и вышло ужасно. Почему?
Потому что трассировка никогда не предназначалась для фотографий. Она ищет области схожего цвета и обводит каждую контуром, что подходит плоской графике — логотипу, трафарету, рисунку линиями — и проваливается на фотографии, где каждая область плавно переходит в следующую. Программе приходится выдумывать границу там, где её нет, и получается либо плакатная россыпь плоских пятен, либо файл с десятками тысяч крошечных фигур. Для фотографий оставайтесь с растром.
Почему мой SVG выглядит иначе в другой программе?
Чаще всего из-за шрифтов. SVG с текстом называет шрифт по имени и рассчитывает, что открывающая машина им располагает; если нет, подставляется другой, и вёрстка съезжает. Лекарство — перевести текст в контуры перед выгрузкой: каждая буква становится фигурой, и файл выглядит одинаково везде, ценой того, что текст уже не правится и не выделяется. Продвинутые эффекты — фильтры и режимы наложения — вторая обычная причина расхождений.
Теряет ли файл в качестве?
Смотря что способны вместить оба формата. Перевод между форматами, которые хранят одно и то же, — PNG в BMP, WAV в FLAC — не теряет ничего. Перевод в формат, который отбрасывает сведения ради экономии места, вроде JPEG или MP3, каждый раз теряет немного, и обратный перевод их не вернёт. Где есть выбор, эта страница склоняется к сохранению исходного качества, а не к самому маленькому файлу.
Мой файл куда-нибудь отправляется?
Нет. Преобразование происходит внутри вашего браузера, на вашей же машине; файл её не покидает, да и некуда — здесь нет сервера, который мог бы его принять. Потому большой файл ограничен вашей собственной памятью, а не отправкой; и потому ничто из преобразованного вами не может попасть в чьи-либо журналы, в том числе в наши. Средства для звука и видео всё же забирают свой преобразующий механизм с этого сайта при первом обращении — около тридцати мегабайт, один раз; дальше работа по-прежнему идёт целиком на вашей машине.
Зачем люди конвертируют SVG в ICO
Файл ICO — это значок. Это маленькая картинка, которая появляется на вкладке браузера рядом с названием страницы, в списке закладок, на ярлыке и в углу окна программы в Windows. Если вы ведёте сайт, вам нужен значок с вашим знаком. Если вы создаёте программу, он нужен для её исполняемого файла. А если у вас есть логотип, то это, скорее всего, векторный рисунок в формате 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 или сделайте ссылку на него в заголовке страницы и посмотрите на вкладку браузера. В Windows можно назначить его ярлыку и посмотреть, как он выглядит в разных размерах.
Ближе к SVG и ICO
Вектор и пакет
SVG — это единый рисунок, который можно отобразить в любом размере. ICO — это контейнер с несколькими картинками внутри, каждая фиксированного размера. Программа, показывающая значок, выбирает картинку, ближайшую к нужному размеру, что позволяет избежать размытого масштабирования. Конвертировать SVG в ICO — значит отобразить рисунок в размерах, которые должен содержать контейнер.
Где используются значки
Браузеры используют самые маленькие размеры для вкладок, а большие — для закладок и страницы новой вкладки. Windows использует их для панели задач, меню «Пуск» и Проводника. У мобильных устройств свои наборы размеров картинок для главных экранов, которые обычно являются файлами PNG, а не ICO. Если вы готовите значок приложения для телефона, лучший путь — SVG в PNG в размерах, которых требует платформа.
Фавиконы сегодня
Современные браузеры принимают PNG и даже SVG как фавиконы, но ICO остаётся форматом, который работает везде, включая старые браузеры, некоторые программы чтения лент и инструменты, автоматически ищущие favicon.ico. Иметь такой файл — безопасный выбор.
Типичные ситуации подробно
Фавикон сайта
Конвертируйте SVG в ICO, сохраните файл как favicon.ico в корне вашего сайта и сделайте на него ссылку. Вкладка каждого браузера будет нести ваш знак, что делает страницу узнаваемой среди множества открытых вкладок.
Значок программы Windows
Программы в Windows несут значок в исполняемом файле и в ярлыках. Разработчикам для этого нужен многоразмерный ICO. Шесть размеров, которые вы получаете, покрывают обычные требования.
Ярлыки и папки
В Windows можно дать ярлыку или папке собственный значок. 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, а не лучшая конвертация. Шрифты и картинки, подтянутые из других мест, не загружаются.