Создаем иконку в формате ico онлайн

Как создать фавикон всего за 2 минуты

Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.

Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут https://www.icoconverter.com/. Выберите файл.

Вот, например, я уже подготовил рисунок. Лучше всего выбирать формат png, тогда края будут прозрачными.

Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.

Итак, казалось бы, все. Однако, у меня вылезает ошибка. Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.

Можно сжать и обрезать ее в Photoshop или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».

Теперь выберите «Маленькие».

Скачайте то же самое фото, но меньшего размера.

Конвертируем снова.

Готово. Фавикон уже в ваших загрузках, можно добавлять на сайт.

Для чего нужны иконки ICO?

А может, можно и вовсе обойтись без иконок? Ведь необходимые действия и категории
всегда можно просто подписать. Можно, конечно, но есть несколько веских причин,
которые говорят в пользу того, что создать иконку ICO не просто нужно, а действительно
необходимо

• Простота распознавания. Создать иконки для сайта ICO 16х16 или
  48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях.
  Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями
  и иконками, стали плохо видны (для людей с плохим зрением это представить несложно).
  И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически
  все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с
  легкостью делать в программе нужные действия благодаря привычным значкам.
• Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый
  такой значок в отличие от надписи обладает своими собственными характеристиками
  – формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно
  ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного
  взгляда.
• Запоминаемость. Экспериментально доказано, что картинки запоминаются
  лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные
  ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться
  программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете
  создать значок, который настолько запомнится вашему пользователю, что в дальнейшем
  будет ассоциироваться у него только с вашим сайтом.
• Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать
  на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку»
  — размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил
  название favicon.ico и позволил выделить определенный сайт из множества конкурентов.
  Но подробнее об этом – в следующем пункте.

Сервисы для генерации и проверки favicon

Digitalagencyrankings.com

Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.
Сразу видно, как они будут выглядеть.
Есть возможность скачать все иконки в одном архиве.
Сервис сразу генерирует код для вставки на сайт:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Realfavicongenerator.net

Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.

Загружаем на сайт свое изображение в размере не менее 260*260, чтобы получить более лучшие результаты.
В сервисе мы можем настроить иконку для разных устройств: размер изображения, цвет подложки и т.д. Здесь сразу отображается, как будет выглядеть favicon на устройстве.
При генерации сервис также предоставляет код для вставки на сайт и запакованные иконки в архиве.

Проверка иконок

После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker

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

Характеристики значков

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Формат

Тут есть из чего выбирать:

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
• .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.

.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах

У .png поддержка заметно шире

Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.

Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.

Размер

Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:

• 16 на 16 точек
• 32 на 32
• 192 на 192
• 512 на 512

При желании можно использовать несколько вариантов, чтобы адаптировать фавиконку под требования нескольких платформ.

Как сделать фавикон для сайта? Обзор онлайн-сервисов

Создать файл .ico можно при помощи специальных сервисов, которые мы разберем ниже.

Если вы хотите сделать фавикон своими руками, то вот несколько полезных онлайн-сервисов:

1. Favicon.cc

На сайте размещен редактор, в котором сделать фавикон онлайн и посмотреть, как он будет выглядеть. Поле для рисования находится по центру экрана. Справа от него – палитра цветов. Под редактором находится поле с превью, которое позволяет посмотреть результат работы. Нажав на ссылку «Download favicon», вы скачаете готовую иконку в формате .ico (ссылка выделена красной стрелкой).

2. Создание Favicon на сайте Cy-pr.com

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

Например, вы нашли подходящее изображение какого-то предмета. Вы можете загрузить его на сайт и на его основе сделать favicon.ico. Все просто – выбирайте файл и нажимаете на кнопку «Конвертировать». Ниже появляется иконка. Нажимаете на нее правой кнопкой мышки и сохраняете на своем компьютере файл.

3. Xiconeditor.com

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

4. Favicon.ru

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

5. Findicons.com

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

Как установить или заменить фавикон на сайте?

Проще всего добавить файл в формате favicon.ico в корневую папку сайта. Например, для этого блога он будет находиться по адресу http://adblogger.ru/favicon.ico

