Онлайн-генераторы фавиконок. Онлайн иконка для сайта


79,400 бесплатных иконок для сайта (SVG, PNG)

Возможности для UI дизайнеров и разработчиков

Мы твитим, пишем и интервьюируем — все для того, чтобы понять нужные вам фичи.Да что уж там, многие фичи придуманы именно вами, сообществом Icons8!

В одном стиле

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

Генератор шрифтов Платно

Прощайте, монструозные шрифты на 500 иконок. Выберите только значки, которые нужны, и сгенерируйте свой собственный, компактный шрифтовой файлик. Инструкции

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

Выбрать цвет, и мы сгенерим иконку в цвете, PNG или SVG на выбор.

Приложения под Винду и под Мак

Работает в оффлайне. Отлично ладит с Photoshop. Скачать

Встраивание HTML

Сгенерите код, чтобы вставить иконку прямо в HTML. 5 способов вставки! Инструкции

icons8.ru

Иконка сайта (favicon.ico) - Бесплатный онлайн-конвертер

Иконка сайта (favicon.ico) — это изображение в виде знака, она отображается в браузере у любого интернет юзера. Называют её и по другому — фэвикон — пошло так, от сокращения двух слов, иконка (icon) и избранный (favorit), что в последствии и стало называться, избранная иконка. Изображение можно увидеть перед адресом сайта, отображается в вкладках и закладках и в строке адреса. Если не добавить эту иконку, то её место займёт иконка браузера, что не есть хорошо, так как это портит внешнюю красоту сайта. Также фэвикон может быть показан и поисковыми системами, перед названием и описанием сайта. С тем, где расположена иконка и что это такое разобрались, следующий этап — непосредственно создание. Есть многочисленные способы создание иконок:
  • Создание иконки с помощью нашего онлайн сервиса — это самый лёгкий способ. Просто выберите файл и укажите нужный вам размер иконки и сервис сам сформирует формат и размер.
  • Очень популярны и программы для создания иконок, они также помогают экономить время. У данных программ очень большой спектр функций, одни могут работать, даже не с одной фотографией или картинкой, а другие хвалятся плавным переходом цветов и трёхмерными вариантами изображения.
  • li>Ещё один вариант — это создание иконки самим, то есть с помощью небезызвестного фотошопа или даже просто Paint`а.
Несколько простых правил, которые помогут вам при создании иконки сайта:
  • иконка должна отображать название или суть ресурса, то есть должна давать ответ на вопрос: о чём сайт? Если сайт корпоративный или у вас есть логотип - то разместите его в качестве favicon.ico предварительно сконвертировав ваш файл в иконку с помощью нашего сервиса.
  • размер должен быть стандартный — это 16 на 16 или 32 на 32. Лучший вариант - создать иконки, содержащую несколько размеров.
  • чтобы добавить иконку, нужно скинуть её на корень сайта, на сервер. Самый простой способ добавления - это переименовать вашу иконку в файл с именем favicon.ico и веб-сервер автоматически будет отображать её на вашем сайте.
  • формат для иконок универсален это формат ico, но есть также и поддержка анимации и jpeg файлов. Следует отметить что не все браузеры поддерживают отображение анимации и jpeg, поэтому лучший вариант -это обычная иконка
Не стоит пренебрегать добавлением иконки, ведь она, является неким лицом сайта, его обложкой.

online-converting.ru

лучший генератор иконок под все устройства ~ toolz

Как сделать правильный фавикон быстро и где проверить, как выглядит сейчас иконка сайта на любом устройстве

Фавикон — это уже не просто один файл 16х16. Чтобы иконка сайта эстетично отображалась везде, надо предусмотреть с десяток форматов. Но не стоит пугаться: сделать правильный фавикон можно за 5 минут и с минимальными усилиями и даже не пользуясь графическими редакторами.

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

Инструкция по созданию правильной фавиконки для сайта

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

Статья получилась объемной, поэтому можно перескочить сразу к тому пункту, который интересен:

Шаг 1.  Проверяем, как выглядит фавикон сайта на любом устройстве

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

Если у вашего сайта еще нет фавиконки, то этот шаг пропускаем и сразу переходим к следующемуДля проверки воспользуемся сервисом Favicon checker.

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

 

Вот, например, сводка по toolz.pro:Предупреждения отображаются голубым, ошибки — красным и, что удобно, мы сразу видим как иконка отображается на любой платформе.В моем случае предупреждения связаны с тем, что папка с иконками находится не в основной директории сайта. Это издержки моей блог-платформы Publii, которая прекрасна, но в силу бета-версии имеет некоторые недостатки. Основным визуальным багом, у меня является фон под иконкой для Windows — хотя он и прописан в фиолетовом цвете, но в силу неправильной директории не читается.

Шаг 2. Подготовка правильного значка для фавиконки

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

  1. Узнаваемость в микроформате. Знак для иконок должен быть заложен как один из основных элементов брендинга, но многие думают в первую очередь о логотипе, забывая о маленьких значках для иконок. Хотя, именно этот формат будет идентифицировать продукт, сайт, приложение. 
  2. Читаемость в монохромном виде. То что хорошо для иконки приложения, может не читаться в формате фавиконки браузера. Любой значок должен иметь однотонную версию.
  3. Прозрачный фон. Не обязательно, но в этом случае мы упростим себе задачу и получим оптимальный результат всего с одним файлом.Забегая вперед: однотонный фон сможем задать в генераторе. Фон с градиентом придется загружать в генератор дополнительно. Если хотите одинаковое отображение на iOS и  Android:  в случае iOS нам нужна просто квадратная иконка — закругление будет программным. Для андроида все закругления нужно сделать в исходном файле до загрузки.
  4. Формат SVG. Лучший результат генератор выдаст при работе с векторным форматом svg. Если иконка в любом другом из векторных форматов (eps, ai, cdr, pdf  и т. д.), можно воспользоваться любым бесплатным конвертером в svg онлайн. Например, этим.

Для наглядности — памятка на примеревыбора фавиконки для toolz.pro

Шаг 3.Если фавиконки нет, а вы не дружите с графическими редакторами  

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

Совет: избегайте иконок со слишком тонкими линиями или высокой детализацией. 

Можно прогуляться по коллекциям в поиске подходящего варианта, но воспользуемся поиском. При этом, не зацикливайтесь на на строгом тематическом соответствии: это может быть и абстрактная геометрия и что-то нестандартное. Эта же иконка подойдет и в качестве знака логотипа в случае его отсутствия.

Например, нужно подобрать фавиконку на бьюти-тематику. Кстати, именно при вводе поискового запроса мы видим читабельность значков:

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

Сразу отметаем слишком детализированные варианты и иконки из тонких линий.Оптимальные варианты — в рамках.

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

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

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

Выбор цвета будет доступен после того, как выберем формат SVG

Теперь можно переходить к этапу генерации правильной фавикон.

Шаг 4.Генерация фавиконки и её добавление на сайт

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

Загружаем наш цветной вариант. Белый потребуется позже

Сервис работает и с другими форматами, например png. Но наиболее корректный результат мы получим именно из SVG-исходника.

После загрузки svg-иконки начинается самое интересное. Здесь много настроек и не все они с первого взгляда бросаются в глаза, однако за функционал сервиса и его наглядность простим ему огрехи юзабилити. Поэтому подробно остановлюсь на каждом из вариантов.

Иконка для iOS

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

Пусть вид по умолчанию вас не пугает. Сейчас мы все исправим. 

Значение по умолчанию имеет смысл выбирать если вы загружаете отдельное изображение под iOS. Это можно сделать на вкладке "Dedicated picture". Но мы же будем по максимуму использовать загруженную одноцветную версию.

Чтобы кастомизировать иконку, нам нужно переключиться в режим редактирования (1).

Теперь можно настроить цвет фона (2) и размер иконки (3). Если хотим сделать белую иконку на цветном фоне, то используем версию, которую сохранили в белом цвете:

1. Переходим на третью вкладку 2. Загрузаем дополнительный вариант и (3) выбираем его.Возвращаемся в первую вкладку и меняем цвет фона (4)

Точно такая же вкладка присутствует в разделах иконок для Windows и Android. Вторую вкладку трогать не будем — там можно установить отображение старых версиях iOS и сохранить эту иконку в готовом виде: то есть добавить веса общему файлу. 

Иконка для Android

Здесь настройки отличаются от настроек iOS: можно добавить фон, применить тень, добавить приложению имя и не вполне очевидная, но интересная функция кастомизации Chrome для сайта.

Добавила тень,  и название. По умолчанию цвет вкладок браузера — белый. Во вкладках под превью: switcher и Splash можно посмотреть на цветную версию

На дополнительных вкладках можно задать также следующие параметры:

Options1. Как будет сохраняться: как сайт или приложение. 2. При сохранении в виде приложения можно задать первую страницу (по умолчанию — главная)3. Ориентация: установленная полльзователем по умолчанию, принудительная портретная или принудительная ланшафтная.

AssetsКоличество иконок и что отображать в старых версиях андроида. 

На последней вкладке, также как и для iOS можно задать отдельную иконку.

Иконка для Windows

Здесь можно задать цвет плитки Metro, принудительно использовать силует или загрузить свою белую иконку (так же как и на iOS). Опция принудительного белого может не сработать при дальнейшем сохранении иконки в директории отличной от root. Но цветная версия не возбраняется. 

Во второй вкладке — более гибкие настройки для отображения в различных версиях Internet Explorer и Edge 

MacOS Safari

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

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

Параметры генератора
На первой вкладке базовые настройки рекомендуют не менять, но если нет возможности положить файы в root-директорию, то путь для фавиконки прописывать следует полностью, начиная с https://sitename.com/...

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

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

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

Ну а на четвертой вкладке можно принудительно задать название сайта. 

После всех этих настроек нажимаем на кнопку генерации. Теперь мы получим код и архив со всеми иконками, согласно нашим настройкам:

Кроме Html-версии есть и другие варианты, но если вы не трогаете код, то для вас — первый вариант

1. Скачиваем архив с иконками. И разархивируем содержимое в ту папку сайта, которую указали на первом этапе. 2. Копируем код и вставляем его в head сайта. В любой cms  это можно сделать не трогая код, воспользовавшись интерфейсом админки.3. Теперь проверяем корректность установленных иконок, возвращаясь к первому шагу инструкции.

Готово! 

toolz.pro

Онлайн-генераторы фавиконок | Web-Profy.com

Favicon (иконки избранных закладок) – это маленькие пиктограммы, ассоциирующиеся с вебсайтом. Они отображаются в адресной строке, во вкладках браузера и в списке закладок. Следовательно, крайне важно сделать запоминающуюся и привлекательную иконку для своего вебсайта. Главными критериями в процессе разработки таких иконок являются «простота» и «уникальными».

Давайте рассмотрим простые этапы разработки favicon’ок для новичков:

  1. Создайте иконку (16х16), которая бы ассоциировалась с вашим сайтом;
  2. Загрузите favicon.ico в корневой каталог сайта;
  3. Скопируйте и вставьте код в головную секцию кода;
  4. Перезагрузите ваш сайт.
  5. Готово!

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

Генераторы Favicon’ок

Favicon.cc – новый генератор favicon’ок с интерфейсом web2.0. Вы можете нарисовать иконку самостоятельно, либо загрузить изображение для его последующего преобразования. Инструмент также предлагает функцию предварительного просмотра в реальном времени.Рекомендуем!

256pixels – возможность удовлетворить все запросы по созданию favicon’ок на любую тематику. Отличный инструмент, на который стоит обратить внимание.

Converticon – генерируйте favicon’ки, загружая изображения с вашего ПК или посредством URL. Будьте бдительны, иногда могут появляться внезапные всплывающие окна.

Генератор и галерея Favicon – на этом сайте вы можете выбирать размер favicon’ки перед тем, как сгенерировать ее. К тому же, вы можете выбрать уже готовую иконку из галереи.

 

Алексей Повловский

web-profy.com