Как создать ico: Онлайн конвертер изображений в ICO (PNG to ICO, JPG to ICO)

Содержание

Как создать значок сайта .ico при помощи Photoshop

Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop.

Как создать значок сайта .ico при помощи Photoshop

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

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

Значок сайта – это миниатюрный логотип (16×16), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.

Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T), отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
Перейдите на вкладку ‘Файл’ > ‘Сохранить как…’ (File > Save As), откройте выпадающее меню и выберите формат .PNG (*.PNG). Нажмите на кнопку
‘Сохранить’ (Save):
Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon.png’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате . ICO. Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта .PNG в формат .ICO. Это последний шаг данного туториала.
Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом.
Перетяните ваш файл ‘favicon.png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:
Нажмите на кнопку ‘Скачать’ (Download), для того чтобы сохранить файл
‘favicon.ico’ на вашем компьютере.

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

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

Как создать значок сайта . ico при помощи Photoshop

Эта запись была размещена в Работа с Photoshop и помечена как .ico, favicon, file, Photoshop. Добавьте в закладки постоянную ссылку.

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

Как сделать качественную иконку ICO???

Gragar

Active Member

30 Янв 2021

Привет!
Скажите как создать качественную иконку в формате ICO? Какие пропорции выставлять, и сколько пикселей? Как бы не делал, то получалось либо размытыми или сплющенными. Программами не пользуюсь. Мне нравится этот онлайн конвертер-https://image.online-convert.com/ru/convert-to-ico. Во там то и какие пропорции выставлять. Сорян за нубский вопрос, просто очень давно этим не занимался. Теперь мне надо для оформления папок, чтобы не путаться, а сразу ориентироваться.
Просьба не ФЛУДИТЬ а по делу..

Спасибо!!!

Снимок.PNG
11,1 KB Просмотры: 90
_A.R.T_
mitinglas
дМитрий Зайцев
30 Янв 2021

Gragar
Gragar
Active Member
30 Янв 2021

Хм. Интересная это софтина IcoFX. Интерфейс прям как фотошоп. Но надо это время уделять, изучать.
Я где то делал, не помню, находил подходящую картинку в формате JPEG, потом в какой то софт вставлял, потом выставлял какие то пропорции, и после этих действий выбираешь в формате ICO.
Тогда не получалось качественно делать, и забил на этом деле. Еще иконки делал как то для Рипера. но было искаженно.

mitinglas
дМитрий Зайцев
30 Янв 2021

Как создать значок Favicon (.
ICO) в Photoshop
Алекс Шенкер /24 января 2023 г./ 6 комментариев / 4 минуты чтения
Что такое фавикон?
Фавикон (также называемый веб-сайтом, URL-адресом, ярлыком или значком закладки) — это небольшой значок, который отображается слева от URL-адреса страницы, которую вы просматриваете, в адресной строке браузера, а также в углу текущая вкладка браузера или окно браузера просматриваемой веб-страницы. Если у вас открыто несколько вкладок, он служит удобной визуальной очередью, которая поможет вам быстро распознать личность веб-страницы.
Как должен выглядеть фавикон?
Как правило, вам нужно создать фавикон, отражающий индивидуальность вашего веб-сайта. Это можно сделать, создав небольшую иконку вашего логотипа, или часть вашего веб-сайта или названия компании, а также используя цветовую схему вашего веб-сайта. Вы хотите, чтобы фавикон застрял в головах людей как небольшое напоминание о том, кто вы есть.
Характеристики значка Favicon (файл .
ICO)
Фавикон:
Квадратный рисунок
16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
Заканчивается расширением .ico .
Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF)), но .ico чаще всего используется во всех браузерах и, таким образом, является стандартом, который следует использовать для Веб-сайт.
Создайте файл Favicon (.ICO) в Photoshop
У вас нет Photoshop или вы хотите обновить его? Вот наши скидки для читателей:
Photoshop Elements ( 99,99 долларов США )
Бесплатная пробная версия Photoshop

Пакет Creative Cloud
Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате .png с разрешением 72 DPI (точек на дюйм).
Скрытый файл в .ICO с помощью Converter Tool
Перейдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.
Добавьте значок Favicon на свою веб-страницу
После того, как вы сохранили и готовы к работе favicon.ico, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon. ico на каталог, в который вы загрузили свой значок):

Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), потому что это может привести к потере путей при перемещении вашего веб-сайта, а также более подвержено краже ссылок. Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.
Загрузите фавиконку на свой веб-сервер
После того, как вы добавили URL-адрес файла фавиконки на свою веб-страницу, вы должны убедиться, что favicon.ico действительно находится там, где вы его указали (в приведенном выше примере, в корне вашего документа (корневая папка вашего веб-сайта — например, /public_html или /www на серверах Linux)).
См. Favicon в действии!
После этого перезапустите веб-браузер, и вы должны увидеть свою фавиконку — как слева от строки URL-адреса, так и в верхнем левом углу вкладки веб-страницы, которую вы посещаете. Вы можете увидеть наш новый блестящий значок на скриншоте рядом с значком для Google Analytics.
Photoshop по-прежнему лучший?
Программа Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но остается ли она лучшей? Наши эксперты углубляются и узнают в нашем обзоре Photoshop. Узнайте, на что способна последняя версия Photoshop, а также чем она отличается от конкурентов!
Удалось ли вам создать и отобразить свой новый значок? Дайте нам знать об этом в комментариях!
С тегами: Photoshop, веб-дизайн

icons — Как сделать/получить многоразмерный файл .ico?
спросил 12 лет, 4 месяца назад

