Создание иконок для сайта онлайн-редактором X-Icon Editor
Приветствую друзья. В данной статье мы с Вами поговорим о том, как просто создавать различные иконки с раcширением .ico для своих сайтов. Данные иконки отображаются на вкладке браузера при открытии сайта, что придает сайту большую привлекательность. Картинку для иконки можно скачать в интернет или создать ее самому. Давайте возьмем любую картинку в формате .png или .jpeg и создадим иконку.
Картинка для создания иконки
Для примера я возьму картинку “Торт” в формате .png, хотя данный формат обычно больше по объему, чем формат .jpeg, но у .png можно сделать прозрачный фон, для того чтобы на иконке была видна только картинка без фона. Обычно прозрачный фон я делаю в программе Photoshop. Итак наша картинка будет выглядеть вот так:
Онлайн-редактор X-Icon Editor для создания иконок
Теперь для того, чтобы сделать из этой картинки иконку для сайта, заходим в онлайн редактор X-Icon Editor:
Импорт картинки в онлайн-редактор
Нажимаем на кнопку “Import” и выбираем нашу картинку.
Чтобы картинка полностью помещалась в выделенном фрагменте (п. 2), нужно чтобы стороны картинки были одинаковые и составляли квадрат. Также здесь (п. 3) Вы можете выбрать размер иконки поставив необходимые галочки. Обычно выбирают иконку со сторонами 32х32, но Вы можете выбрать любую, какая Вам понадобиться. После того, как Вы выбрали размер иконки нажимаем на кнопку ОК.
Просмотр готовой иконки в браузере
Теперь нажимаем кнопку “Preview”, что означает просмотр и смотрим как наша иконка будет выглядеть в различных браузерах.
Как мы видим в просмотре наша иконка выглядит очень хорошо. Теперь переходим к следующему шагу. Это экспорт нашей иконки на компьютер.
Экспортируем готовую иконку на компьютер
Нажимаем кнопку “Export” и в появившемся окне нажимаем на кнопку “Export your icon”.
Теперь наша иконка скачана на компьютер.
Заходим в папку, куда была скачана наша иконка, чтобы посмотреть на нее.
В папке мы видим нашу иконку с расширением .ico, что собственно и следовало сделать. Теперь данную иконку можно вставлять на свои сайт и наслаждаться сделанной работой. Как мы видим, что данный способ создания иконки для сайта очень простой. При этом качество иконки остается очень хорошим.
Буду рад Вашим вопросам и комментариям
Успехов Вам
С уважением Владимир Шишков
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Конвертер 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-редактор и онлайн генератор обоев, фонов и заливок.
Отправить
www.michurin.net
Сделать стандартный значок favicon.ico для сайта онлайн
Обработка JPEG фотографий онлайн.
Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.
Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:
Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность — transparency) используя, например, функцию в Фотошопе «Сохранить для веб…» (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.
Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами <head>…</head> так: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»> где favicon.ico — это название созданного значка.
Иногда при замене или изменении иконки favicon на своём сайте нужно очистить кэш браузера, чтобы она обновилась.
Исходное изображение никак не изменяется. Вам будет предоставлен стандартный значок в формате .ICO для сайта.
1) Укажите изображение в формате JPEG, BMP, PNG: 2) Настройки генерируемого значка favicon.icoРазмер favicon.ico для сайта: 16×16 (стандарт)32x3248x4864x64
(Стандартный размер favicon для сайта 16×16, а вот, например, favicon.ico на сайте wikipedia имеет размер 48×48 пикселей.)
3) Цветовая коррекция favicon.ico (по умолчанию всё отключено)Повысить резкость: (0-10)
Насыщенность: (от -100 до 100)
Тон цвета: (0-180, 100=не изменять)
Яркость: (от -100 до 100)
Контрастность: (от -100 до 100)
www.imgonline.com.ua
Чем редактировать ICO файл? Программы для изменения ICO
ICO
Если вам необходимо просто открыть файл ICO, то вы можете воспользоваться программами из списка по ссылке: Чем открыть файл ICO? Если же вам необходимо изменить (отредактировать) файл, мы подготовили соответствующий список специальных программ для работы с данным типом файлов.
Самый популярный ICO редактор — это Paint.NET (для ОС Windows), однако изменить файл можно также, например, в Apple Preview (для ОС Mac). Ниже мы составили список программ для операционной системы Windows, Mac, Linux, Android. Вы можете скачать редактор бесплатно, кликнув по названию программы для вашей операционной системы — каждая из них гарантированно позволит осуществить редактирование нужного файла.
Программы для редактирования ICO файлов на компьютере
Чем редактировать ICO в Windows? Mac Linux AndroidОбщее описание расширения ICO
Файл с расширением ICO (Icon File) — это формат, который относится к категории Системные файлы. Файл ICO представляет из себя формат хранения значков в операционной системе от Майкрософт. Данное расширения файла, является форматом изображения и может содержать иконки файлов, программ и папок в системе Windows. Такой формат файлов, состоит из двух побитовых изображений, одно из которых является маской изображения (AND), а второе представляется в качестве самой иконки, отображаемой на маске (XOR).Узнать подробнее что такое формат ICO
Знаете другие программы, которые могут редактировать файлы .ICO? Не смогли разобраться как отредактировать файл? Пишите в комментариях — мы дополним статью и ответим на ваши вопросы.
filesreview.com
Редакторы иконок
Редакторы иконокРедакторы графики | Вьюверы | Графические утилиты | Гор.клавиши Photoshop
Прежде всего, не следует использовать готовые иконки. Иконка — это как ваше лого или ваше лого и есть. Прекрасно понимаю, что никто ничего не делает на пустом месте, все мы смотрим друг на друга. Нельзя научится музыке не играя произведений других авторов. Мы следим за новыми направлениями. Я создавая сайты, обязательно посмотрю сайты конкурентов, чтобы знать, как этот сайт будет смотреться на фоне других. Но никогда не используйте яркие картинки, находки потому, что скорее всего много кому они понравятся и вы будете сотым человеком, который использовал эту же картинку. Что вы думаете, видя, как кто-то использует пусть красивую, но избитую картинку из базы данных? То же подумают и о вас.
Можно использовать какие-то приемы моменты второго плана, не такие яркие. Это то, что я могу использовать. Увижу что-то незаслуженно не замеченное и развиваю.
Нюансы редактирования
Когда-то вполне неплохо получится уменьшить большую копию, особенно, если это сложный логотип.В большинстве случаев сжатие произойдет с некоторым искажением и потерей качества.
Выбор программы
Можно создать простую иконку в любом редакторе, в Paint например, сохранить в формате BMP скажем, а потом перевести в формат ICO. Если же вам нужна изящная иконка с перетеканиями полутонов, то вам без хорошего редактора иконок не обойтись.Или напр. для веб-страниц используются иконки одного размера 16X16, но для системы Windows напр. иконка должна содержать несколько рисунков ряда размеров. Тут вам также нужен хороший редактор иконок.
Прозрачный фон
Когда-то удобен прозрачный фон, но для лучшего качества постарайтесь его избежать. Это проще и используя форму квадрата, вы максимально используете предоставленную вам площадь под иконку (она и так маленькое, зачем же еще урезать). Но когда-то надо и когда-то хочется.Если вы создаете иконку в обычном редакторе, то он не сохранит ее в формате ICO. Вам придется сохранить ее скорее всего в BMP и потом конвертировать в формат ICO. Но при этом прозрачный фон обычно заменяется черным цветом. И вам надо будет в редакторе иконок удалить черный цвет. Также создавая прозрачный фон, помните, если есть прозрачный, то полупрозрачного нет. Скажем, у вам красный круг, то по краям будут клеточки розовые потому, что редактор при прозрачном фоне рисует, как на белом фоне. Тогда вам нужно прогнозировать на каком фоне будет ваш рисунок и заменить розовый подходящем в вашем случае. Или отказаться от сглаженных краев и сделать все красным. В таком случае края могут выглядеть рваными.
www.ph4.ru