Иконка для сайта, или как её ещё называют favicon (фавикон), является элементом индивидуальности, она помогает сделать проект узнаваемым и запоминающимся. Несмотря на свои небольшие размеры, значок сайта имеет большое значение для брендинга.
Иконка сайта отображается в заголовке вкладки браузера, также она видна в сохранённых закладках и ещё отображается в результатах поиска в поисковой выдаче. Иногда достаточно просто взглянуть на фавикон, и можно понять, что это за сайт, даже не читая его названия.
В этой статье рассмотрим сервисы, с помощью которых можно сделать иконку для сайта онлайн. Вы научитесь создавать фавикон, не прибегая к услугам дизайнера или дорогим инструментам.
Как сделать favicon для сайта
Прежде, чем начинать создавать иконку для сайта, нужно определить, каким требованиям она должна соответствовать. Во-первых, размер. Рекомендуем 512 на 512 пикселей. Это максимальный допустимый размер. Допускается использовать изображение и меньшего размера. Во-вторых, формат. Рекомендуется применять .png, а также допускается .ico. Можно поэкспериментировать и с другими форматами и размерами, но для гарантированной правильной работы иконки, следует оставаться в этих рамках.
Создать картинку такого размера можно с помощью программ для компьютера. Однако, если у вас нет нужды часто изготавливать такие изображения, то гораздо проще вам будет сделать это с помощью онлайн инструментов. Их мы и рассмотрим ниже.
Вestwebservice – инструмент представляет собой конвертер изображений в подходящий для фавикон формат и придание ему нужного размера. Как только вы перейдете на этот сервис, вы увидите кнопку “Выберите файл”. Нажав на неё, вам нужно будет выбрать файл изображения, который нужно превратить в иконку. Затем ниже следует выбрать необходимый вам размер. Выбирать можно с 16 до 512 пикселей. И потом нажать на кнопку “Конвертировать”. Также ниже вы можете увидеть иконки, которые уже были созданы на этом сервисе.
Favicon – представляет собой более функциональный инструмент, но такой же простой. Кроме того, что можно загрузить своё изображение с компьютера для конвертации в нужный формат, можно ещё сделать загрузку по ссылке. А самое главное, можно в простом редакторе самому нарисовать иконку. Правда, редактор не продвинутый, он очень простой – представляет собой поле из 16 пикселей, которые можно закрашивать с помощью карандаша. Можно настраивать цвет закрашивания.
Canva – этот инструмент подойдёт тем, у кого есть множество идей, чтобы сделать favicon для сайта, и кто хочет проявить творческий потенциал. Здесь можно нарисовать иконку любой сложности, используя при этом продвинутые графические инструменты, а также готовые дизайнерские паттерны. Canva – это один из самых известных графических онлайн инструментов, и кроме иконки сайта здесь можно создавать и другие элементы. Поэтому если ваша практика связана с созданием изображений, данный сервис вам подойдёт. Он условно бесплатный, но для создания иконки хватит бесплатных возможностей.
Be1 – минималистичный сервис, который позволит создать значок сайта. Представляет собой он простейший конвертер изображения в нужный формат. Из управления есть только кнопка для загрузки исходной готовой картинки. Нельзя выбрать ни размер, ни формат. Подойдёт тем, кто хочет быстро и без лишних вопросов создать иконку.
Create.vista – сервис аналогичный Canva, но в нём больше бесплатных возможностей. Создать иконку можно с помощью профессиональных графических инструментов, а также есть возможность использовать готовые паттерны. Кроме работы с иконками, этот сервис умеет создавать и обрабатывать и другую графику, которую также можно использовать для сайта. Это хороший вариант для тех, кому часто приходится работать с графикой, но при этом нет желания устанавливать на компьютер громоздкие графические приложения.
Logaster – это ещё один достаточно известный инструмент в мире онлайн графических редакторов. Специализируется на логотипах и иконках и позволяет легко создать иконку сайта бесплатно за несколько минут. В нём есть минимум необходимых инструментов, которые позволяют создавать и редактировать изображение. Сервис условно-бесплатный, но, как обычно, для большинства задач хватает бесплатных возможностей.
Какой делать иконку сайта
Онлайн инструментов для создания иконки сайта достаточно много. Они отличаются по возможностям и функциональности. И все они бесплатные. Теперь давайте рассмотрим, каким нужно делать значок для сайта, что в нём должно быть:
- Как было сказано в начале, формат должен быть .png или .ico.
- Размер – до 512 пикселей.
- В большинстве случаев, во вкладке браузера и в поисковой выдаче, иконка будет очень маленькой. Поэтому не следует на ней делать какие-то мелкие элементы, их всё равно не будет видно.
- Также из-за маленького размера не нужно использовать в иконке сайта много цветов. Большую цветовую гамму никто не сможет оценить на маленьком пространстве, отведённом для значка.
- Стиль иконки нужно выдержать в общем стиле бренда, она должна быть похожа на логотип сайта и придерживаться принятых на сайте цветов.
Рекомендуем вам ознакомиться с материалом о фавикон для сайта на WordPress.
Адель, здравствуйте! Доступно и содержательно изложена информация создания фавикона. Обязательно сделаю на свой новенький сайт
Для новичка, конечно, сложно, вы рассказываете все доходчиво. Спасибо за вашу работу.
Адель,здравствуйте!Интересные идеи можно воплотить и вы так доступно нам всё объясняете. Какая прекрасная возможность обновить свой сайт. Спасибо за доступно изложенную информацию.
Отличная штучка, обязательно сделаю на свой сайт. В данной статье хорошо все описывается. Большое Вам спасибо.
И вам спасибо, Татьяна!
Для моего сайта тоже нужна иконка! Спасибо Адель, что вы даете настолько ценный материал для создания сайта! Я зарегистрирована на Canva. Мне очень нравиться в нем работать. Я думаю буду иконку делать именно там. Спасибо за обзор!
Обязательно воспользуюсь фавиконом и создам иконку на свой сайт.
Вот это классная вещь, обязательно сделаю у себя на сайте!
Благодарю Адель!
Адель, здравствуйте! Какой же вы умничка! Не у кого другого не преподносится материал так доступно! Благодаря Вам и Вашей команде у меня есть сайт. Правда никак не могу доделать, где-то допустила ошибку, не открываются тексты, которые я написала, не могу найти. Могут ли твои замечательные ребята мне помочь?
Здравствуйте! Для решения вашего вопроса, напишите в нашу службу поддержки.