Сделать из png ico: Конвертировать PNG в ICO онлайн — Convertio

Конвертировать PNG в ICO онлайн, бесплатно преобразовать .png в .ico

Расширение файла	.png
Категория файла	images
Описание	PNG – растровый графический формат, разработанный в качестве альтернативы GIF, который обладал коммерческой лицензией. В его основе находятся лучшие возможности предшественника, в том числе сжатие без потерь и поддержка прозрачного фона. Технология PNG обеспечивает сохранение всех этапов редактирования и восстановление шага с сохранением качества. Однако она не позволяет сохранять в одном файле сразу несколько картинок, что ограничивает ее использование при разработке анимированных изображений.
Технические детали	Расширение PNG было предложено как инструмент, помогающий передавать и хранить изображения во Всемирной сети. Технология ограничивается 8-битным каналом прозрачности, благодаря чему можно корректировать цвета от непрозрачных до прозрачных. Она поддерживает 24-битовые цвета RGB, соответствующие картинки и оттенки серого. Правда, в качестве непрофессионального формата PNG не может отображать другие цветовые пространства. Открыть такие файлы позволяют большинство программ, также они запускаются в любых браузерах. Изображения отличаются небольшим весом при хорошем качестве.
Программы	Apple Preview Microsoft Windows Photos Adobe Photoshop CC Corel Paint Shop Pro Microsoft Windows Photo Gallery Viewer
Основная программа	Microsoft Paint
Разработчик	PNG Development Group (donated to W3C)
MIME type	image/png

Как мне конвертировать .

PNG в .ICO?

Да, вы можете использовать веб-сайты, как некоторые люди рекомендуют в своих ответах, но если вы научитесь делать это правильно, вы, вероятно, сможете сделать это самостоятельно за то же время, которое требуется для перехода на сайт, загрузки файла, ожидания в очереди и скачать его снова. Недостаток использования сайтов в том, что вы обычно не можете контролировать размеры или качество изображения отдельных размеров внутри значка.

Вот как вы делаете это вручную. Вы можете использовать GIMP — альтернативу Photoshop с открытым исходным кодом, которую можно скачать с веб-сайта проекта. Никаких дополнительных плагинов не потребуется. Возьмите PNG, который хотите конвертировать. Он должен иметь размер не менее 128 пикселей, но лучше 256+.

Откройте png в Gimp. Вы собираетесь сделать изображение из нескольких слоев. Когда вы закончите, каждый слой будет иметь разный размер в готовой иконке. Вот макет слоя, который я обычно использую

256px (необязательно), 128px, 96px, 64px, 48px, 40px, 32px и 24px. Вы хотите иметь это разнообразие в размерах, потому что вам нужно учитывать все различные масштабирования, которые пользователь будет иметь при просмотре в проводнике. 256 — это излишне, но почему бы не использовать значок в будущем?

Шаг 1: импортировать png в gimp. Я обычно делаю это, используя Open With в Windows на PNG и выбирая GIMP. Gimp сделает все остальное после этого. убедитесь, что это единственный слой на данный момент (удалите все фоновые слои, если gimp сделал любой).

Шаг 2: Измените размер изображения до 256×256 (или 128×128, если вы не хотите использовать 256), щелкнув меню « Изображение» и выбрав « Масштабировать изображение» . Если изображение, которое вы указали, не квадратное, вам придется его обрезать перед масштабированием, иначе оно будет выглядеть странно. Вы можете обрезать, используя инструмент выбора прямоугольника (убедитесь, что вы делаете квадратное выделение, нажимая Shift при выборе). Когда вы закончите выбирать, нажмите на меню

Изображение и выберите Обрезать до выделения .

Шаг 3: Дублируйте текущий слой, выбрав меню « Слой» и выбрав « Дублировать слой» . Снова нажмите меню « Слой», выберите « Масштабировать слой» и измените размер дублированного слоя до нового размера, например 128 или 96 и т. Д.

Шаг 4: промойте и повторяйте, пока вы не сделаете свои слои вплоть до 24 пикселей.

Шаг 5: экспортировать текущий чертеж в виде значка, щелкнув меню « Файл» и выбрав « Экспортировать как» . Когда вы получаете диалоговое окно, вы хотите убедиться, что вы указали правильное расширение (.Ico), а gimp обработает все остальное.

Конвертировать PNG в ICO быстро и качественно – Фотоконвертер

Лучший способ для перевода PNG в ICO

Самый удобный вариант для конвертации PNG файлов – это скачать и установить Фотоконвертер. Установленная программа работает быстро и эффективно, позволяя конвертировать множество файлов PNG в формат ICO за раз.

Вы довольно быстро оцените, как Фотоконвертер способен сэкономить массу времени, необходимого при обработке файлов вручную или онлайн.

Скачайте и установите Фотоконвертер

Фотоконвертер легко скачать, установить и использовать – не нужно быть специалистом, чтобы разобраться как он работает.Установить Фотоконвертер

Добавьте PNG файлы

После того, как программа установилась, запустите Фотоконвертер и добавьте в главное окно все .png файлы, которые вы хотите конвертировать в .ico

Вы можете выбрать PNG файлы через меню Файлы → Добавить файлы либо просто перекинуть их в окно Фотоконвертера.

Выберите место, куда сохранить полученные ICO файлы

Во вкладке Сохранить выберите папку для записи готовых ICO файлов.

Во вкладке Редактировать есть возможность добавить эффекты редактирования изображений для использования во время конвертации, но это не обязательно.

Выберите ICO в качестве формата для сохранения

Для выбора преобразования в .ico, нажмите на иконку ICO в нижней части экрана, либо кнопку +, чтобы добавить возможность записи в этот формат.

Теперь просто нажмите кнопку Старт, чтобы начать конвертацию. Созданные ICO файлы сохранятся в указанное место с нужными параметрами и эффектами.

Попробуйте бесплатную демо-версию

Видео инструкция

Интерфейс командной строки

Опытные пользователи могут использовать конвертер PNG в ICO через командную строку в ручном или автоматическом режиме.

За дополнительной помощью по использованию по использованию командной строки обращайтесь в службу поддержки пользователей.

Конвертер PNG в favicon.ico онлайн

Конвертер PNG в favicon.ico онлайн

Конвертер позволяет преобразовать изображения из формата PNG в формат ICO. Допускаются размещение нескольких изображений разных размеров в одном файле.

Однослойные иконки

Если вы видите этот текст, вам надо включить JavaScript или воспользоваться более современным браузером.

Многослойные иконки