Там его найдет большинство браузеров и поисковых систем. Добавлять какие-либо команды в код страниц при этом не потребуется. Волшебство произойдет автоматически

Если вам нужно заменить фавикон на новый, просто замените файл favicon.ico в корневой папке на новый. Смена значка произойдет автоматически. В поисковой выдаче иконка обновится не сразу, а через после апдейта favicon (это отдельный апдейт в поисковых системах).

FAQ по добавлению и замене фавиконок

1. Как поменять фавикон?

Замените файл favicon.ico в корневой папке сайта на новый вариант. Данные изменения автоматически появятся на сайте. В поисковых системах обновление пройдет после специального апдейта.

2. Как проверить фавикон сайта в Яндексе?

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

3. Как проверить наличие фавиконки в Google?

Задайте запрос, по которому ваш проект находится в ТОП-10. Проверьте, что рядом со ссылкой выводится ваша иконка. Если ее нет, возможно, требуется подождать.

4. Можно ли размещать фавиконку не в корневой папке сайта?

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

5. Можно ли установить разные фавиконки для разных страниц сайта?

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

Ограничения

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

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

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

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

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

Если же ваши картинки слишком
велики, пожалуйста, обработайте их предварительно.

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

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

Форматы PNG и ICO. Немного теории

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

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

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

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

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

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

Отправить

Как преобразовать JPG в ICO

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

Вариант 1: GIMP

Бесплатный профессиональный графический редактор, поддерживающий преобразование файлов в ICO-формат прямо «из коробки». Инструкция по взаимодействию с ним в конкретной ситуации выглядит так:

Откройте изображение, которое вы собираетесь переработать в ICO через интерфейс GIMP.
В верхнем меню нажмите на пункт «Файл». Из контекстного меню выберите пункт «Экспортировать как». Можете использовать сочетание горячих клавиш Shift+Ctrl+E.
Запустится окошко настройки экспорта. В верхнем поле можно задать имя. Ниже выбираете формат «ico»

Обратите внимание, что он может называться «Значок Microsoft Windows». Здесь выбирается директория, куда будет сохранен преобразованный файл.
Нажмите кнопку «Экспортировать» для запуска преобразования.
Программа предложит выполнить настройку параметров ICO

Их можете оставить по умолчанию. Для подтверждения экспорта нажмите соответствующую кнопку.

Вариант 2: XnView

Данная программа предназначена для просмотра графических файлов, но поддерживает и их преобразование в другие форматы, в том числе и ICO. Инструкция по работе с XnView выглядит следующим образом:

1. С помощью этой программы откройте в режиме просмотра JPG-файл, который вам нужно преобразовать в ICO.
2. В верхнем меню воспользуйтесь кнопкой «Файл» и выберите из контекстного меню «Сохранить как». Можно использовать комбинацию клавиш Ctrl+Shift+S.
3. Появится окошко с настройками сохраняемого файла. Здесь указывайте имя файла. В «Тип файла» обязательно выберите параметр ICO. Нажмите «Сохранить».
4. У вас появится окошко, предупреждающее о потери авторских прав после преобразования. Нажмите «Ок».

Вариант 3: Paint.NET

Является усовершенствованной версией обычного Paint. Распространяется на бесплатной основе, но по умолчанию не поддерживает работу с форматом ICO. Проблема решается скачиваем специального плагина. Его достаточно просто установить в саму программу.

Процесс установки плагина и взаимодействия с ним выглядит следующим образом:

1. Скаченные файлы плагина скопируйте по одному из следующих адресов:
   • C:\Program Files\paint.net\FileTypes, если речь идет о 64-битной Windows;
   • C:\ Program Files (x86)\ paint.net\FileTypes, если вы пользуетесь 32-битной Windows.
