Как сделать иконку для сайта онлайн

Иконка для сайта, или как её ещё называют favicon (фавикон), является элементом индивидуальности, она помогает сделать проект узнаваемым и запоминающимся. Несмотря на свои небольшие размеры, значок сайта имеет большое значение для брендинга.

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

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

Favicon

Как сделать favicon для сайта

Прежде, чем начинать создавать иконку для сайта, нужно определить, каким требованиям она должна соответствовать. Во-первых, размер. Рекомендуем 512 на 512 пикселей. Это максимальный допустимый размер. Допускается использовать изображение и меньшего размера. Во-вторых, формат. Рекомендуется применять .png, а также допускается .ico. Можно поэкспериментировать и с другими форматами и размерами, но для гарантированной правильной работы иконки, следует оставаться в этих рамках.

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

Вestwebservice – инструмент представляет собой конвертер изображений в подходящий для фавикон формат и придание ему нужного размера. Как только вы перейдете на этот сервис, вы увидите кнопку “Выберите файл”. Нажав на неё, вам нужно будет выбрать файл изображения, который нужно превратить в иконку. Затем ниже следует выбрать необходимый вам размер. Выбирать можно с 16 до 512 пикселей. И потом нажать на кнопку “Конвертировать”. Также ниже вы можете увидеть иконки, которые уже были созданы на этом сервисе.

Вestwebservice

Favicon – представляет собой более функциональный инструмент, но такой же простой. Кроме того, что можно загрузить своё изображение с компьютера для конвертации в нужный формат, можно ещё сделать загрузку по ссылке. А самое главное, можно в простом редакторе самому нарисовать иконку. Правда, редактор не продвинутый, он очень простой – представляет собой поле из 16 пикселей, которые можно закрашивать с помощью карандаша. Можно настраивать цвет закрашивания.

Favicon  сервис

Canva – этот инструмент подойдёт тем, у кого есть множество идей, чтобы сделать favicon для сайта, и кто хочет проявить творческий потенциал. Здесь можно нарисовать иконку любой сложности, используя при этом продвинутые графические инструменты, а также готовые дизайнерские паттерны. Canva – это один из самых известных графических онлайн инструментов, и кроме иконки сайта здесь можно создавать и другие элементы. Поэтому если ваша практика связана с созданием изображений, данный сервис вам подойдёт. Он условно бесплатный, но для создания иконки хватит бесплатных возможностей.

Canva

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

Be1

Create.vista – сервис аналогичный Canva, но в нём больше бесплатных возможностей. Создать иконку можно с помощью профессиональных графических инструментов, а также есть возможность использовать готовые паттерны. Кроме работы с иконками, этот сервис умеет создавать и обрабатывать и другую графику, которую также можно использовать для сайта. Это хороший вариант для тех, кому часто приходится работать с графикой, но при этом нет желания устанавливать на компьютер громоздкие графические приложения.

Create.vista

Logaster – это ещё один достаточно известный инструмент в мире онлайн графических редакторов. Специализируется на логотипах и иконках и позволяет легко создать иконку сайта бесплатно за несколько минут. В нём есть минимум необходимых инструментов, которые позволяют создавать и редактировать изображение. Сервис условно-бесплатный, но, как обычно, для большинства задач хватает бесплатных возможностей.

Logaster

Какой делать иконку сайта

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

  • Как было сказано в начале, формат должен быть .png или .ico.
  • Размер – до 512 пикселей.
  • В большинстве случаев, во вкладке браузера и в поисковой выдаче, иконка будет очень маленькой. Поэтому не следует на ней делать какие-то мелкие элементы, их всё равно не будет видно.
  • Также из-за маленького размера не нужно использовать в иконке сайта много цветов. Большую цветовую гамму никто не сможет оценить на маленьком пространстве, отведённом для значка.
  • Стиль иконки нужно выдержать в общем стиле бренда, она должна быть похожа на логотип сайта и придерживаться принятых на сайте цветов.

Рекомендуем вам ознакомиться с материалом о фавикон для сайта на WordPress.

7 комментариев

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

    1. Адель Гадельшин

      И вам спасибо, Татьяна!

  2. Елена Грудинина

    Для моего сайта тоже нужна иконка! Спасибо Адель, что вы даете настолько ценный материал для создания сайта! Я зарегистрирована на Canva. Мне очень нравиться в нем работать. Я думаю буду иконку делать именно там. Спасибо за обзор!

  3. Обязательно воспользуюсь фавиконом и создам иконку на свой сайт.

  4. Вот это классная вещь, обязательно сделаю у себя на сайте!
    Благодарю Адель!

  5. Наталья Кравченко

    Адель, здравствуйте! Какой же вы умничка! Не у кого другого не преподносится материал так доступно! Благодаря Вам и Вашей команде у меня есть сайт. Правда никак не могу доделать, где-то допустила ошибку, не открываются тексты, которые я написала, не могу найти. Могут ли твои замечательные ребята мне помочь?

    1. Адель Гадельшин

      Здравствуйте! Для решения вашего вопроса, напишите в нашу службу поддержки.

Добавить комментарий

Ваш адрес email не будет опубликован.