Если вы видите этот текст, вам надо включить JavaScript или воспользоваться более современным браузером.

Ограничения

Сообщения об ошибках просто показываются пользователю в окошке. Вся эта магия со специальными иконками, обозначающими ту или иную ошибку — удалена. Это потребовало некоторых изменений… Которые, возможно, приведут к глюкам… Если у вас что-то не работает, пожалуйста пишите (на почту, или в комментари внизу). Если работает, то можете тоже написать 🙂 Это прибавит мне уверенности в позитивности сделанных изменений.

Обрабатываются изображения до 256×256 пикселей (вы действительно хотите иконку такого размера?).

Если слой один, то изображение должно быть строго 16×16 пикселей.

Если вы уверены, что присылаете валидный PNG, а он не распознаётся, пожалуйста, свяжитесь со мной или оставьте комментарий. Я буду очень признателен, если вы предоставите мне «нехороший» файл (я не подглядываю за пользователями и не сохраняю их данные, поэтому, у меня вашего файла нет).

Обратите внимание, на сервере установлено ограничение на объём загружаемых данных — 256 килобайт. Этого должно быть вполне достаточно. Если же ваши картинки слишком велики, пожалуйста, обработайте их предварительно.

Заметьте, что формат PNG допускает разные степени сжатия и сохранение в графическом файле META-информации (например, копирайт автора). Вся эта информация и все особенности ваших PNG-файлов будут сохранены в результирующем

favicon.ico. Если вы хотите получить favicon.ico меньшего размера, то предварительно оптимизируйте ваши исходные файлы.

И последнее замечание. Некоторые графические редакторы/просмотрщики не поддерживают формат ICO+PNG. К таковым относится, например, gqview. Эти программы не смогут отобразить ваши иконки, но это не повод для беспокойства, это проблемы исключительно этих программ.

Формат ICO был разработан Microsoft в 1985 году. Изначально, он был очень похож на BMP и поддерживал весьма ограниченный набор разрешений и глубин цвета. С самого начала, формат допускал расширение.

В дальнейшем формат многократно дорабатывался, и в 2007 году стал поддерживать PNG-кодирование. В этом случае ICO-файл состоит из глобального заголовка и набора заголовков для каждого слоя. Само же изображение слоя может кодируется в PNG-формате.

У этого метода есть плюсы: PNG-кодирование на много эффективней, чем BMP. Сам Microsoft рекомендует использовать именно PNG. Есть и недостатки: старый софт может не поддерживать такое кодирование. Но на столько старых приложений уже очень мало.

Таким образом, мой конвертер не преобразует данные изображения. Он частично разбирает PNG-файлы, вытаскивает из них только мета-информацию, создаёт заголовки для ICO-контейнера и формирует окончательный файл.

Если вы хотите получить ICO-файл, закодированный абсолютно каноническим образом, по стандарту 1985 года, то вы можете воспользоваться моим онлайн редактором favicon.ico.

Возможно вас так же заинтересует Онлайн ICO-редактор и онлайн генератор обоев, фонов и заливок.

---

---

---

Отправить

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

<link href="/favicon. svg" rel="icon" type="image/svg+xml" />

Так как формат SVG векторный и может масштабироваться, то даём указание использовать изображение для любых размеров.

Windows

Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150. png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода: 

<meta name="msapplication-config" content="browserconfig.xml" />

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Можно обойтись без девяти строк кода и ограничиться тремя, хотя файлы всех девяти размеров лучше загрузить на сайт. Используется одна хитрость: если иконка не соответствует рекомендуемому размеру устройства, то используется иконка большего размера. Подключаем изображение размером 180×180 следующим образом:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Затем добавим строку кода из предыдущего примера:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

<link rel="manifest" href="/manifest.json" />

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

 

Ещё о сайтостроении

• • Выбираем цвет сайта

    Наверняка у каждого завсегдатая интернет-сети есть несколько любимых сайтов. Неважно, какова их тематика и направленность, важно то, почему человек выбирает тот или иной сайт. Ведь, согласитесь, в сети всегда есть из чего выбрать: где…

  • Принцип работы интернет-магазина

    Сегодня компьютеры с выходом в интернет есть практически в каждом доме. Это и объясняет высокую популярность интернет-магазинов, открытие которых не требует больших финансовых вложений со стороны предпринимателя, так как для организации…

  • Создание логотипа для привлечения посетителей …

    Быть может, у пользователя уже есть готовый сайт, который удовлетворяет его со всех точек зрения. Тем не менее, число посетителей нестабильно. В чем же причина этого? Не хватает запоминающегося логотипа. На практике он всегда работает на…

  • О favicon и не только

    Сейчас каждый веб-мастер знает, что favicon – это значок (иконка) сайта, веб-страницы. А в далёком 2006 году, когда создавалась первая версия сайта aitishnik.ru, о favicon знали немногие и уж тем более, немногие его использовали. Тогда…

  • Основы юзабилити

    Высокая конверсия, или отношение численности посетителей сайта к фактическим покупателям, зависит от многих факторов. Веб проект может иметь идеальный дизайн, но не давать нужного уровня конверсии. Почему? Часто причиной становятся…

  • Что лучше хостинг или VPS

    Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…

Как создать favicon (фавикон) для сайта

О чем статья:

• Что такое фавикон и каких форматов он бывает

• Какие требования предъявляют разные платформы

• С помощью каких инструментов можно создать иконку

• Можно ли не создавать фавикон и как это повлияет на выдачу

Что такое фавикон 

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках. 

Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются.. 

Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.

• Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.

• Второй вариант со сплошной заливкой. Он будет использоваться в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, например, на домашнем экране устройства. 

Фавиконки отображаются на пустой стартовой странице Google

Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.

Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.
Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение. 

Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение

Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

Размеры фавиконов для разных экранов устройств Apple:

	Ретина версия 6 и ниже	Ретина версия 7	Не ретина версия 6 и ниже	Не ретина версия 7
iPhone	144х144	120х120	57х57	60х60
iPad	144х144	152х152	72х72	76х76

Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.

Другие варианты 

Android TV (до 2014 г. – Google TV)	Opera Coast
96х96	228х228

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы. 

Adobe Photoshop или Figma

Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop, например, для этого даже есть специальный плагин – Favicon.ico. В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.

Также лучше не брать иконки из открытых источников. Они неуникальные и если их скачает кто-то еще, ваш сайт не будет отличаться. Если же вы случайно установите в качестве фавикона для сайта логотип чужой компании, к вам могут возникнуть юридические претензии. Лучше создать свою уникальную иконку самостоятельно или закажите создание фавикона у профильного специалиста.

