Онлайн редактор ico – 5 лучших онлайн редакторов иконок (бесплатные сервисы)

Создание иконок для сайта онлайн-редактором 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.

2lo.ru

Создание фавиконок онлайн


Сейчас персональный значок сайта — Favicon — это некая визитная карточка любого веб-ресурса. Такая иконка выделяет нужный портал не только в списке вкладок браузера, но и, к примеру, в поисковой выдаче Яндекса. Никаких же других функций, помимо повышения узнаваемости сайта, Фавикон, как правило, не выполняет.

Создать значок для собственного ресурса довольно просто: вы находите подходящую картинку или рисуете ее самостоятельно, используя графический редактор, а затем сжимаете изображение до нужного размера — обычно, 16×16 пикселей. Полученный результат сохраняете в файл favicon.ico и помещаете в корневую папку сайта. Но и эту процедуру можно значительно упростить при помощи одного из Favicon-генераторов, доступных в сети.

Как создать фавикон онлайн

Веб-редакторы иконок в большинстве своем предлагают все необходимые инструменты для создания значков Favicon. При этом необязательно рисовать картинку с нуля — можно воспользоваться уже готовым изображением.

Способ 1: Favicon.by

Русскоязычный онлайн-генератор фавиконок: простой и наглядный. Позволяет нарисовать значок самостоятельно, пользуясь встроенным холстом 16×16 и минимальным перечнем инструментов, таких как карандаш, ластик, пипетка и заливка. Имеется палитра со всеми RGB-цветами и поддержкой прозрачности.

При желании вы можете загрузить в генератор готовое изображение — с компьютера или стороннего веб-ресурса. Импортированная картинка также будет помещена на холст и станет доступной для редактирования.

Онлайн-сервис Favicon.by

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

На выходе вы получаете графический ICO-файл с названием favicon и разрешением 16×16 пикселей. Этот значок уже готов для использования в качестве иконки вашего сайта.

Способ 2: X-Icon Editor

Браузерное HTML5-приложение, позволяющее создавать детализированные значки размером вплоть до 64×64 пикселей. В отличие от предыдущего сервиса, X-Icon Editor имеет больше инструментов для рисования и каждый из них может быть гибко настроен.

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

Онлайн-сервис X-Icon Editor

  1. Чтобы импортировать изображение, воспользуйтесь кнопкой «Import» в панели меню справа.
  2. Загрузите картинку с компьютера, нажав «Upload», после чего во всплывающем окне выделите нужную область изображения, выберите один или несколько размеров будущей фавиконки и щелкните
    «Ок»
    .
  3. Для перехода к скачиванию результата работы в сервисе воспользуйтесь кнопкой «Export» — последний пункт меню справа.
  4. Нажмите «Export your icon» во всплывающем окне и готовый favicon.ico будет загружен в память вашего компьютера.

Если вы хотите сохранить детали изображения, которое намерены превратить в фавиконку, X-Icon Editor отлично для этого подойдет. Именно возможность генерации значков с разрешением 64×64 пикселей и является главным преимуществом этого сервиса.

Читайте также: Создаем иконку в формате ICO онлайн

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

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

Помогла ли вам эта статья?

ДА НЕТ

lumpics.ru

Конвертер 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

Программа для создания иконок ico на русском: иконка редактировать

Онлайн редактор иконок favicon.ico

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

Но кроме этого редактора на сайте теперь имеется

онлайн конвертер, который позволяет преобразовать один или более PNG в ICO.

Если вы видите этот текст, значит что-то пошло не так. Возможно у вас отключён JavaScript.

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

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла. Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API. То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше. Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру, но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

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

Что такое favicon.ico

favicon — это небольшая картинка, являющаяся логотипом сайта. Она появляется в шапках вкладок, в адресной строке (кроме новейших версий Chrome и Firefox †), в закладках.

В одном файле favicon.ico может быть несколько изображений разного размера.

5 лучших онлайн редакторов иконок

Чаще всего используется изображение 16×16. Бо́льшие размеры используются, например, в Windows, при создании закладки прямо на рабочем столе. В этом случае размер зависит от версии операционной системы и настроек рабочего стола.

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

Как разместить favicon.ico на своём сайте

Проще всего просто положить иконку в корень сайта. Она должна стать доступна по адресу . Именно тут её будут искать браузеры.

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

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию код такого вида:

Что касается , тут есть неоднозначность. Стандартным типом является . Я бы советовал использовать его. Однако, особо древние версии IE предпочитают тип . Подозреваю, что все современные браузеры поддерживают этот тип, но кто знает. Каждые пару месяцев появляется новый современный браузер и поручиться за все современные браузеры я не могу.

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




steptosleep.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о