2. В верхнем меню нажмите по пункту «Файл». Из выпадающего списка выберите «Открыть» или воспользуйтесь сочетанием клавиш Ctrl+O.
3. Выберите изображение, которое вы будете преобразовывать в ICO. Откройте его в интерфейсе Paint.NET.
4. Снова нажмите на пункт «Файл» и выберите в контекстном меню пункт «Сохранить как». Можно воспользоваться сочетанием клавиш Ctrl+Shift+S.
5. Укажите имя файла. В поле «Тип файла» поставьте значение «Icons (*.ico)». Нажмите «Сохранить».

Вариант 4: Adobe Photoshop

Данная программа является самым распространенным профессиональным графическим редактором. Однако распространяется на платной основе и, несмотря на весь свой функционал, не поддерживает работу с ICO-файлами. Данной ограничение исправляется с помощью плагина ICOFormat.

Инструкция по добавлению плагина и взаимодействию с ним выглядит следующим образом:

1. Загруженный файл плагина необходимо поместить в одну из следующих директорий:
   • C:\Program Files\Adobe\Adobe Photoshop CC 2017\Plug-ins\File Formats для Windows x64;
   • C:\Program Files (x86)\Adobe\Adobe Photoshop CC 2017\Plug-ins\File Formats для Windows x32(x86).
2. Иногда по указанному местоположению может отсутствовать папка File Formats. В таком случае просто создайте ее.
3. Откройте изображение, которое собираетесь преобразовать через интерфейс программы.
4. Измените его размер на 256×256 или меньше. Это можно сделать с помощью «Изображение» — «Размер изображения». В открывшемся окошке указываете новый размер картинки и жмете «Ок».
5. В верхнем меню нажмите «Файл». Из выпавшего меню выберите пункт «Сохранить как».
6. Укажите имя файла. «Тип файла» поставьте ICO и нажмите «Сохранить».
7. Подтвердите выбор формата.

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

Конвертируем изображения в значки формата ICO онлайн

Как уже было сказано выше, для преобразования будут использоваться специальные веб-ресурсы. Большинство из них предоставляют свои функции совершенно бесплатно, а с управлением разберется даже неопытный пользователь. Однако мы решили ознакомить вас с двумя такими сервисами и детально описать процесс конвертирования.

Способ 1: Jinaconvert

Первым мы взяли за пример сайт Jinaconvert, который является разноплановым конвертером данных одного формата в другой. Вся процедура обработки производится буквально в несколько шагов и выглядит следующим образом:

1. Откройте главную страницу Jinaconvert, воспользовавшись любым удобным браузером, и перейдите в необходимый раздел через верхнюю панель инструментов.

Приступайте к добавлению файлов.

Выберите одну или несколько картинок, а затем нажмите на «Открыть».

Загрузка и обработка может занять некоторое время, поэтому не закрывайте вкладку и не прерывайте соединение с интернетом.

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

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

Стоит отметить, что если вами было загружено несколько изображений одновременно, они «склеятся» в один файл и будут отображаться рядом.

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

В случае когда Jinaconvert вам не подходит или по каким-либо причинам с работоспособностью данного сайта возникли проблемы, советуем обратить внимание на следующий сервис

Способ 2: OnlineConvertFree

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

1. Воспользовавшись указанной выше ссылкой, откройте главную страницу OnlineConvertFree и сразу приступайте к загрузке изображений.

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

В списке отыщите нужный нам формат.

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

В любой момент вам доступен переход к работе с новыми картинками, просто кликните на кнопку «Перезагрузить».

Недостатком данного сервиса является отсутствие возможности самостоятельно изменять разрешение значка, каждая картинка будет скачана в размере 128×128. В остальном же OnlineConvertFree отлично справляется со своей основной задачей.

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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Творческая работа для профессионалов и рвущимся в специалисты

Любое дело – это хорошо. Круто, если вы тянетесь к новым знаниям и готовы делать всякие мелкие штучки, чтобы развивать свои способности. Если у вас есть желание самому придумать что-то интересное для портала, то вам понадобится бесплатный сервис: https://favicon.ru/.

Выбираете цвет.

Рисуем в предложенном для этого поле.

Параллельно следите за результатом. Затем скачиваете и готово.

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

Затем кликните «Далее».