Как установить 

Задайте правильное имя – favicon.ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.

Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

Пропишите адрес в коде на главной странице в теге <head>. Требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в коде. С помощью <head> можно задавать для разных страниц сайта собственные иконки.

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Запомните

1. Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.
   

3. Создавайте сразу две версии фавиконов – с прозрачным и непрозрачным фоном. Сегодня иконки отображаются на разных устройствах, разных платформах и в разных контекстах. Вы не всегда сможете спрогнозировать, как именно значок вашего сайта будет виден у пользователя.

4. Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

5. Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.

6. Чтобы пользователи могли сохранять сайт как приложение на домашний экран мобильного устройства, создайте веб-манифест и свяжите его с кодом на сайте.

7. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

8. Наличие favicon может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче. 

Материал подготовила Светлана Сирвида-Льорентэ.

Как конвертировать PNG в ICO?

Существуют разные форматы изображений, которые пользователи используют для разных целей. Большинство редакторов изображений имеют возможность сохранять изображения как PNG, но не как ICO. Если пользователям необходимо конвертировать PNG в ICO для работы, они должны использовать сторонние методы. Оба эти файла отличаются друг от друга и используются по-разному. В этой статье мы покажем вам методы, с помощью которых вы можете легко конвертировать PNG в ICO.

PNG в ICO

Конвертация PNG в ICO

PNG или переносимая сетевая графика – это формат изображения, который содержит растровое изображение, сжатое без потерь. Этот формат в основном используется для сохранения изображений в Интернете. Профессионалы в области графики обычно используют этот формат для сохранения своей работы и передачи ее без потери качества. Файл ICO содержит значок, который используется для программы, папки или файла. В этом формате хранится одно или несколько изображений различных размеров, поэтому его можно соответствующим образом масштабировать в зависимости от использования. Все значки в Windows сохраняются в формате ICO, а сохраняемые изображения будут иметь размер от 16 × 16 до 256 × 256 пикселей.

Есть несколько методов, с помощью которых вы можете конвертировать один из другого. Ниже мы предоставили несколько полезных методов.

Метод 1: преобразование PNG в ICO через онлайн-сайт

Есть много интернет-сайтов, которые предоставляют преобразование файлов изображений. На каждом сайте будут разные варианты преобразования PNG в ICO. Большинство просто преобразует файл в тот же размер и качество. Некоторые другие предоставляют дополнительные настройки для размера, улучшения цвета и других параметров. В наши дни такие небольшие задачи всегда можно выполнить через онлайн-сайты. Людям нравится использовать онлайн-сайт один раз, а не устанавливать приложение, которое они не будут использовать в будущем. Чтобы преобразовать PNG в формат ICO, выполните следующие действия:

1. Откройте браузер и перейдите в Преобразование изображений онлайн сайт. Нажмите кнопку «Выбрать файлы» и выберите свой файл PNG. Вы также можете просто перетащить изображение.Открытие файла на онлайн-сайте
2. Прокрутите вниз до дополнительных настроек и установите размер, который вы хотите для вашего файла ICO. Вы также можете выбрать другие дополнительные параметры, если хотите.
   Примечание. Если вы не хотите устанавливать дополнительные параметры, просто нажмите первую кнопку «Начать преобразование».Настройка дополнительных настроек
3. После того, как вы установите дополнительные параметры, нажмите кнопку «Начать преобразование» внизу.Начало преобразования
4. После завершения преобразования нажмите кнопку «Загрузить», чтобы сохранить файл ICO в своей системе.Скачивание конвертированного ICO файла

Метод 2: преобразование PNG в ICO с помощью программного обеспечения

Этот метод предназначен для тех пользователей, которым потребуется преобразование более одного раза. Если вы не уверены в своем интернет-соединении, лучше оставить себе заявку на работу. Поскольку онлайн-метод всегда требует подключения к Интернету. Автономные программы также легко переносить с одного компьютера на другой. Выполните следующие действия, чтобы преобразовать PNG в ICO с помощью программного обеспечения:

1. Откройте браузер и перейдите в Легкий конвертер PNG в Иконки страницу загрузки. Скачайте конвертер.
2. Вы можете открыть его с помощью WinRAR. Нажмите кнопку «Плюс» «+», чтобы добавить файл PNG.Открытие файла PNG в конвертере
3. С правой стороны вы можете выбрать любой размер, который вы хотите для преобразования. Вы также можете добавить новый размер или тот же размер, что и у файла PNG, щелкнув значок «+» с правой стороны.
4. После того, как вы выбрали размер, нажмите кнопку «Конвертировать», чтобы преобразовать PNG в ICO.Выбор размера и нажатие кнопки конвертировать
5. После того, как файл будет сохранен в вашей системе, вы можете проверить свойства файла, чтобы подтвердить формат и размер файла.Проверка свойств преобразованного файла

Преобразование изображений

— Как преобразовать .PNG в .ICO?

Да, вы можете использовать веб-сайты, как рекомендуют некоторые люди в своих ответах, но если вы научитесь делать это правильно, вы, вероятно, сможете сделать это самостоятельно за то же время, которое требуется для перехода на сайт, загрузки файла и ожидания. очередь и загрузите его снова. Недостаток использования сайтов в том, что вы обычно не можете контролировать размеры или качество изображения отдельных размеров внутри значка.

Вот как это делается вручную.Вы можете использовать GIMP, альтернативу Photoshop с открытым исходным кодом, которую можно загрузить с веб-сайта проекта. Никаких дополнительных плагинов не потребуется. Возьмите PNG, который хотите преобразовать. Размер должен быть не менее 128 пикселей, но лучше 256+.

Открыть сказал png в GIMP. Вы собираетесь сделать изображение из нескольких слоев. Когда вы закончите, каждый слой будет разного размера в готовой иконке. Вот макет слоя, который я обычно использую 256 пикселей (необязательно), 128 пикселей, 96 пикселей, 64 пикселей, 48 пикселей, 40 пикселей, 32 пикселей и 24 пикселей. Вы хотите иметь такое разнообразие размеров, потому что вам нужно учитывать все различные увеличения, которые пользователь будет иметь при просмотре в проводнике. 256 — это перебор, но почему бы не сделать иконку пригодной для будущего?

Шаг 1. Импортируйте png в gimp. Обычно я делаю это, используя «Открыть с помощью» в окнах png и выбирая gimp. После этого GIMP сделает все остальное. убедитесь, что это единственный слой на данный момент (удалите все фоновые слои, если gimp сделал таковые).

