Создаем уникальный favicon и устанавливаем на сайт
Содержание:
- Творческая работа для профессионалов и рвущимся в специалисты
- В версии «Виста»
- Какой формат использовать?
- В версии «Виста»
- Как установить фавикон на сайт
- Как подключить favicon
- Последующее развитие
- Способ 1. Используйте онлайн-сервис преобразования файлов для преобразования изображений в файлы ICO
- Launcher Icon Generator
- Виды ICO-файлов
- Экспорт (сохранение) иконки в нужном формате
- Как поменять иконку сайта? замена иконки сайта
- Последующее развитие
- Обновленная структура
- Как преобразовать JPG в ICO
- Зачем нужен фавикон
- Уменьшение изображения
Творческая работа для профессионалов и рвущимся в специалисты
Любое дело – это хорошо. Круто, если вы тянетесь к новым знаниям и готовы делать всякие мелкие штучки, чтобы развивать свои способности. Если у вас есть желание самому придумать что-то интересное для портала, то вам понадобится бесплатный сервис: https://favicon.ru/.
Выбираете цвет.
Рисуем в предложенном для этого поле.
Параллельно следите за результатом. Затем скачиваете и готово.
Быть может, вас вдохновит использование готовых рисунков. Выберите файл с компьютера.
Затем кликните «Далее».
И ваша картинка превратится в 8-битный фавикон. Воспользуйтесь прозрачностью, чтобы избавиться от фона.
Вот такой результат у вас получится. Не знаю как вам, но мне, откровенно говоря, он не особенно нравится.
Я бы с большим удовольствие использовал для этой работы фотошоп (Как быстро научиться работать с Photoshop). Создал бы иконку, сохранил ее в png, а затем конвертировал при помощи https://www.icoconverter.com. Да, работы значительно больше, зато результат будет интереснее и красивее. Хотя, выбирать вам.
Посмотрите видео, в котором парень за 9 с небольшим минут, создает потрясающую иконку.
https://youtube.com/watch?v=FZ8Lh-2mEHM
Если вам понравился этот ролик и вы хотите более углубленно изучить фотошоп, то порекомендую вам курс Зинаиды Лукьяненко (Фотошоп с нуля в видеоформате VIP 3.0). Буквально за несколько недель вы овладеете всеми навыками, которые нужны для работы с этой программой.
Я не устану повторять, что техническая сторона – это не такая проблема
Важно отточить свои навыки, научиться создавать крутые проекты, которые работают. А сделать это можно только на практике
После того, как получишь все базовые знания относительно технологий.
Дальше уже идет опыт и практика. Сперва на одно изображение уходит несколько часов, а со временем тебе уже становится очевидно какие цвета сочетаются, приемы, которые лучше применить в том или ином случае. Нет ничего приятнее, чем смотреть за тем, как работают профессиональные дизайнеры. Это действительно потрясает.
Не тратьте время на бессмысленное постижение, развивайте собственный талант. Не стоит быть похожим на лесоруба из сказки, который до конца жизни пытался найти самый быстрый способ работы топором, но дожил до старости и не срубил ни одного дерева. Он все время уделял беседам, рассуждениям, книгам и иным поискам ответа на волнующий его вопрос. К концу жизни у него уже не осталось сил, чтобы проверить работает ли лучший вариант – просто делать.
Делайте все своевременно. Совсем скоро вы обязательно поймете, как можно работать проще, быстрее и самым лучшим образом. На данном этапе поставьте себе цель выполнять задачи, хотя бы как-то, и у вас обязательно получится дойти до конца с невероятным багажом знаний.
Если вам понравилась эта статья – подписывайтесь на рассылку. Вы сможете получать актуальную информацию, которая поможет вам найти себя в интернете и зарабатывать неплохие деньги на том, что вам понравится: дизайн, написание текстов, верстка и даже руководство всеми этими процессами. Каждый найдет что-то для себя.
Удачи вам в ваших начинаниях. До новых встреч.
В версии «Виста»
Windows Vista добавила возможность отображения иконок 256×256 пикселей в «Проводнике», а также поддержку сжатого формата PNG. Несмотря на то, что с технической точки зрения сжатие не требуется, поддержка Microsoft рекомендовала, чтобы все значки 256×256 в ICO-файлах сохранялись в формате PNG. Это позволяло уменьшить общий размер файла.
«Проводник» Windows Vista поддерживал плавное масштабирование иконок до нестандартных размеров, которые отображались «на лету», даже если в самом файле отсутствовало изображение. В этом дистрибутиве ОС был добавлен слайдер для «масштабирования» размеров значков в целом. При использовании режима с более высоким разрешением и DPI рекомендовалось использовать более крупные форматы иконок (например, 256×256).
Какой формат использовать?
Желательные форматы Favicon: ico, png, svg
ICO
Устаревающий формат. Зато поддерживается большинством браузеров.
Он включает в себя значки разных размеров. Поэтому браузеры могут подтянуть иконку более низкого разрешения.
SVG
Применяется в Safari MacOS. Файлы мало весят, а отображаются хорошо. Дружно ждем, когда все браузеры начнут поддерживать этот формат.
Допустимые форматы: jpeg и gif
Не все браузеры поддерживают отображение таких значков.
Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.
В версии «Виста»
Windows Vista добавила возможность отображения иконок 256×256 пикселей в «Проводнике», а также поддержку сжатого формата PNG. Несмотря на то, что с технической точки зрения сжатие не требуется, поддержка Microsoft рекомендовала, чтобы все значки 256×256 в ICO-файлах сохранялись в формате PNG. Это позволяло уменьшить общий размер файла.
«Проводник» Windows Vista поддерживал плавное масштабирование иконок до нестандартных размеров, которые отображались «на лету», даже если в самом файле отсутствовало изображение. В этом дистрибутиве ОС был добавлен слайдер для «масштабирования» размеров значков в целом. При использовании режима с более высоким разрешением и DPI рекомендовалось использовать более крупные форматы иконок (например, 256×256).
Как установить фавикон на сайт
- Создайте картинку для фавикона с именем favicon.ico.
- Готовый файл нужно сохранить в корневом каталоге сайта.
- Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
- Добавьте ссылку на размещенный файл в HTML-код главной:
Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».
От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.
Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon».
Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.
Как установить разные favicon для отдельных страниц
Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:
Фавиконы на разных разделах одного сайта
Как установить разные фавиконки разделам сайта:
- Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
- В коде нужной страницы пропишите путь к другой фавиконке раздела:
Как подключить favicon
Фавиконка подключается при помощи метатега c указанием соответствующих атрибутов.
После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции документа HTML.
где:
- Аттрибут означает, что это иконка для сайта; может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
- содержит абсолютный или относительный URL к файлу, где он размещен.
- Форматом файла может быть или , размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета.
В некоторых темах подключение происходит программно, с помощью php-кода:
Последующее развитие
Windows XP добавила поддержку 32-битного цвета (16,7 миллиона цветов плюс прозрачность альфа-канала), что позволило отображать в иконке такие полупрозрачные области, как тени, сглаживание и стеклянные эффекты. Этот дистрибутив ОС по умолчанию использовал значки 48×48 пикселей в «Проводнике» «Виндовс». Windows XP могла быть настроена таким образом, что все иконки начинали отображаться в размере 256×256 (с помощью изменения значений размера в Shell), но выборочное их редактирование было недоступно. Техподдержка Microsoft рекомендовала устанавливать размеры значков до 48×48 пикселей для версии XP.
Способ 1. Используйте онлайн-сервис преобразования файлов для преобразования изображений в файлы ICO
Многие веб-сайты предлагают услуги преобразования файлов, включая преобразование файлов изображений, таких как файлы PNG, SVG или JPEG, в файлы ICO. Одним из таких сайтов является online-converting.com. Чтобы преобразовать изображение в значок, сначала необходимо загрузить изображение с компьютера Windows.
Далее вы выбираете разрешения, которые хотите использовать для полученного значка. Файлы ICO могут хранить несколько разрешений значков, чтобы они выглядели хорошо, независимо от того, насколько большими или маленькими вы предпочитаете свои значки в Windows. Если вы собираетесь использовать файл ICO в Windows 10, убедитесь, что вы отметили опцию «256 пикселей». Кроме того, если размер итогового файла ICO не является проблемой, вы можете проверить все доступные разрешения.
Когда закончите, нажмите Convert file и сохраните ваш файл ICO в любом месте на вашем компьютере.
ПРИМЕЧАНИЕ. Мы также нашли другие полезные веб-сайты, которые могут преобразовывать файлы PNG, SVG или JPG в файлы ICO, которые можно использовать в качестве значков в Windows. Однако большинство из них схожи, поэтому нет смысла подробно рассказывать о них. Вот два таких сайта, которые нам особенно понравились: icoconvert.com и convertico.com.
Launcher Icon Generator
Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:
Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.
Начните с выбора картинки из галереи, потом определите цвет, форму заднего фона (круг или квадрат), длину тени, насыщенность, затухание – и ваша иконка готова. Все предельно просто. Для персонального использования сайт полностью бесплатный.
После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:
Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.
Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:
Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор
К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно
Хотите придать папке оригинальный вид, тогда меняем значок папки. Я не говорю про те, которые уже есть в системе, а именно свой значок из своих фотографий или с каких либо изображений.
Сделать иконку (значок) папки из своей фотографии можно в стандартной программе — Paint
, которая у каждого должна быть в операционной системе windows 7
Поверьте мне, со своими значками вам намного будет удобней и быстрей отыскать нужную папку, не вчитываясь в текст (название папки)
Вот небольшой пример. Такой вид папки ускоряет поиск среди большого количества похожих папок.
Найти программу «Paint
можно через «Пуск » и «Все программы » Запустите её и перетащите рисунок в окно программы. А ещё проще, это вызвать контекстное меню, щёлкнув по изображению, которое хотите поставить в роли значка, правой клавишей мышки. Выбираем пункт «Изменить » Откроется программа «Paint »
Виды ICO-файлов
Ассоциация основного файла ICO
.ICO
Формат файла: | .ico |
Тип файла: | Icon File |
Файл ICO является формат изображения. Он хранит иконки для программ, файлов и папок. Он содержит и растровые — маску изображения, и XOR растрового изображения — отображенный значок на маску изображения. Он может быть использован для создания пользовательских иконок.
Программист: | The GIMP Development Team |
Категория файла: | Системные файлы |
Подраздел: | HKEY_CLASSES_ROOT\.ico |
Программные обеспечения, открывающие Icon File:
GIMP, разработчик — The GIMP Development Team
Windows |
Mac |
Linux |
IrfanView, разработчик — Open Source
Windows |
iOS |
Android |
Linux |
ACD Systems ACDSee, разработчик — ACD Systems
Windows |
Microsoft Windows Photos, разработчик — Microsoft Corporation
Windows |
Lemkesoft GraphicConverter, разработчик — Lemkesoft
Mac |
Linux |
Apple Preview, разработчик — Apple
Mac |
Microsoft Paint, разработчик — Microsoft Corporation
Windows |
Android |
FastStone Image Viewer, разработчик — FastStone Software
Windows |
IvanView, разработчик — IvanView
Windows |
Axialis IconWorkshop, разработчик — Axialis Company
Windows |
Paint 3D, разработчик — Microsoft Corporation
Windows |
IcoFX, разработчик — IcoFX Software
Windows |
IconCool Studio, разработчик — Newera Software Technology, Inc.
Windows |
Sib Icon Editor, разработчик — SibCode
Windows |
IconEdit2, разработчик — Dmitry Kozhinov
Windows |
Экспорт (сохранение) иконки в нужном формате
Это всё, но осталось правильно сохранить. В «Gimp 2.8» нужно экспортировать, это можно сделать нажав на верхнем баре кнопку «Файл» и выбрав «Экспортировать».
Открывается окно с сохранением работы
Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте
Нажимаем «Экспортировать», появляется окошко с детальной настройкой импорта. Необходимо настроить всё именно так, как показано на скриншоте иначе корректной работы не гарантирую.
То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.
Как поменять иконку сайта? замена иконки сайта
Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.
Самостоятельное продвижение сайтов в ИнтернетеКак закрыть внешние ссылки от индексацииКак подобрать ключевые слова на сайтГде взять контент для сайтаКакой URL добавить на страницу
Последующее развитие
Windows XP добавила поддержку 32-битного цвета (16,7 миллиона цветов плюс прозрачность альфа-канала), что позволило отображать в иконке такие полупрозрачные области, как тени, сглаживание и стеклянные эффекты. Этот дистрибутив ОС по умолчанию использовал значки 48×48 пикселей в «Проводнике» «Виндовс». Windows XP могла быть настроена таким образом, что все иконки начинали отображаться в размере 256×256 (с помощью изменения значений размера в Shell), но выборочное их редактирование было недоступно. Техподдержка Microsoft рекомендовала устанавливать размеры значков до 48×48 пикселей для версии XP.
Обновленная структура
Что такое ICO-32? Этот формат представляет собой 24-битное изображение с добавлением 8-битного канала для альфа-компоновки. Таким образом, в 32-битных изображениях маски не требуются, но все равно их использование рекомендуется для лучшего рассмотрения картинки.
Windows версии XP и выше начали использовать 32-битное изображение в режиме True color, построив маску AND на основе альфа-канала в случаях, когда 24-разрядная версия не представлена в файле ICO/CUR. Однако более ранние версии Windows интерпретируют все пиксели со 100% непрозрачностью, если только соответствующая маска не снабжена изображением.
Как преобразовать JPG в ICO
Выполнить преобразование с помощью встроенных в Windows инструментов не представляется возможным. Однако это можно сделать с помощью сторонних программных решений.
Вариант 1: GIMP
Бесплатный профессиональный графический редактор, поддерживающий преобразование файлов в ICO-формат прямо «из коробки». Инструкция по взаимодействию с ним в конкретной ситуации выглядит так:
Откройте изображение, которое вы собираетесь переработать в ICO через интерфейс GIMP.
В верхнем меню нажмите на пункт «Файл». Из контекстного меню выберите пункт «Экспортировать как». Можете использовать сочетание горячих клавиш Shift+Ctrl+E.
Запустится окошко настройки экспорта. В верхнем поле можно задать имя. Ниже выбираете формат «ico»
Обратите внимание, что он может называться «Значок Microsoft Windows». Здесь выбирается директория, куда будет сохранен преобразованный файл.
Нажмите кнопку «Экспортировать» для запуска преобразования.
Программа предложит выполнить настройку параметров ICO
Их можете оставить по умолчанию. Для подтверждения экспорта нажмите соответствующую кнопку.
Вариант 2: XnView
Данная программа предназначена для просмотра графических файлов, но поддерживает и их преобразование в другие форматы, в том числе и ICO. Инструкция по работе с XnView выглядит следующим образом:
- С помощью этой программы откройте в режиме просмотра JPG-файл, который вам нужно преобразовать в ICO.
- В верхнем меню воспользуйтесь кнопкой «Файл» и выберите из контекстного меню «Сохранить как». Можно использовать комбинацию клавиш Ctrl+Shift+S.
- Появится окошко с настройками сохраняемого файла. Здесь указывайте имя файла. В «Тип файла» обязательно выберите параметр ICO. Нажмите «Сохранить».
- У вас появится окошко, предупреждающее о потери авторских прав после преобразования. Нажмите «Ок».
Вариант 3: Paint.NET
Является усовершенствованной версией обычного Paint. Распространяется на бесплатной основе, но по умолчанию не поддерживает работу с форматом ICO. Проблема решается скачиваем специального плагина. Его достаточно просто установить в саму программу.
Процесс установки плагина и взаимодействия с ним выглядит следующим образом:
- Скаченные файлы плагина скопируйте по одному из следующих адресов:
- C:\Program Files\paint.net\FileTypes, если речь идет о 64-битной Windows;
- C:\ Program Files (x86)\ paint.net\FileTypes, если вы пользуетесь 32-битной Windows.
- В верхнем меню нажмите по пункту «Файл». Из выпадающего списка выберите «Открыть» или воспользуйтесь сочетанием клавиш Ctrl+O.
- Выберите изображение, которое вы будете преобразовывать в ICO. Откройте его в интерфейсе Paint.NET.
- Снова нажмите на пункт «Файл» и выберите в контекстном меню пункт «Сохранить как». Можно воспользоваться сочетанием клавиш Ctrl+Shift+S.
- Укажите имя файла. В поле «Тип файла» поставьте значение «Icons (*.ico)». Нажмите «Сохранить».
Вариант 4: Adobe Photoshop
Данная программа является самым распространенным профессиональным графическим редактором. Однако распространяется на платной основе и, несмотря на весь свой функционал, не поддерживает работу с ICO-файлами. Данной ограничение исправляется с помощью плагина ICOFormat.
Инструкция по добавлению плагина и взаимодействию с ним выглядит следующим образом:
- Загруженный файл плагина необходимо поместить в одну из следующих директорий:
- 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).
- Иногда по указанному местоположению может отсутствовать папка File Formats. В таком случае просто создайте ее.
- Откройте изображение, которое собираетесь преобразовать через интерфейс программы.
- Измените его размер на 256×256 или меньше. Это можно сделать с помощью «Изображение» — «Размер изображения». В открывшемся окошке указываете новый размер картинки и жмете «Ок».
- В верхнем меню нажмите «Файл». Из выпавшего меню выберите пункт «Сохранить как».
- Укажите имя файла. «Тип файла» поставьте ICO и нажмите «Сохранить».
- Подтвердите выбор формата.
К сожалению, только две программы из списка рассмотренных могут похвастаться поддержкой формата ICO. В остальных случаях придется дополнительно устанавливать плагины, правда, делается это очень просто и бесплатно.
Зачем нужен фавикон
Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование
favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.
Выделяет сайт в выдаче
Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает
Сайт без фавикона в выдаче среди прочих
С фавиконом сайт запоминается лучше
Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
Логотип компании в фавиконе
Упрощает поиск нужного сайта
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.
Закладки в Google Chrome
Избавляет от ошибки в лог-файлах
Браузеры запрашивают файл
favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.
К примеру, такую:
Уменьшение изображения
Первое, что нужно сделать это уменьшить изображение которое вы хотите сделать «иконкой» до размера «256×256». Это можно сделать двумя способами, первый из них по-проще, но второй тоже не трудный.
Способ 1:
В редакторе «Gimp», в верхнем баре нажать на «Изображение», затем выбрать «Размер изображения».
В открывшемся окне установить значения высоты и ширины 256.
Получилось не красиво, но для ленивых сойдёт.
Лучше делать вторым способом, т. к. я так и делал.
Способ 2:
Создать новое изображение, в баре нажать «Файл» выбираем «Создать».
Ширину и высоту указать «256×256», остальные параметры не трогаем.
У нас получается это.
Щёлкаем правой клавишей мыши на слой «Фон» и выбираем «Добавить альфа-канал ».
Теперь открываем ваше изображение в редакторе «Gimp». !Созданное изображение не закрываем!
В верхнем баре нажимаем кнопочку «Правка» и выбираем «Копировать».
Возвращаемся к созданному, пустому изображению «256×256».
И в верхнем баре нажимаем кнопочку «Правка» и выбираем «Вставить».
У вас получится что-то похожее:
После нажатия на инструмент «Масштаб» (ничего не меняем там), щёлкаете по этой картинке которую хотите уменьшить и открывается окошко с настройкой масштаба. У меня значения «Ширина» и «Высота» будут отличаться от ваших, это зависит от размера самой картинки.
В окошке нажимаем на разорванную цепь, что бы она стала целой и устанавливаем любое из двух значений 256, это зависит опять же от картинки. Т. к. у меня картинка прямоугольная и я могу пожертвовать шириной, я установил значение «Высота» ширина тоже должна измениться, но уже автоматически.
Нажимаем «Изменить».
Область выделенная пунктиром и есть ваше изображение, но оно за «холстом», это не беда, его нужно переместить на холст.
Сделаем это инструментом «Перемещение» на панели инструментов. Нажимаем на инструмент.
Затем наводите мышь на область выделенную у вас пунктиром и зажимая левую клавишу мыши переносите слой на холст.
Постарайтесь, что бы изображение не выходило за края, если не выйдет, то можно дополнительно уменьшить слой инструментом «Масштаб». У меня вышло так:
Когда мы подогнали изображение под холст не изменив его пропорций (такая задача заключалась в этом втором способе), можно удалить слой «Фон». На панели «Слои-Кисти» щёлкните по слою «Фон» правой кнопкой мыши и выберете «Удалить слой».
Остался последний шаг уменьшения изображения. На той же панели, нажмите правой кнопкой мыши по слою с вашим изображением и из всплывающего меню выберите «Слой к размеру изображения».
Если жёлтый пунктир находится по краям холста как тут:
То я вас поздравляю, вы закончили уменьшение изображения.
Теперь приступим к самому созданию качественной иконки формата «.ico».