И ваша картинка превратится в 8-битный фавикон. Воспользуйтесь прозрачностью, чтобы избавиться от фона.

Вот такой результат у вас получится. Не знаю как вам, но мне, откровенно говоря, он не особенно нравится.

Я бы с большим удовольствие использовал для этой работы фотошоп (Как быстро научиться работать с Photoshop). Создал бы иконку, сохранил ее в png, а затем конвертировал при помощи https://www.icoconverter.com. Да, работы значительно больше, зато результат будет интереснее и красивее. Хотя, выбирать вам.

Посмотрите видео, в котором парень за 9 с небольшим минут, создает потрясающую иконку.

Если вам понравился этот ролик и вы хотите более углубленно изучить фотошоп, то порекомендую вам курс Зинаиды Лукьяненко (Фотошоп с нуля в видеоформате VIP 3.0). Буквально за несколько недель вы овладеете всеми навыками, которые нужны для работы с этой программой.

Я не устану повторять, что техническая сторона – это не такая проблема

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

После того, как получишь все базовые знания относительно технологий.

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

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

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

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

Удачи вам в ваших начинаниях. До новых встреч.

2X-Icon Editor

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

Этот сервис для опытных пользователей подобных программ является наиболее оптимальным решением рассматриваемой задачи. В данном случае вы можете своими руками создать иконку или же выбрать из вариантов, которые предлагает рассматриваемое приложение. Основным преимуществом в данном случае является  возможность  экспортировать созданную картинку с разрешением до 60 на 60. Теперь рассмотрим процесс создания иконки в этой программе:

• Для начала необходимо открыть рассматриваемую программу, сразу после этого найти и выбрать «Import».
• В окне, которое всплывет после проведения рассматриваемых процессов, необходимо будет выбрать «Upload», после чего останавливаете свой выбор на картинке, которую вы найдете в проводнике.
• Пришло время определиться, какой именно размер иконки вы хотели бы создать. Здесь будут предложены все возможные варианты, из которых вы выбираете оптимальный для себя, после чего не забудьте нажать на копку «ок».
• Если значок иконки, которую вы создали, вас не устраивает, можете без проблем его отредактировать путем использования специального редактора, который встроен в программу. Нужно также отметить, что в этом редакторе вы можете производить нужные вам изменения с иконкой любого размера, так что это очень удобно. Помимо всего прочего, в рассматриваемом редакторе пользователь без проблем сможет создать свою собственную картинку, причем, с самого нуля.

• Если вы занялись внешним видом иконки самостоятельно, можно также предварительно глянуть на результат, который получился. Для этого нужно просто нажать на функцию «Preview».
•  Если все сделанное вами вас полностью устраивает, теперь пришло время скачать такую иконку. Для этого вам необходимо будет найти на экране функцию  «Export».
• Для того чтобы созданная иконка сохранилась на вашем компьютерном устройстве необходимо выбрать функцию «Export your icon».

Если вы ничего нового не хотите придумывать и единственной вашей целью является создание однотипных иконок в формате ИСО, тогда X-Icon Editor – оптимальный вариант из имеющихся.

Как добавить favicon для портативных устройств

С развитием технологий иконки стали использоваться не только в десктопных браузерах, но и при выводе информации на iOS и Android-устройствах. Как правило, эти значки также используются в качестве ярлыков на рабочем столе. Каждое из них имеет свои требования к подходящему изображению.

Android

Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch – пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

Что касается формата, то изображения должны быть в формате png.

iOS

В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/.

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

Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

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

После этого проверьте наличие всех необходимых иконок, введя адрес своего сайта в соответствующую строку на главной странице RealFaviconGenerator.

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

Экспорт (сохранение) иконки в нужном формате

Это всё, но осталось правильно сохранить. В «Gimp 2.8» нужно экспортировать, это можно сделать нажав на верхнем баре кнопку «Файл» и выбрав «Экспортировать».

Открывается окно с сохранением работы

Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте

Нажимаем «Экспортировать», появляется окошко с детальной настройкой импорта. Необходимо настроить всё именно так, как показано на скриншоте иначе корректной работы не гарантирую.

То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.