Шаг 2: Измените размер изображения до 256×256 (или 128×128, если вы не хотите использовать 256), щелкнув меню Изображение и выбрав Масштаб изображения .Если изображение, с которым вы работаете, не квадратное, вам придется обрезать его перед масштабированием, иначе оно будет выглядеть странно. Вы можете обрезать, используя инструмент выделения прямоугольником (убедитесь, что вы делаете квадратное выделение, нажимая Shift во время выделения). Когда вы закончите выбор, щелкните меню Image и выберите Crop to Selection .

Шаг 3: Дублируйте текущий слой, выбрав меню Layer и выбрав Duplicate Layer . Снова щелкните меню Layer и выберите Scale Layer и измените размер дублированного слоя на новый размер, например 128 или 96 и т. Д.

Шаг 4: промойте и повторяйте, пока не сделаете слои полностью до 24 пикселей.

, шаг 5: экспортируйте текущий чертеж как значок, щелкнув меню File и выбрав Export As . Когда вы получите диалоговое окно, убедитесь, что вы ввели правильное расширение (.Ico), а все остальное сделает gimp.

Конвертировать PNG в ICO онлайн

Расширение файла	.ico
Категория файла	изображений
Описание	ICO — это специальный формат для отображения иконок, ярлыков, иконок в ОС Windows.Он представляет собой два растровых изображения. Первый — это маска изображения, а второй — это значок, отображаемый на лицевой стороне. Он используется для соединения изображения с файлом ОС. Пользователи устройств с операционными системами Microsoft могут редактировать файлы ICO для создания уникальных значков. Его можно конвертировать в файлы с популярными расширениями JEPG и PNG. Сохранение файлов в ICO используется при разработке графики в индикаторах, значках и подобных графических элементах. Они используются как значок и логотип сайта. Любое приложение открывает их для просмотра изображений и специальных программ вроде ACDSee или Axialis IconWorkshop.
Технические данные	Расширение .ico используется с первых версий ОС Windows, постепенно увеличивая размер и максимальное количество поддерживаемых оттенков. Например, с «семеркой» могут помочь значки размером до 256х256 пикселей в 32 бита. Чтобы обеспечить совместимость с более ранними версиями Windows, лучше использовать восьмибитные версии значков.
Программы	Adobe Photoshop Microsoft Paint Программа просмотра изображений и факсов Windows
Разработчик	Microsoft
Тип MIME	изображений / ico изображения / x-icon Приложение / ico Приложение / x-ico приложение / x-win-bitmap изображение / x-win-bitmap приложение / октет-поток

Как легко конвертировать PNG в ICO в Windows

Если у вас есть собственный веб-сайт, есть одна небольшая деталь, которой обычно пренебрегают.Это не влияет на трафик, рейтинг или конверсии. Это только дает вид веб-сайта в браузере. Это значок, который отображается рядом с адресной строкой или на вкладке каждой загруженной страницы.

Этот значок представляет собой маленькое квадратное изображение в формате ICO. ICO — это формат файлов значков Windows. В файле значков может храниться файл значков с одним узором, многоразмерными и многоцветными значками. Когда вы используете систему Windows для создания значков программ, вы обнаружите, что изображения в формате PNG нельзя использовать, вам нужно использовать специальный файл ICO.Как в этой ситуации конвертировать PNG в ICO? Из этого туториала Вы узнаете, как конвертировать PNG в файлы ICO в системе Windows.

Часть 1 — Что такое ICO

ICO — это формат файлов значков Windows. В файле значка может храниться один файл значка многоразмерного многоцветного рисунка с одним рисунком. Значок на самом деле представляет собой набор изображений в разных форматах, а также содержит определенную прозрачную область.

Файлы ICO очень гибкие: значки могут изменяться в зависимости от типа файла.Если файлы ICO будут изменены, они потеряют гибкость и не смогут правильно отображать значки в соответствии с типом файлов.

Часть 2 — Как преобразовать PNG в ICO с помощью Photoshop

Adobe Photoshop — это редактор растровой графики, разработанный и изданный Adobe Inc. После загрузки Photoshop в левой части экрана появляется боковая панель с различными инструментами и множеством функций редактирования изображений. Эти инструменты обычно подпадают под категории рисования, рисования, измерения и навигации, выделения, набора текста и ретуши.Вы можете отредактировать свой значок, прежде чем конвертировать PNG в ICO.

Шаг 1. Сначала необходимо загрузить и установить Adobe Photoshop с его веб-сайта.

Шаг 2. Дважды щелкните Adobe Photoshop на рабочем столе, а затем щелкните «Файл»> «Открыть…», чтобы выбрать файл PNG, который необходимо преобразовать в ICO.

Шаг 3. На этой странице вы можете редактировать файл PNG. Рисуйте, рисуйте с помощью тысяч пользовательских кистей или создавайте свои собственные — все это поддерживается в Adobe Photoshop.

Шаг 4. Затем щелкните «Файл»> «Сохранить как…», чтобы сохранить файл PNG в формате BMP.

Шаг 5. Найдите сохраненное изображение BMP и измените расширение на ico.

Примечание

«Невозможно изменить расширение напрямую в формате png».

Часть 3 — Преобразование PNG в ICO с помощью конвертера ICO Offline

Если у вас не установлен Photoshop и вы не хотите загружать специальный редактор изображений для управления файлами значков, использование автономного конвертера ICO, такого как ConvertIcon Desktop, является еще одним отличным методом преобразования PNG в файлы ICO.В этой части мы порекомендуем некоторые конвертеры PNG в ICO, которые могут помочь вам конвертировать изображение в автономном режиме.

1. ConvertIcon Desktop

ConvertIcon Desktop — это простой в использовании инструмент, который может создавать значки различных размеров из обычных изображений. Он обслуживает разработчиков программного обеспечения, которые хотят интегрировать значки в свои веб-дизайны и другие программные проекты, а также обычных пользователей.

Шаг 1. Перейдите на веб-сайт программного обеспечения. Скачайте и установите на свой компьютер.

Шаг 2. Дважды щелкните рабочий стол ConvertIcon, а затем нажмите «Начать», чтобы начать преобразование.

Шаг 3. Затем появится всплывающее окно, вы можете просмотреть свой компьютер и открыть файл изображения PNG, который вы хотите преобразовать в формат файла ICO.

Шаг 4. После загрузки файла PNG нажмите кнопку «Экспорт», чтобы преобразовать PNG в файл ICO. Затем появится всплывающее окно «Параметры экспорта», в котором вы можете выбрать размер изображения.Когда вы закончите, нажмите кнопку «Сохранить как» и выберите место для сохранения файла ICO на вашем ПК с Windows.