Изменено 3 года, 8 месяцев назад
Просмотрено 158 тысяч раз
Закрыто. Этот вопрос ищет рекомендации по книгам, инструментам, программным библиотекам и т. д. Это не соответствует рекомендациям по переполнению стека. В настоящее время ответы не принимаются.
Мы не принимаем вопросы с рекомендациями по книгам, инструментам, программным библиотекам и т. д. Вы можете отредактировать вопрос, чтобы на него можно было ответить фактами и цитатами.
Закрыта 6 лет назад.
Улучшить этот вопрос
Я просто хочу иметь файл .ico, содержащий изображение значка разных размеров. Я хотел бы использовать его в кроссплатформенном настольном приложении (чтобы, например, в Windows размер 16×16 использовался для верхней панели приложения, а версия размера 32×32 использовалась, когда различные открытые приложения отображаются при использовании Alt- таб). Когда у меня есть этот файл .ico, я знаю, как использовать его в моем наборе инструментов для виджетов, чтобы получить этот эффект, но я не знаю, как его получить.

Какой процесс следует использовать для создания такого файла?
9
Это можно сделать бесплатно с помощью GIMP.
Он использует способность GIMP иметь каждый слой разного размера.
Я создал следующие слои с правильным размером.
256×256 будет сохранен как 32bpp 8bit alpha
48×48 будет сохранен как 32bpp 8bit alpha
48×48 будет сохранен как 8bpp 1bit alpha
32×32 будет сохранен как 32bpp 8bit alpha
32×32 будет сохранен как 8bpp 1bit alpha
32×32 будет сохранен как 4bpp 1bit alpha
16×16 будет сохранен как 32bpp 8bit alpha
16×16 будет сохранен как 8bpp 1bit alpha
16×16 будет сохранен как 4bpp 1bit alpha
Примечания
Возможно, вам придется проверить другие ресурсы, чтобы убедиться, что это разумный список разрешений и глубины цвета.
Убедитесь, что вы используете прозрачность по краям изображения и сглаженные края. Вы должны увидеть эффект серой шахматной доски снаружи ваших слоев, чтобы указать, что они прозрачны.0022
Значки размером 16×16 необходимо тщательно отредактировать вручную, используя карандаш шириной 1 пиксель и инструмент «Пипетка», чтобы они выглядели хорошо.
Не изменять глубину цвета/режим в GIMP. Оставьте его как RGB
Вы меняете глубину цвета при сохранении в формате .ico — GIMP открывает специальное диалоговое окно для изменения настроек цвета для каждого слоя
8
ImageMagick, бесплатный набор инструментов для обработки изображений с открытым исходным кодом, может легко сделать это:
Примечание: Начиная с ImageMagick 7 интерфейс командной строки немного изменился, вам нужно добавить magick перед любыми командами.
magick convert icon-16.png icon-32.png icon-64.png icon-128.png icon.ico
См. также http://www.imagemagick. org/Usage/thumbnails/#favicon, где есть пример:
magick convert image.png -bordercolor white -border 0 \ \( -clone 0 - изменить размер 16x16 \) \ \( -clone 0 - изменить размер 32x32 \) \ \( -clone 0 - изменить размер 48x48 \) \ \( -clone 0 - изменить размер 64x64 \) \ -delete 0 -alpha off -colors 256 favicon.ico
Теперь также короче:
magick convert image.png -define icon:auto-resize="256,128,96,64,48,32,16" favicon.ico
9
Отличная (бесплатная пробная версия) IcoFX позволяет создавать и редактировать значки , включая несколько размеров до 256×256, сжатие PNG и прозрачность. Я настоятельно рекомендую его по сравнению с большинством альтернатив.
Получите копию здесь: http://icofx.ro/. Он поддерживает Windows XP и выше.

Windows автоматически выбирает правильный значок из файла в зависимости от того, где он должен отображаться. Для получения дополнительной информации о дизайне значков и размерах/разрядности, которые вы должны указать, см. следующие ссылки:
Значки (Windows Aero)
Создание значков Windows XP
8
‘@icon sushi’ — это портативная утилита, которая может бесплатно создавать ico-файлы с несколькими значками.
Перетащите значки разных размеров, выберите их все и выберите файл -> создать несколько значков.
Скачать можно с http://www.towofu.net/soft/e-aicon.php
1
Что я делаю, так это подготавливаю PNG 512×512, альфа-канал хорош для закругленных углов или теней, затем я загружаю его на этот сайт http://convertico.com/, и бесплатно он возвращает мне 6 размеров .ico с размерами 256×256, 128×128, 64×64, 48×48, 32×32 и 16×16.
1
Редактор ресурсов Visual Studio (бесплатно как версия VS 2013 Community) может импортировать PNG (и другие форматы) и экспортировать ICO.
Я нашел приложение для Mac OSX под названием ICOBundle, которое позволяет вам легко перетаскивать выбранные ico-файлы разных размеров в ICOBundle.app, предлагает вам указать папку и имя файла и создает мульти-значок .ico файл.
http://www.google.com/search?client=safari&rls=en&q=Mac+OSX+ICOBundle&ie=UTF-8&oe=UTF-8
http://www.telegraphics.com.au/sw/info/icobundle.html
Теперь, если бы можно было вставить анимированную версию gif в один файл, это был бы полный набор значков, что, к сожалению, невозможно и требует отдельного файла и фрагмента кода.
Свежий ответ 2018:
Шаг 1 Запустите Microsoft Paint. Не Paint.Net, а обычный Paint
Шаг 2 Откройте изображение, которое вы хотите преобразовать в формат значка, щелкнув вкладку «Рисование» на панели инструментов и выбрав «Открыть».
Шаг 3 Перейдите на вкладку «Рисование», выделите параметр «Сохранить как» и выберите параметр «Изображение BMP». Как 256-цветный. Есть выпадающий список.