amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Дизайн сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

View Comments

  • Адель, здравствуйте! Доступно и содержательно изложена информация создания фавикона. Обязательно сделаю на свой новенький сайт

  • Для новичка, конечно, сложно, вы рассказываете все доходчиво. Спасибо за вашу работу.

  • Адель,здравствуйте!Интересные идеи можно воплотить и вы так доступно нам всё объясняете. Какая прекрасная возможность обновить свой сайт. Спасибо за доступно изложенную информацию.

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

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

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

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

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

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

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

8 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

8 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

8 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

8 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

8 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

9 месяцев ago