2. AveIconifier

AveIconifier — это небольшое приложение, единственная цель которого — преобразовать PNG в файл ICO. Этот инструмент работает с простыми движениями перетаскивания, которые загружают значки, которые будут обрабатываться, чтобы преобразовать их в файл PNG или ICO.

Шаг 1. Сначала загрузите и установите AveIconifier.

Шаг 2. Откройте программу AveIconifier, затем перетащите изображение на подходящую заготовку.

Шаг 3. Затем вы можете изменить размер изображения значка вывода, щелкнуть правой кнопкой мыши левую кнопку и выбрать одно или несколько измерений во всплывающем меню.

Шаг 4. Скорость преобразования очень высока, а качество изображения значка вывода такое же, как и во входном файле. Вы можете найти преобразованные файлы ICO в подпапке «temp» прямо под папкой приложения.

Часть 4 — Преобразование PNG в ICO онлайн

В этой части мы покажем вам несколько онлайн-конвертеров PNG в ICO, которые помогут вам найти лучший способ конвертировать ваш PNG в файл ICO за считанные секунды.

1. ConvertICO

ConvertICO — это бесплатный онлайн-конвертер файлов PNG в ICO. Это быстро, бесплатно и просто в использовании. Он используется для преобразования значков рабочего стола, значков приложений, а также столь необходимых значков для веб-сайтов.

Шаг 1. Перейдите на сайт ConvertICO.

Шаг 2. Чтобы преобразовать файл, расположенный на вашем компьютере, вам просто нужно перетащить файл или щелкнуть, чтобы выбрать его вручную с компьютера. Если вы хотите преобразовать файл, расположенный на веб-сервере, просто введите URL-адрес.

Шаг 3. Нажмите «ВЫБРАТЬ РАЗМЕР СЛОЯ ЗНАЧОК», чтобы выбрать размер изображения ICO.

Шаг 4. После загрузки изображения ваш файл ICO появится в правом верхнем углу. Вы можете скачать и сохранить его на своем локальном устройстве.

2. CloudConvert

CloudConvert — это сервис конвертации, который поддерживает более 200 различных форматов аудио, видео, документов, электронных книг, архивов, изображений, электронных таблиц и презентаций.

Шаг 1. Перейдите к инструменту «PNG в ICO» в CloudConvert.

Шаг 2. Нажмите «Выбрать файл», чтобы выбрать файл PNG на вашем компьютере. Вы также можете выбрать файл из URL-адреса или своих облачных учетных записей, нажав кнопку раскрывающегося списка.

Шаг 3. Отрегулируйте ширину, высоту, размер и т. Д. Вашего файла ICO.

Подсказка

«Установка этих параметров необязательна. Значения по умолчанию — хорошее начало для большинства случаев».

Шаг 4. На этом шаге также поддерживается добавление дополнительных файлов. Когда вы закончите, нажмите кнопку «Конвертировать», после чего вы сможете скачать преобразованный файл ICO.

Заключение

Все платформы для конвертации PNG в ICO уникальны; мы подготовили коллекцию онлайн- и офлайн-инструментов для редактирования фотографий, которые вы можете протестировать сегодня.Вы можете попробовать использовать эти конвертеры ICO, чтобы найти тот, который вам больше всего подходит!

2 способа конвертировать файлы PNG, SVG, JPG в файлы ICO в Windows

Если вы поклонник настройки рабочего стола, вы можете сделать свои папки и файлы уникальными, установив другие значки вместо значений по умолчанию, которые есть в Windows. Хотя вы можете найти огромное количество бесплатных значков в Интернете, вы можете предпочесть создавать свои значки, конвертируя изображения в файлы ICO.Если вы хотите узнать, насколько просто преобразовать файлы PNG, SVG или JPEG в файлы ICO, читайте дальше:

Метод 1. Используйте онлайн-службу преобразования файлов для преобразования изображений в файлы ICO

Многие веб-сайты предлагают услуги преобразования файлов, включая преобразование файлов изображений, таких как файлы PNG, SVG или JPEG, в файлы ICO. Один из таких веб-сайтов — online-converting.com. Чтобы преобразовать изображение в значок, сначала вы должны загрузить изображение со своего компьютера под управлением Windows.

Загрузка файла изображения на сайт конвертера ICO

Затем вы выбираете разрешение, которое хотите использовать для получившегося значка. Файлы ICO могут хранить значки разных разрешений, поэтому они хорошо выглядят независимо от того, насколько большие или маленькие вы предпочитаете свои значки в Windows. Если вы собираетесь использовать файл ICO в Windows 10, убедитесь, что вы отметили опцию «256 пикселей» . Кроме того, если размер полученного файла ICO не является проблемой, вы можете проверить все доступные разрешения.

Онлайн-конвертер ICO — Выбор разрешений, используемых для файла ICO

Третий параметр, который вы можете изменить, — это «Битовая глубина», , которая может быть «8 бит (256 цветов, палитра)» или «24 или 32 бит (32 бит — только изображение с альфа-прозрачностью)» . Если вы хотите получить качественную иконку, выберите второй вариант: «24 или 32 бит […]» . Он поддерживает 16 миллионов цветов, что означает, что создаваемые вами значки более детализированы и, вероятно, красивее.Старые операционные системы использовали 8-битный вариант в те времена, когда экраны не могли отображать больше цветов.

Онлайн-конвертер ICO — Выбор разрядности файла ICO

Когда закончите, нажмите Конвертировать файл и сохраните файл ICO в любом месте на вашем компьютере.

Онлайн-конвертер ICO — преобразование изображения в иконку

ПРИМЕЧАНИЕ: Мы также нашли другие полезные веб-сайты, которые могут конвертировать файлы PNG, SVG или JPG в файлы ICO, которые вы можете использовать в качестве значков в Windows.Однако большинство из них похожи, поэтому подробно рассказывать обо всех не имеет смысла. Вот два таких сайта, которые нам особенно понравились: icoconvert.com и convertico.com.

Метод 2. Использование офлайн-приложения для преобразования файлов для преобразования изображений в файлы ICO

Использование автономного инструмента преобразования файлов — еще один отличный метод преобразования файлов изображений PNG, SVG, JPG или других типов в файлы ICO (значки). К счастью, существует множество таких приложений и даже плагинов для гораздо более сложных графических процессоров, таких как Adobe Photoshop.С другой стороны, они обычно стоят денег или сложны в использовании.

Одно из лучших бесплатных приложений, которое мы нашли, называется ConvertIcon Desktop . Вы можете получить его в Softpedia, перейдя по этой ссылке: ConvertIcon Desktop. ConvertIcon Desktop — портативное приложение, поэтому вам не нужно его устанавливать. Вы загружаете приложение и запускаете его. После запуска щелкните или коснитесь « Начало работы ».

Запуск настольного приложения ConvertIcon

В диалоговом окне «Выбрать файл для загрузки с локального хоста» выберите «Изображение (png, gif, jpg)» в списке «Файлы типа» .Затем просмотрите свой компьютер и откройте файл изображения, который вы хотите преобразовать в формат файла ICO.

ConvertIcon Desktop — Выбор файла изображения для преобразования в ICO

ConvertIcon Desktop покажет вам выбранное изображение. Щелкните или коснитесь Экспорт .

ConvertIcon Desktop — экспорт изображения в виде значка

В окне Параметры экспорта выберите разрешения, которые вы хотите включить в итоговый файл ICO. Не забудьте указать разрешение 512 x 512, особенно если вы используете Windows 10.Исходный размер Разрешение не обязательно, хотя оно выбрано по умолчанию — снимите этот флажок, если хотите, чтобы файл ICO имел гораздо меньший размер.

ConvertIcon Desktop — выбор разрешения значков и их сохранение.

Когда закончите, нажмите Сохранить как и выберите место для сохранения файла ICO на вашем ПК с Windows.

Как использовать вновь созданные значки

Созданные значки можно использовать по-разному. Вот несколько руководств для начала:

Какой метод вы предпочитаете для преобразования файлов изображений в значки?

Теперь вы знаете два простых способа преобразовать файлы изображений в значки.Какой вам больше нравится? Самый простой и быстрый способ пользоваться Интернетом или «через приложение»? Знаете ли вы другие способы преобразования изображений в файлы ICO? Поделитесь ими в разделе комментариев ниже, и давайте обсудим.

Как: создать значок или другое изображение

• 15.02.2019
• 10 минут на чтение

В этой статье

Вы можете создать новое изображение, растровое изображение, значок, курсор или панель инструментов, а затем использовать Image Editor для настройки его внешнего вида.Вы также можете создать новое растровое изображение по образцу шаблона ресурса.

Значки и курсоры: ресурсы изображений для устройств отображения

Значки и курсоры — это графические ресурсы, которые могут содержать несколько изображений разных размеров и цветовых схем для разных типов устройств отображения. У курсора также есть активная точка — это место, которое Windows использует для отслеживания его положения. И значки, и курсоры создаются и редактируются с помощью Image Editor , а также растровые изображения и другие изображения.

Когда вы создаете новый значок или курсор, Image Editor сначала создает изображение стандартного типа. Изображение изначально заполняется экранным (прозрачным) цветом. Если изображение представляет собой курсор, горячая точка изначально находится в верхнем левом углу с координатами 0,0 .

По умолчанию Image Editor поддерживает создание дополнительных образов для устройств, показанных в следующей таблице. Вы можете создавать изображения для других устройств, вводя параметры ширины, высоты и количества цветов в диалоговом окне Custom Image .

Цвет	Ширина (пикселей)	Высота (пикселей)
Монохромный	16	16
Монохромный	32	32
Монохромный	48	48
Монохромный	64	64
Монохромный	96	96
16	16	16
16	32	32
16	64	64
16	48	48
16	96	96
256	16	16
256	32	32
256	48	48
256	64	64
256	96	96

Создать изображение устройства (значок или курсор)

Когда вы создаете новый значок или ресурс курсора, Image Editor сначала создает изображение в определенном стиле (32 × 32, 16 цветов для значков и 32 × 32, монохромный для курсоров).Затем вы можете добавлять изображения разных размеров и стилей к исходному значку или курсору и при необходимости редактировать каждое дополнительное изображение для различных устройств отображения. Вы также можете редактировать изображение, используя операцию вырезания и вставки из существующего типа изображения или из растрового изображения, созданного в графической программе.

Когда вы открываете ресурс значка или курсора в редакторе изображений, по умолчанию открывается изображение, наиболее соответствующее текущему устройству отображения.

Диалоговое окно New Image Type позволяет создать новый образ устройства указанного типа.Чтобы открыть диалоговое окно New Image , перейдите в меню Image > New Image Type . Включены следующие свойства: Target Image Type и Custom .

Свойство Target Image Type перечисляет доступные типы изображений, в которых вы выбираете тип изображения, который хотите открыть:

16 x 16, 16 цветов
32 x 32, 16 цветов
48 x 48, 16 цветов
64 x 64, 16 цветов
96 x 96, 16 цветов

16 x 16, 256 цветов
32 x 32, 256 цветов
48 x 48, 256 цветов
64 x 64, 256 цветов
96 x 96, 256 цветов

16 x 16, монохромный
32 x 32, монохромный
48 x 48, монохромный
64 x 64, монохромный
96 x 96, монохромный

Примечание

Любые существующие изображения не будут отображаться в этом списке.

Свойство Custom открывает диалоговое окно Custom Image , в котором вы можете создать новое изображение с нестандартным размером и количеством цветов.

Диалоговое окно Custom Image позволяет создать новое изображение с нестандартным размером и количеством цветов. Включены следующие объекты недвижимости:

Имущество	Описание
Ширина	Предоставляет место для ввода ширины настраиваемого изображения в пикселях (1–512, ограничение 2048).
Высота	Предоставляет место для ввода высоты пользовательского изображения в пикселях (1–512, ограничение 2048).
Цвета	Предоставляет место для выбора количества цветов для пользовательского изображения: 2, 16 или 256.

Используйте диалоговое окно Open Image , чтобы открывать образы устройств в проектах C ++. В нем перечислены существующие образы устройств в текущем ресурсе (изображения, которые являются частью текущего ресурса).Следующая недвижимость включена:

Имущество	Описание
Текущие изображения	Показывает изображения, включенные в ресурс. Выберите тип изображения, которое хотите открыть.

Для создания нового значка или курсора

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если в вашем .rc , например, курсора, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый . Для значков это действие создает ресурс значка с 16-цветным значком 32 × 32. Для курсоров создается монохромное (2-цветное) изображение размером 32 × 32.

   Если знак «плюс» ( + ) отображается рядом с типом ресурса изображения в диалоговом окне « Вставить ресурс », это означает, что доступны шаблоны панелей инструментов.Щелкните значок плюса, чтобы развернуть список шаблонов, выберите шаблон и выберите Новый .

Чтобы добавить изображение для другого устройства отображения

1. Перейдите в меню Image > New Device Image или щелкните правой кнопкой мыши на панели Image Editor и выберите New Device Image .

2. Выберите тип изображения, которое вы хотите добавить. Вы также можете выбрать Custom , чтобы создать значок, размер которого недоступен в списке по умолчанию.

Чтобы скопировать образ устройства

1. Перейдите в меню Изображение > Откройте образ устройства и выберите изображение из текущего списка изображений. Например, выберите 16-цветную версию значка 32 × 32.

2. Скопируйте текущее отображаемое изображение значка ( Ctrl + C ).

3. Откройте другое изображение значка в другом окне Image Editor . Например, откройте 16-цветную версию значка размером 16 × 16.

4. Вставьте изображение значка ( Ctrl + V ) из одного окна Image Editor в другое. Если вы вставляете больший размер в меньший, вы можете использовать маркеры значков, чтобы изменить размер изображения.

Для удаления образа устройства

Пока изображение значка отображается в Image Editor , перейдите в меню Image > Delete Device Image . Когда вы удаляете последнее изображение значка в ресурсе, ресурс также удаляется.

Примечание

Когда вы нажимаете клавишу Del , изображения и цвета, которые вы нарисовали на значке, удаляются, но значок остается, и теперь вы можете изменить его дизайн. Если вы по ошибке нажали Del , нажмите Ctrl + Z , чтобы отменить действие.

Для создания прозрачных или инверсных областей на изображениях устройств

В редакторе изображений начальный значок или изображение курсора имеет атрибут прозрачности. Хотя изображения значков и курсоров имеют прямоугольную форму, многие из них не отображаются, потому что части изображения прозрачны, а нижележащее изображение на экране отображается через значок или курсор.При перетаскивании значка части изображения могут отображаться в инвертированном цвете. Вы можете создать этот эффект, установив цвет экрана и инверсный цвет в окне «Цвета».

Экран и инверсные цвета, которые вы применяете к значкам и курсорам, либо формируют и раскрашивают производное изображение, либо назначают инверсные области. Цвета указывают на части изображения, которые имеют эти атрибуты. Вы можете изменить цвета, которые представляют атрибуты цвета экрана и инверсии цвета при редактировании. Эти изменения не влияют на внешний вид значка или курсора в вашем приложении.

Примечание

Диалоговые окна и команды меню, которые вы видите, могут отличаться от описанных в Help , в зависимости от ваших активных настроек или версии. Чтобы изменить настройки, перейдите в меню Инструменты > Параметры импорта и экспорта . Дополнительные сведения см. В разделе Персонализация интегрированной среды разработки Visual Studio.

Для создания прозрачных или инверсных областей

1. В окне цветов выберите селектор Screen-Color или Inverse-Color .

2. Примените экранный или инвертированный цвет к изображению с помощью инструмента рисования. Дополнительные сведения об инструментах рисования см. В разделе Использование инструментов рисования.

Для изменения цвета экрана или инвертирования

1. Выберите либо селектор Screen-Color , либо селектор Inverse-Color .

2. Выберите цвет из палитры Colors в окне Colors .

   Дополнительный цвет автоматически назначается другому селектору.

Использовать 256-цветовую палитру

Используя Image Editor , значки и курсоры могут быть большого размера (64 × 64) с 256-цветной палитрой на выбор. После создания ресурса выбирается стиль образа устройства.

Для создания 256-цветного значка или курсора

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если в вашем .rc , например, курсора, вы можете щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите Значок или Курсор и выберите Новый .

3. Перейдите в меню Изображение > Новый образ устройства и выберите нужный стиль 256-цветного изображения.

Выбор цвета из 256-цветовой палитры для больших значков

Чтобы рисовать с выбором из 256-цветовой палитры, необходимо выбрать цвета из палитры Colors в окне «Цвета».

1. Выберите большой значок или курсор или создайте новый большой значок или курсор.

2. Выберите цвет из 256 цветов, отображаемых в палитре цветов в окне цветов .

   Выбранный цвет станет текущим цветом в палитре Colors в окне Colors .

   Примечание

   Исходная палитра, используемая для 256-цветных изображений, соответствует палитре, возвращаемой Windows API CreateHalftonePalette .Все значки, предназначенные для оболочки Windows, должны использовать эту палитру, чтобы предотвратить мерцание во время реализации палитры.

Установка активной точки курсора

Активная точка курсора — это точка, на которую Windows ссылается при отслеживании положения курсора. По умолчанию горячая точка устанавливается в верхнем левом углу курсора с координатами 0,0 . Свойство Hotspot в окне «Свойства» показывает координаты горячей точки.

1. На панели инструментов редактора изображений выберите инструмент Установить точку доступа .

2. Выберите пиксель, который нужно назначить активной точкой курсора.

   Свойство Hotspot в окне Properties отображает новые координаты.

Для создания и сохранения растрового изображения в формате .gif или .jpeg

При создании растрового изображения изображение создается в формате растрового изображения (.bmp). Однако вы можете сохранить изображение в формате GIF, JPEG или в других графических форматах.

Примечание

Этот процесс не применяется к значкам и курсорам.

1. Перейдите в меню Файл > Откройте , затем выберите Файл .

2. В диалоговом окне New File выберите папку Visual C ++ , затем выберите Bitmap File (.bmp) в поле Templates и выберите Open .

   Растровое изображение открывается в редакторе изображений .

3. При необходимости внесите изменения в новое растровое изображение.

4. Пока растровое изображение все еще открыто в Image Editor , перейдите в меню File > Save filename .bmp Как .

5. В диалоговом окне Сохранить файл как введите имя, которое вы хотите дать файлу, и расширение, обозначающее нужный формат файла, в поле Имя файла . Например, myfile.gif .

6. Выбрать Сохранить .

Для преобразования изображения из одного формата в другой

Вы можете открывать изображения в формате GIF или JPEG в редакторе изображений Image Editor и сохранять их как растровые изображения. Кроме того, вы можете открыть файл растрового изображения и сохранить его в формате GIF или JPEG.Изображения, с которыми вы работаете, не обязательно должны быть частью проекта для редактирования в среде разработки (см. Автономное редактирование изображений).

1. Откройте изображение в Image Editor .

2. Перейти в меню Файл > Сохранить имя файла Как .

3. В диалоговом окне Сохранить файл как в поле Имя файла введите имя файла и расширение, обозначающее нужный формат.

4. Выбрать Сохранить .

Чтобы добавить новый ресурс изображения в неуправляемый проект C ++

1. В представлении ресурсов щелкните правой кнопкой мыши файл .rc , затем выберите Вставить ресурс . Если у вас уже есть существующий ресурс изображения в файле .rc , такой как курсор, вы можете просто щелкнуть правой кнопкой мыши папку Cursor и выбрать Insert Cursor .

2. В диалоговом окне «Вставить ресурс» выберите тип ресурса изображения, который вы хотите создать (например, Bitmap ), затем выберите New .

   Если знак «плюс» ( + ) отображается рядом с типом ресурса изображения в диалоговом окне « Вставить ресурс », это означает, что доступны шаблоны панелей инструментов. Щелкните значок плюса, чтобы развернуть список шаблонов, выберите шаблон и выберите Новый .

Чтобы добавить новый ресурс изображения в проект на языке программирования .NET

1. В Solution Explorer щелкните правой кнопкой мыши папку проекта (например, WindowsApplication1 ).

2. В контекстном меню выберите Добавить , затем выберите Добавить новый элемент .

3. На панели Категории разверните папку Local Project Items , затем выберите Resources .

4. На панели Templates выберите тип ресурса, который вы хотите добавить в свой проект.

   Ресурс добавляется в ваш проект в Solution Explorer , и ресурс открывается в редакторе изображений.Теперь вы можете использовать все инструменты, доступные в Image Editor , для изменения вашего изображения. Дополнительные сведения о добавлении изображений в управляемый проект см. В разделе Загрузка изображения во время разработки.

Требования

Нет

См. Также

Редактор изображений для значков
Практическое руководство. Редактирование изображения
Практическое руководство. Использование инструмента рисования
Практическое руководство. Работа с цветом
Клавиши ускорителя

Создавайте все форматы значков в Mac OS с предварительным просмотром! (Пример)

Знаете ли вы, что вы можете легко преобразовать значок вашего веб-сайта во все необходимые форматы с помощью всего одного инструмента?

Правильно, Preview (приложение, встроенное в Mac OS) — это больше, чем программа для просмотра изображений и PDF-файлов.На самом деле он способен выполнять некоторые основные операции редактирования и сохранять в разных форматах.

Как правило, вы хотите предоставить файлы PNG, ICO (значок Windows) и ICNS (значок Apple). В настоящее время вам действительно не нужен favicon.gif .

TL; DR

Если вы уже знаете, что вам нужно для создания правильных значков, и просто хотите знать, где, черт возьми, скрываются форматы ICO и ICNS при сохранении / экспорте изображений в предварительном просмотре, я спасу вас — не так долго — прочтите: удерживайте ⌥ ( ключ option / alt), щелкнув раскрывающийся список Format в диалоговом окне сохранения или экспорта.

Если это объяснение вам непонятно, просто продолжайте читать 😉

Целевой результат

Вы, вероятно, захотите, чтобы на вашей HTML-странице было что-то вроде этого:

Для удобства чтения строки разнесены. Как вы, возможно, заметили, вам нужно охватить множество разрешений и форматов. Не паникуйте, это проще, чем вы думаете.

Хорошо, приступим!

Начните с создания версии вашего значка в формате PNG с разрешением 72dpi, 144×144.В приведенном выше примере это будет favicon-apple-touch-144.png .

Взяв это за отправную точку, вы можете создать все необходимые разрешения:

• PNG: 144×144, 114×114 и 32×32 (для последнего favicon.png )
• ICNS: 128×128
• ICO: 32×32

Конечно, вы можете использовать разные версии вашего логотипа, особенно для небольших разрешений.

Как изменить размер изображения

В окне предварительного просмотра откройте меню Инструменты, , затем Настроить размер… и выберите желаемый размер. Не забывайте всегда использовать 72 пикселя / дюйм.

Как сохранить в разных форматах

При сохранении или экспорте изображения вы увидите раскрывающийся список Format , но его параметры ограничены JPEG, OpenEXR, PDF, PNG и TIFF.

Итак … где ICO и ICNS ??

Вот трюк: удерживайте ⌥ (клавишу option / alt), щелкая раскрывающийся список, и вуаля, у вас появляется несколько новых форматов, включая ICNS и ICO!

Бесплатный онлайн-генератор иконок | Преобразовать изображение в *.ICO файл

»Главная» Бесплатный онлайн-генератор иконок

Бесплатный Интернет * .ICO Icon Generator 1. Загрузка изображения 2. Выберите размер значка 3. Сгенерируйте и загрузите FAQ Как работает этот генератор значков? Это бесплатный онлайн-инструмент, который поможет вам преобразовать логотип, изображение и фотографию в формат *.Формат значка ICO. Мы поддерживает форматы файлов JPG, GIF, PNG, BMP и TIF ​​ для загрузки. Размер вывода от 16×16 пикселей ( значок favicon.ico, размер ), 32×32 ( значок на рабочем столе, ), 48×48 ( большой значок XP ) до 128×128 пикселей ( значок Windows Vista, размер ) в формате значка * .ICO . Мы также создаем значки с разным уровнем резкости, чтобы вы могли сравнивать их и загружать. Что такое значок «Избранное»? Вы могли заметить, что на некоторых сайтах и ​​блогах есть маленький значок, который появляется рядом с веб-адресом в верхней части страницы.Маленький значок представляет собой значок в формате .ICO и называется favicon (сокращение от «значок избранного»). Это также появляется, когда вы сохраняете ссылку в своем браузере, и дает вам графический способ ее просмотра. Некоторые браузеры поддерживают форматы * .GIF и * .PNG, но формат .ICO является наиболее распространенным, и мы рекомендуем его. Настройте свой веб-сайт Значок избранного После того, как ваш файл Favicon.ico был создан с помощью нашего генератора значков. Загрузите его на свой веб-сайт и добавьте приведенный ниже код в свой HTML.Код должен быть размещен после вашего тега: Сделайте вашу иконку лучше Для достижения наилучших результатов вы можете использовать квадратное изображение для загрузки. А если вам нужен прозрачный значок, используйте файл GIF или PNG с прозрачным фоном. »Часто задаваемые вопросы Ознакомьтесь с нашими новыми онлайн-услугами и продуктами, которые только что были запущены: Pic2Icon : преобразование изображения в несколько форматов значков.Включает WinXP, Win7, Vista, смартфон, iPhone и новейшие значки приложений для iPad 3. Вы также можете добавить к значку специальные эффекты одним простым щелчком. MapsEasy : показывайте своим посетителям карты Google Maps без изменения макета веб-сайта. Векторные кнопки и значки : Хорошие материалы для дизайна веб-страниц, дизайна пользовательского интерфейса и офисных документов.

.