Иконки сайта: Бесплатные векторные значки и стикеры — PNG, SVG, EPS, PSD и CSS

Где искать иконки для сайта: 20 лучших ресурсов

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

The Noun Project

The Noun Project — это огромная библиотека иконок, в которой их более 2 миллионов штук. Все эти иконки сделаны участниками.

icomonstr

iconmonstr — это библиотека значков, предлагающая более 4000 иконок, отсортированных в 300+ различных коллекций. Эта библиотека поддерживается всего одним человеком.

Good Stuff No Nonsense 

Good Stuff No Nonsense — это библиотека значков, которые нарисованы от руки.

Orion

Значки Line, Solid, Color & Flat с точным и унифицированным стилем. Приспосабливается к любому типу проекта с различным размером, цветом и разнообразием.

IcoMoon

Доступный как веб-сайт и приложение, IcoMoon предлагает более 4000 бесплатных иконок и автономное хранилище иконок. Каждый пакет значков имеет подробное лицензирование, поэтому дизайнеры и разработчики точно знают, как их использовать. Пользователи также могут создавать свои собственные иконки шрифтов.

Pictonic

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

icons8

100 000 значков и ежедневные обновления коллекции Icons8 трудно превзойти. Пользователи могут искать значки по тегам или просматривать более 50 различных тематических коллекций, чтобы найти графику, соответствующую их потребностям.

Flaticon

2 000 000+ бесплатных векторных иконок в формате SVG, PSD, PNG, EPS или в виде ICON FONT. Тысячи бесплатных иконок в крупнейшей базе бесплатных векторных иконок!

Font Awesome

Font Awesome, наверное, самая известная библиотека значков. 

iconscout

iconscout — это коллекция миллионов иконок в каждой возможной категории. Пользователи имеют возможность создавать и делиться своими собственными значками и создавать коллекции.

IconFinder

Iconfinder в настоящее время является одной из крупнейших библиотек иконок с более чем 4 миллионами бесплатных и премиальных иконок. 

PixelLove

PixelLove с более чем 15 000 значков для платформ iOS и Android представляет собой коллекцию для дизайнеров, создающих мобильные сайты и приложения. Все значки доступны в различных размерах.

Streamline Icons

Более 10 500 иконок в трех разных размерах. 53 категории, 720 подкатегорий.

Grabhic Burger

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

Smashicons

Smashicons предлагает коллекцию с более чем 175 000 иконок в своей библиотеке. Однако, в отличие от некоторых других упомянутых библиотек значков, не все эти значки соответствуют одному и тому же стилю. 

pngtree

Всего за 3 коротких года Pngtree удалось накопить миллионы уникальных ресурсов графического дизайна. Среди них: иллюстрации, векторы, шаблоны, фоны и, самое главное, иконки.

Найдя значок, вы можете загрузить его в формате PNG или SVG с максимальным размером 512 × 512.

Iconshock

Профессиональная библиотека значков с более чем 400 наборами иконок в более чем 30 стилях. Помимо библиотеки из 2 миллионов иконок, Iconshock также специализируется на пользовательских стилях. 

Material Design Icons

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

Material Icons

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

freeicons

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

Более 500 совершенно бесплатных и свежих иконок для Ваших новых и будущих веб — сайтов

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

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

Так же рекомендую посмотреть Вам прошлые подборки с иконками:

Социальные иконки в виде марок

Скачать

Разноцветные иконки закладок

Скачать

Иконки социальных сетей нарисованных от руки

Скачать

Прямоугольные иконки социальных закладок

Скачать

36 бесплатных винтажных иконок социальных сетей

Скачать

Несколько красивых квадратных иконок с закладками

Скачать

Круглые иконки закладок для тёмных сайтов

Скачать

Маленькие и квадратные иконки социальных сетей

Скачать

Минималистические иконки в светлом стиле

Скачать

Классные красные иконки в Метро стиле

Скачать

Ещё несколько монохромных иконок белого цвета

Скачать

E-Commerce иконки

Скачать

Набор иконок для школьника

Скачать

Экологические иконки

Скачать

Классные иконки для фотографа

Скачать

Летние и пляжные иконки

Скачать

Несколько классных иконок для сайта

Скачать

Очень красивые иконки для сайта

Скачать

Несколько красивых иконок в светлом стиле

Скачать

Несколько красивых системных иконок

Скачать

Красивые иконки в светлом стиле

Скачать

Системные иконки в светлом стиле

Скачать

Системные иконки в стиле метро

Скачать

30 красивых системных иконок

Скачать

Глиф — иконки — это иконки сделанные в PSD формате, которые можно редактировать в Фотошопе без потери качества.

Светлые глиф иконки на сайт

Скачать

Тёмные глиф иконки для Вашего сайта

Скачать

Несколько красивых ретро иконок

Скачать

Маленькие пиксельные иконки

Скачать

Маленькие глиф иконки для интернет магазинов

Скачать

Множество монохромных глиф иконок

Скачать

Глиф иконки от руки на сайт

Скачать

Классные иконки в мини стиле

Скачать

Светлые иконки для тёмных сайтов

Скачать

Мини глиф иконки

Скачать

Ещё одни мини иконки на сайт

Скачать

Иконки для сайтов с тёмным дизайном

Скачать

Светлые глиф иконки

Скачать

Тёмные иконки для светлых сайтов

Скачать

50 тёмных иконок

Скачать

Чёрные глиф иконки для сайта

Скачать

Иконки Token

Скачать

350 векторных иконок

Скачать

Красивые серые иконки

Скачать

Минималистические иконки

Скачать

Чёрные мини глиф иконки

Скачать

Иконки браузеров

Скачать

120 глиф иконок

Скачать

Бесплатные иконки для сайта — ИТ Шеф

Статья, в которой рассматриваются 7 источников, с которых можно скачать бесплатные векторные значки для сайта.

Flaticon

Этот сайт содержит очень большое количество бесплатных векторных иконок. Для скачивания иконок не требуется регистрация. Также перед скачиванием можно выбрать цвет иконки. Кроме этого на сайте имеется бесплатный font-face генератор, который поддерживает следующие типы файлов: .ttf, .svg, .eot, .woff и .otf.

Перейти на flaticon.com

Iconfinder

Iconfinder содержит более 800000 значков. Среди значков имеются как бесплатные, так и платные (премиум класса). Нахождение значков на данном ресурсе осуществляется с помощью формы поиска.

Перейти на iconfinder.com

All-free-download

All Free Download — это очень популярный сайт, который бесплатно позволяет получить такой контент как фотографии, значки, обои, PSD и др. При использовании контента этого сайта, не забывайте соблюдать условия лицензионного соглашения.

Перейти на all-free-download.com

Vecteezy

Vecteezy — это еще один популярный сайт, который позволяет бесплатно скачать векторные значки и картинки. Кроме бесплатного контента, здесь также присутствуют платные (премиум) коллекции. Поиск контента на сайте можно осуществлять как с помощью поиска так и посредством просмотра категорий.

Перейти на vecteezy.com

Pixeden

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

Перейти на pixeden.com

Icons8

Этот сайт предлагает более 19000 бесплатных плоских значков с возможностью изменения у каждого из них цвета и размера. Перед скачиванием значков с Icons8 необходимо пройти процедуру регистрации.

Перейти на icons8.com

Vector Open Stock

Vector Open Stock предлагает множество графических ресурсов как бесплатных, так и платных (премиум класса). Сайт содержит интересные категории. Бесплатные элементы можно скачать без регистрации. Но необходимо обратить внимание на то, что использование бесплатного контента в коммерческих целях возможно потребует приобретение лицензии.

Перейти на vectoropenstock.com

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

Лучшие мини иконки для сайтов

Оригинальные маленькие иконки для сайтов и разного рода веб-приложений могут быть весьма полезными. Они помогают пользователям лучше ориентироваться, быстрее находить информацию и решают определенные задачи. Подобные картинки часто применяются для «выделения» элементов сайта или даже их замены: лупа вместо текста в блоке поиска, изображение домика вместо ссылки на главную или «дерево объектов» для карты сайта. В мобильных приложениях они еще более актуальны.

При этом не каждый проект позволяет использовать изображения размерами 48×48 пикселей или даже 32×32. Иногда приходится экономить любой участок пространства на странице. В таком случае вам определенно пригодятся разные мини иконки, представленные ниже. Если говорить о размерах, то в основном это 16×16 и 18×18 пикселей, хотя некоторые наборы могут незначительно отличаться.

В основном формат этих маленьких иконок PNG, плюс имеется парочка дополнительных в ICO. Уверены, сможете подобрать что-то подходящее. Заметка в основном состоит из цветных вариантов и лишь нескольких монохромных (наиболее удачных). Последние больше напоминают пиктограммы для сайта.

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

FamFamFam

Эти небольшие иконки по праву заслужили широкое признание среди веб-дизайнеров. Являются одними из самых известных и часто упоминаемых в данной нише. На сайте FamFamFam найдете 3 набора, они хорошо и понятно выглядят, при этом не занимают много места. Это: Slik, Mini и Flags, который входит в подборку с иконками флагов стран мира.

Подборки содержат практически все необходимые иконки для оформления сайта, скачать их можно бесплатно. Энтузиасты даже придумали поиск по FamFamFam, т.к. в Silk около 1000 объектов.

Это удобно если вы знаете название элемента — просто указываете текст в строке поиска. Жаль, что FamFamFam давно не обновлялись и вряд ли уже когда-то будут.

Xiao Icon

Неплохой набор аккуратных и ярких мини-картинок от молодого китайского дизайнера. Он содержит 72 PNG элемента, которые допускается размещать где угодно без каких-либо разрешений. В блоге автора имеется вторая версия Xiao Icon v2 с еще 20-тью объектами.

Там есть и другие материалы, плюс поищите что-то в профиле deviantart.

Diagona pack + Fugue Icons

Две работы от японского дизайнера Yusuke Kamiyamane. Скачивайте маленькие иконки в PNG совершенно бесплатно. Однако с лицензией royalty-free для использования нужно будет указать автора. Плюс в том, что сделать это можно на отдельной странице, например, «О проекте».

В Diagona pack найдете 400 картинок: конвертики, стрелочки, флажки, наверняка что-нибудь пригодится. Каждая — в двух размерах 10х10 и 16х16 пикселей.

Второй набор Fugue Icons немного другой тематики: календари, лампочки, портфели, — в общем прекрасное дополнение к любому деловому сайту.

Для каждого элемента имеется несколько вариантов исполнения, всего получилось 3570 обычных + 350 бонусных мини иконок. Учитывая количество, на странице добавили блок поиска по ним. В скачиваемом архиве будут PSD исходники. Отличная работа!

Social Media Mini Icons by Komodomedia

Оригинального сайта создателей уже нет в наличии, но данный набор сохранился в одном из онлайн архивов иконок. Полезен тем, кто ищет социальные кнопки, — их тут 30 штук (16×16, формат PNG). Картинки в цвете, как вы видите, подходят и для светлых, и для темных фонов. Выполнены аккуратно и  красиво.

Free Farm-Fresh Web Icons

Достаточно объемный по содержанию архив — почти 4тысячи пиктограмм в двух размерах 16×16 и 32×32. Судя по описанию, есть отдельно цветной и монохромный релизы, а также сборник ICO-файлов в дополнение к базовым PNG.

Pixelbox icon sets

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

Web development sets

Интересно, что здесь в картинках имеется словно 2 состояния: активные (цветные) и неактивные. Подобную фишку можно использовать в hover эффектах для изображений в веб-проектах. Материалы 16×16 отлично смотрятся.

Hand pointer icons

Состоит из 36 объектов-указателей. Кроме PNG формата есть PSD файл для фотошопа. Указатели имеют 6 цветовых решений и 6 типов (направлений). Возможно, кому-то из вас пригодится — на скриншоте выше показано как они смотрятся с другими элементами сайта.

BWPX.ICNS

Подборка 250 монохромных иконок размером 18×18 и разными функциями: от компьютеров, безопасности до ecommerce. В оригинале данный архив не сохранился, поэтому приходится скачивать его с Softicons.

SweetiePlus

Милые маленькие иконки в PNG формате двух размеров: 24×24 16×16. Всего получилось 120 элементов, которые можно использовать для веб-приложений, а также создание сайтов и шаблонов под них. Приятно то, что разрешается внедрять данные картинки в любые проекты, в том числе и коммерческие, например, премиум шаблоны WordPress.

HoHoHo

Еще один «древний» набор, который сохранился до наших дней. Он слегка отличается от других, т.к. во-первых, содержит наиболее крохотные материалы — всего 10х10, во-вторых, выполнены они в GIF. Картинки имеют серый окрас и могут сгодиться для технических веб-проектов.

Circular Icons

Здесь представлены на выбор 3 варианта работы. Первый из них содержит картинки 4х размеров — от минимального 16×16 до 128×128. Бесплатно вы можете скачать маленькие иконки в PNG, а SVG и Sketch стоят денег. В принципе, это удобно — тестируете обычную версию, после чего покупаете «продвинутую», если все подходит. Все они, как видите, круглые, без фона.

Web Mini + Web 2.0 Basic Mini

Обе подборки вместе с другими материалами автора находятся на одной странице. Картинки 16x16px можно скачать в PNG, GIF и ICO форматах.

Первый архив (Web Mini) разработан для сайтов, блогов, форумов и т.п. Используйте их в панелях инструментов веб-приложений.

Из названия второго варианта Web 2.0 Basic Mini вы наверняка догадались, что он предназначен для проектов в стиле Web 2.0. Мини иконки здесь представлены в трех цветовых решениях: синем, оранжевом и зеленом. Не смотря на то, что они однотонные, выглядят достаточно эффектно.

LED Icon Set

Подборка профессиональных материалов для дизайнеров и веб-разработчиков, которые можно применять в коммерческих проектах (с упоминанием авторов). Здесь более 500 PNG картинок на любой вкус: функции, смайлы, объекты, компьютерная техника и т.п.

Splashy Icons

Приз за самую яркую идею сайта-источника уходит создателям Splashy Icons. Они просто добавили все материалы в качестве фонового изображения. В центре страницы находится ссылка для загрузки, где указано их общее число  — 483штуки. Все это бесплатно.

Web-design Iconset by SemLabs

Еще одна реализация цветных маленькие иконок для сайта, исходная страница которой, к сожалению, не сохранилась. Поэтому приходится искать и скачивать объекты по отдельности с Softicons. Тематика, в принципе, стандартная — «Web интерфейс», размеры 16×16, коммерческое применение разрешено.

Essen

Материалы из данного набора имеют несколько похожих вариаций, но в других цветах: Berlin — серый, Munich — оранжевый, Dortmund — темно-серый с некоторыми измерениями в изображениях. Рассматриваемый нами архив содержит цветную версию. Сайт создателя, увы не сохранился, а Google поиск выдал ссылку на проект Iconfinder. Там доступна загрузка всех 100 файлов, но по отдельности. Нужно только выбрать 16×16 или 32×32.

MiniPixel Icons ByStudioM6

Подборка из 112 достаточно оригинальных по исполнению PNG картинок. Размер их 15×15. Как и в Web development sets, часть материалов цветные, другая — серые (словно неактивные).

ASP.NET Icons v1.0

Еще один необычный по исполнению набор, содержащий иконки программ под ASP.NET. Их, в принципе, можно удачно применять и в любой другой похожей нише. Много системных и компьютерных GIF изображений — всего 300.

Vento

Отличные небольшие иконки по разным тематикам, причем не только связанным с техникой. Всего 80 PNG файлов, подходят для использования в коммерческих задачах. Смотрятся весьма стильно и детализировано, не верится, что их размер всего 16px.

UI Icon Set

Последние 3 набора созданы одним и тем же автором — Matt Gentile. Вероятно, в сети есть еще несколько его работ. Данная подборка состоит из 110 объектов в 3х вариантах: 16px, 32px, 48px. Кроме того, в архиве найдете PSD исходники.

Premium Pixels Icon Set

Пусть вас не смущает слово Premium в названии — это сайт, для которого Matt создавал эксклюзивную коллекцию. Всего получилось 58 элементов. Как и в предыдущем случае они содержат PSD, PNG и даже CSH файл форм.

Micro Icon Set

В принципе, стилистика всех работ данного автора похожа. Не смотря на использование всего одного цвета, эти небольшие объекты выглядят вполне выразительно. Здесь все то же самое: 3 формата файлов, размер 16px, 110 миниатюрных изображений.

Итого. В англоязычных статьях-подборках из сети было еще с десяток разных работ, но выглядели они, если честно, хуже по качеству. Уверены, более 25-ти наборов мини иконок вам хватит, особенно учитывая то, что в некоторых из них по пару сотен и даже тысяч элементов. Просматривая все иллюстрации выше, скорее, наоборот можно растеряться в таком разнообразии. Вот еще парочка премиальных работ:

Isometric Flat Icons

600 Thin Line Mini-icons

Vector Black Pictograms for Web

Interface / Business / Tools Mini Icons

Shopping and Commerce Set

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

Если знаете еще какие-то интересны варианты, присылайте в комментариях.

9 сайтов, о которых вы должны знать

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

Прежде чем писать дизайнеру иконок

Для того, чтобы разговор с дизайнером о цене и сроках изготовления иконки был легким и продуктивным, сделайте пять действий:

• Шаг #1: Потратьте время на изучение уже существующих коллекций иконок. Ваша задача смотреть, смотреть и еще раз смотреть.
• Шаг #2: Отберите те, которые вам понравились. Скопируйте картинку в Word и опишите что именно понравилось (форма, цветовое решение, идея, стиль), почему иконка пришлась по душе.
• Шаг #3: Отберите иконки, которые современны, но не понравились. Также сохраните иконку и опишите, что в иконке не то.
• Шаг #4: Опишите что делает ваша программа и сформулируйте требования уже к вашей собственной иконке. Если есть какие конкретные пожелания к метафоре — их тоже запишите.
• Шаг #5: С получившимся документом идем к дизайнеру. Теперь получить оценку будет легко и просто.

Где найти примеры современных качественных иконок

Чтобы вы не блуждали по интернету, разыскивая примеры удачных иконок, мы собрали для вас 9 сайтов-галерей иконок. Смотрите и выбирайте.

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

На этом сайте можно посмотреть на варианты иконок отдельно для MAC, а отдельно для iOS. Суммарно более 200 вариантов иконок всех стилей и тематик. Сайт постоянно обновляется и пополняется новыми образцами.

На девяти страницах собрано более 100 иконок для iOS. Недостаток ресурса – нет рубрикатора, так что вам придется пролистать все 9 страниц. Плюс ресурса есть как известные иконки, так и менее популярные образцы.

Галерея этого ресурса насчитывает более 50 иконок для iOS. Как и в предыдущем варианте, нет рубрикатора, чтобы облегчить вашу жизнь.

Нестандартный подход – использовать pinterest для поиска иконок. Но, если вы зададите в графе поиск «IOS» и «Icon» результат вас удивит. Аналогично работает для Android Icon. А вот с Windows Icon не получится :(. Но в нашем портфолио уже сотни примеров, будет из чего выбрать.

Все, что было сказано строкой выше о pinterest можно смело применить к flickr. Ключ к успеху поисковый запрос «iOS App Icons».

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

Этот ресурс автоматически собирает иконки, а, следовательно, у вас всегда будет пища для размышлений. На сайте есть рубрикатор, иконки разделены на 17 категорий.

Последний пример – это пример коллекции иконок, собранный дизайнером. В сети гуляет довольно много подобных вариантов, вы можете попробовать найти подобные. Просто погуглите по слову «App Icon Inspiration» или подобному. Возможно, с таким форматом подачи материала вам будет удобно работать.

Источник: icondesignlab

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

Favicon традиционно ассоциировался с сайтом, но так как он добавляется через разметку, то на каждой странице можно поставить свой favicon, если хотите. Можно даже поставить отдельный favicon для всех запросов страницы.

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

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

<link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»> <link rel=»icon» type=»image/x-icon» href=»/favicon.ico»> <link rel=»icon» href=»/favicon.ico» />

<link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»> <link rel=»icon» type=»image/x-icon» href=»/favicon.ico»> <link rel=»icon» href=»/favicon.ico» />

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

<link rel=»icon» type=»image/gif» href=»/image.gif»> <link rel=»icon» type=»image/png» href=»/image.png»>

<link rel=»icon» type=»image/gif» href=»/image.gif»> <link rel=»icon» type=»image/png» href=»/image.png»>

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{     «name»: «mobiForge»,     «short_name»: «mobiForge»,     «icons»: [         {             «src»: «/icon-144×144.png»,             «sizes»: «144×144»,             «type»: «image/png»         },         {             «src»: «/icon-192×192.png»,             «sizes»: «192×192»,             «type»: «image/png»         }         ],     «theme_color»: «#ffffff»,     «background_color»: «#ffffff»,     «display»: «standalone» }

Используйте код ниже для ссылки на манифест, который в нашем случае сохранен в корне:

<link rel=»manifest» href=»/manifest.json»>

<link rel=»manifest» href=»/manifest.json»>

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig>     <msapplication>         <tile>             <square150x150logo src=»/mstile-150×150.png»/>             <square310x310logo src=»/mstile-310×310.png»/>             <TileColor>#da532c</TileColor>         </tile>     </msapplication> </browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

<link rel=»icon» type=»image/png» href=»/icon-16.png»> <link rel=»icon» type=»image/png» href=»/icon-32.png»>

<link rel=»icon» type=»image/png» href=»/icon-16.png»> <link rel=»icon» type=»image/png» href=»/icon-32.png»>

Рекомендации Chrome

На сайте Google developers рекомендуют использовать для Chrome максимальный размер 192×192px.

<link rel=»icon» type=»image/png» href=»icon-192.png»>

<link rel=»icon» type=»image/png» href=»icon-192.png»>

Изображение будет автоматически уменьшено до необходимого размера.

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

Мы получаем следующие размеры:

48×48

96×96

144×144

192×192

Другой источник Google developer для заставок Add to homescreen рекомендует разрешение еще больше. Поэтому можно добавить 256, 384 и 512:

256×256

384×384

512×512

Разметка со всеми этими favicon будет выглядеть так:

<link rel=»icon» type=»image/png» href=»icon-48.png»> <link rel=»icon» type=»image/png» href=»icon-96.png»> <link rel=»icon» type=»image/png» href=»icon-144.png»> <link rel=»icon» type=»image/png» href=»icon-192.png»> <link rel=»icon» type=»image/png» href=»icon-256.png»> <link rel=»icon» type=»image/png» href=»icon-384.png»> <link rel=»icon» type=»image/png» href=»icon-512.png»>

<link rel=»icon» type=»image/png» href=»icon-48.png»> <link rel=»icon» type=»image/png» href=»icon-96.png»> <link rel=»icon» type=»image/png» href=»icon-144.png»> <link rel=»icon» type=»image/png» href=»icon-192.png»> <link rel=»icon» type=»image/png» href=»icon-256.png»> <link rel=»icon» type=»image/png» href=»icon-384.png»> <link rel=»icon» type=»image/png» href=»icon-512.png»>

Рекомендации Safari

Apple рекомендует следующие размеры иконок:

120×120: iPhone

152×152: iPad

167×167: iPad Retina

180×180: iPhone Retina

Их можно подключить через тег link. Получается:

<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>

Оптимальные размеры для старых устройств на iOS:

57×57

60×60

72×72

76×76

114×114

<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>

Их также моно разместить в корневой папке с именами типа apple-touch-icon-180×180.png и apple-touch-icon.png, и Safari iOS автоматически найдет правильную иконку.

Тем не менее, другие платформы тоже могут использовать иконки iOS, поэтому лучше задать их явно через теги link.

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″>

<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″>

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

<meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>

<meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

Запутаем вас немного: чтобы покрыть большой диапазон устройств, Microsoft рекомендует использовать изображения в 1.8 раза больше размера стандартной плитки, чтобы их можно было увеличить или уменьшить при необходимости.

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig>   <msapplication>     <tile>       <square70x70logo   src=»/ms-tile-126.png»/>       <square150x150logo src=»/ms-tile-270.png»/>       <wide310x150logo   src=»/ms-tile-558×270.png»/>       <square310x310logo src=»/ms-tile-558.png»/>       <TileColor>#009900</TileColor>     </tile>   </msapplication> </browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

<meta name=»msapplication-config» content=»/path/to/config-file.xml» />

<meta name=»msapplication-config» content=»/path/to/config-file.xml» />

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

<link rel=»icon» href=»icon-48.png»> <link rel=»icon» href=»icon-96.png»> <link rel=»icon» href=»icon-144.png»> <link rel=»icon» href=»icon-192.png»> <link rel=»icon» href=»icon-256.png»> <link rel=»icon» href=»icon-384.png»> <link rel=»icon» href=»icon-512.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″> <meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> <link rel=»manifest» href=»/manifest.json»>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<link rel=»icon» href=»icon-48.png»> <link rel=»icon» href=»icon-96.png»> <link rel=»icon» href=»icon-144.png»> <link rel=»icon» href=»icon-192.png»> <link rel=»icon» href=»icon-256.png»> <link rel=»icon» href=»icon-384.png»> <link rel=»icon» href=»icon-512.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″> <meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> <link rel=»manifest» href=»/manifest.json»>

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

Другое различие заключается в кадрировании. iOS добавляет скругленные углы иконкам, Android этого не делает. Windows помещает изображения иконок на плитки и в зависимости от размера плитки и внутреннего отступа иконки последняя может быть либо слишком маленькой, либо слишком большой.

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{     «name»: «»,     «short_name»: «»,     «icons»: [         {             «src»: «/icon-192.png»,             «sizes»: «192×192»,             «type»: «image/png»         }     ],     «theme_color»: «#ffffff»,     «background_color»: «#ffffff»,     «display»: «standalone» }

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig>   <msapplication>     <tile>       <square150x150logo src=»/mstile-150×150.png»/>       <TileColor>#da532c</TileColor>     </tile>   </msapplication> </browserconfig>

4. Следующая разметка

<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»> <link rel=»icon» type=»image/png» href=»/icon-32×32.png»> <link rel=»icon» type=»image/png» href=»/icon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″> <meta name=»theme-color» content=»#ffffff»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»> <link rel=»icon» type=»image/png» href=»/icon-32×32.png»> <link rel=»icon» type=»image/png» href=»/icon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″> <meta name=»theme-color» content=»#ffffff»>

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

<link rel=»icon» href=»icon-192.png»>

<link rel=»icon» href=»icon-192.png»>

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

<link rel=»icon» href=»icon.svg» type=»image/svg+xml»>

<link rel=»icon» href=»icon.svg» type=»image/svg+xml»>

Автор: Ruadhán O’Donoghue

Источник: //mobiforge.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Иконка сайта

Иконка сайта помогает найти его в результатах поиска и вкладках браузера. Ясная, подходящая к теме сайта иконка добавляет ещё один «плюс в карму» сайта. Её отсутствие или «дефолтная» иконка хостинга — демонстрирует небрежность в работе с сайтом.

Какой должна быть иконка?

Иконка имеет специальное расширение — ico. Это расширение используется и для иконок компьютерных программ. Иконки программ могут быть многостраничными — для разных размеров иконки. Для иконки сайта этого не нужно — её размер всегда 16×16 пикселей.

Уместить в квадрат из 256 пикселей (16×16) полноценное изображение не получится. Тени, переходы цветов должны быть минимизированы. Но и просто цветной квадратик не подойдёт — он не поможет найти сайт по иконке. Подумайте, как простой графический символ, буква, цифра, знак может достойно отразить содержание вашего сайта? Обычно в иконке используются цвета, использованные в оформлении сайта.

Анимированные иконки — дурной тон.

Где лежит иконка на сайте?

Иконку нужно закачать не только в папку шаблона сайта и панели управления, но и в корень сайта. Она всегда должна называться favicon.ico. По адресу: http://вашСайт/favicon.ico её ищут сторонние сервисы. Яндекс, кстати, собирает иконки сайтов c одной страницы своей выдачи и склеивает их все в одну картинку: для быстроты загрузки страниц поиска.

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

Как создать иконку сайта?

Я пользуюсь сервисом favicon.ru. Раньше он умел только преобразовывать изображения в формат ICO. Теперь можно нарисовать иконку непосредственно на сайте. Возможность закачать свою — осталась. Появилась возможность отредактировать закаченное изображение перед преобразованием, например, удалив фоновый цвет, чтобы сделать прозрачную иконку. Очень удобно, пользуйтесь на здоровье!

Сувениры

Изображения в формате ico — это ещё и разные «состояния» указателя мыши. У Артемия Лебедева можно купить себе, например, такой магнит.

иконок сайта — загрузка в векторном формате, PNG, SVG, GIF

иконок сайта — загрузка в векторном формате, PNG, SVG, GIF

iOS

iOS с заливкой

iOS Glyph

Материал с заливкой

Материал с контуром

Материал со скругленными углами

Материал Sharp

Материал Двухцветный

Цвет

Windows 10

Glyph2000

Glyph Neue

Office S

Office

Office L

Симпатичный контур

Симпатичный цвет

Синий UI

Пунктирный

Градиент

Простой маленький

Пастель

Flucy3000

Ice Cream

Ice Cream

System Обычный

Заполнение системы беглости

Пухлый

Каракули

Инфографика

Windows Metro

Облако

Пузырьки

Цветные рисованные

Рисованные рисунки

Симпатичные пастельные символы

Перекрасить

Ресторан на сайте

Ресторан на сайте

Ресторан на сайте

Ресторан на сайте

Ресторан на сайте

Гарантия качества сайта

Гарантия качества сайта

Гарантия качества сайта

Гарантия качества сайта

Гарантия качества сайта

Гарантия качества сайта

Гарантия качества сайта

Sitecore

Sitecore

Sitecore

Сайты Google

Sitecore

Сайты Google

Карта сайта

Карта сайта

Карта сайта

Карта сайта

Карта сайта

Сайты Google

Сайты Google

Сайты Google

Сайты Google

Вкладка

Вкладка

Вкладка

Вкладка

Окно приложения

Вкладка

Вкладка

Глобус Сеть

Восстановить страницу

Восстановить страницу

Вкладка не выбрана

Страница в Интернете

Окно приложения

Форма ввода текста

Глобус Сеть

Восстановить страницу

Восстановить страницу

Страница в Интернете

Форма ввода текста

Страница в Интернете

Глобус Сеть

Восстановить страницу

Форма ввода текста

ПРОСИТЬ.FM

Вкладка не выбрана

Копировать ссылку

Сохранить поиск

WebFlow

Страница в Интернете

Форма ввода текста

Houzz New

Набранный

Восстановить страницу

иконок социальных сетей

* Примечание. Хотя приведенная ниже информация по-прежнему актуальна, теперь у нас есть новый, более простой способ добавления значков на ваш сайт.Щелкните здесь, чтобы узнать больше о нашем новом графическом меню.

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

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

Addme

[addme] [circleaddme] [roundaddme]

Альтернатива App Store

[appstorealt] [circleappstorealt] [Roundappstorealt]

Магазин приложений

[appstore] [circleappstore] [roundedappstore]

Яблоко

[яблоко] [круглое яблоко] [круглое яблоко]

Blip

[метка] [круглая метка] [круглая метка]

Blogger

[блоггер] [круговой блоггер] [округлый блоггер]

Закладка

[закладка] [круглая закладка] [закладка с закругленными углами]

Кино

[кино] [circlecinema] [roundcinema]

Знак доллара

[доллар] [доллар в кружке] [доллар в округе]

Стрелка вниз

[стрелка вниз] [стрелка в кружке] [стрелка в круге]

Электронная почта

[электронная почта] [круглая электронная почта] [roundemail]

Etsy

[эцы] [кружки] [роундедцы]

Facebook

[facebook] [circlefacebook] [roundedfacebook]

Питатель

[Feedburner] [Circlefeedburner] [Roundfeedburner]

Пленка

[пленка] [круглая пленка] [круглая пленка]

Flickr

[flickr] [circleflickr] [roundflickr]

Foursquare

[четыре квадрата] [квадрат четвертого круга] [квадрат четырехугольника]

Googleplay

[googleplay] [circlegoogleplay] [roundedgoogleplay]

Googleplus

[googleplus] [circlegoogleplus] [roundedgoogleplus]

Googletalk

[googletalk] [circlegoogletalk] [Roundgoogletalk]

Значок Gowalla

[говаллапин] [кругговаллапин] [округлыйговаллапин]

Сердце

[сердце] [круглое сердце] [круглое сердце]

iMessage

[imessage] [круговое сообщение] [округленное сообщение]

Instagram

[instagram] [circleinstagram] [roundinstagram]

iTunes

[itunes] [circleitunes] [roundeditunes]

Lastfm

[lastfm] [circlelastfm] [Roundlastfm]

Стрелка влево

[стрелка влево] [стрелка влево] [стрелка влево с закругленными углами]

Linkedin

[linkedin] [circlelinkedin] [roundlinkedin]

Карта

[карта] [круговая карта] [округленная карта]

Значок карты

[отображение] [круговое отображение] [округленное отображение]

Встреча

[встреча] [circlemeetup] [roundmeetup]

MySpace

[myspace] [circlemyspace] [roundmyspace]

PayPal

[PayPal] [circlepaypal] [Roundpaypal]

Photobucket

[photobucket] [circlephotobucket] [roundphotobucket]

Picasa

[пикаса] [пикаса с округлением] [пикаса с округлением]

Pinterest

[интересный] [круговой интерес] [круглый интерес]

Подкаст

[подкаст] [круговой подкаст] [округленный подкаст]

Запись

[запись] [круговая запись] [округленная запись]

Стрелка вправо

[стрелка вправо] [стрелка в кружке] [стрелка вправо в круге]

RSS

[rss] [кружки] [округлые]

Поделиться

[sharethis] [circleharethis] [roundsharethis]

Skype

[скайп] [кругскайп] [округлый скайп]

Slideshare

[slideshare] [circlelideshare] [Roundslideshare]

Soundcloud

[soundcloud] [circleoundcloud] [roundsoundcloud]

Spotify

[spotify] [circlepotify] [roundspotify]

Звезда

[звезда] [круглая звезда] [круглая звезда]

Стол пр.

[tableproject] [circletableproject] [roundtableproject]

Город

[город] [круггород] [округленный город]

Tumblr

[tumblr] [circletumblr] [roundedtumblr]

Twitter Bird

[twitterbird] [circletwitterbird] [roundedtwitterbird]

Твиттер

[твиттер] [круговой твиттер] [округлый твиттер]

Стрелка вверх

[вверх] [круглая стрелка] [круглая стрелка]

Воспроизведение видео

[видеопроигрыватель] [круговой видеоплеер] [закругленный видеоплеер]

Vimeo

[vimeo] [circlevimeo] [Roundvimeo]

WordPress

[wordpress] [circlewordpress] [roundedwordpress]

Yelp

[yelp] [circleyelp] [roundyelp]

YouTube

[youtube] [circleyoutube] [roundyoutube]

иконок — инструментарий | UAB

Что такое наборы значков?

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

С какими наборами значков я должен работать как пользователь распределенного кампуса?

Font Awesome Pro

Font Awesome Pro — это наш новый платный набор иконок, в котором есть огромный банк иконок для работы.

Этот новый инструмент имеет ряд преимуществ, в том числе:

• Многие значки с разной толщиной линий
• Специализированные подмножества по таким темам, как осведомленность о Covid-19
• Общий репозиторий для пользователей распределенного кампуса для поддержания согласованного брендинга наших веб-иконок

IcoMoon

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

Как я могу использовать любой набор значков на моем веб-сайте UAB в качестве пользователя распределенного кампуса?

Чтобы использовать любые значки в вашем контенте из любого из наших доступных наборов значков, вам необходимо присоединить класс CSS к элементу.

Например, вы можете создать кнопку «Связаться с нами» со значком Font Awesome Pro, используя код, показанный ниже:

Свяжитесь с нами

     Свяжитесь с нами   

Вы также можете создать кнопку «Связаться с нами» со значком IcoMoon, используя код, показанный ниже:

Свяжитесь с нами

     Свяжитесь с нами   

* Замените любую ссылку на «#» URL-адресом, на который вы хотите, чтобы ваша кнопка была связана.

Где мне найти список имен классов для двух вариантов набора значков?

Font Awesome Pro имена классов

Имена классов Font Awesome Pro перечислены на их веб-странице Cheatsheet Pro, ссылка на которую имеется здесь.

Имена классов IcoMoon

• Щелкните здесь, чтобы просмотреть названия классов IcoMoon

  .icon-joomla

  .icon-chevron-up

  .значок вверх-вверх

  . Значок-стрелка вверх

  . Значок-шеврон-правый

  . Icon-rightarrow

  . Значок-стрелка-вправо

  . Icon-chevron-down

  . Icon-downarrow

  . Значок-стрелка вниз

  . Icon-chevron-left

  .icon-leftarrow

  . Значок-стрелка-влево

  .icon-arrow-first

  . Icon-arrow-last

  .icon-arrow-up-2

  . Icon-arrow-right-2

  .значок-стрелка-вниз-2

  .icon-arrow-left-2

  .icon-arrow-up-3

  . Icon-arrow-right-3

  .icon-arrow-down-3

  .icon-arrow-left-3

  .icon-menu-2

  .icon-arrow-up-4

  . Icon-arrow-right-4

  .icon-arrow-down-4

  .icon-arrow-left-4

  .icon-share

  .icon-redo

  .icon-undo

  .icon-forward-2

  .значок-назад-2

  .icon-reply

  . Icon-unblock

  . Icon-refresh

  .icon-redo-2

  .icon-undo-2

  .icon-move

  .icon-expand

  .icon-contract

  .icon-expand-2

  .icon-contract-2

  .icon-play

  . Значок-пауза

  .icon-stop

  .icon-предыдущий

  . Значок назад

  .icon-next

  .значок вперед

  .icon-first

  .icon-last

  . Icon-play-circle

  . Значок-пауза-кружок

  . Значок-стоп-круг

  . Icon-backward-circle

  . Icon-forward-circle

  . Значок-петля

  .icon-shuffle

  . Значок-поиск

  . Значок увеличения

  . Значок-уменьшение

  .icon-apply

  .icon-edit

  . Значок-карандаш

  .значок-карандаш-2

  . Иконка-кисть

  .icon-save-новый

  .icon-plus-2

  . Значок-запрет-круг

  . Значок-знак минус

  . Значок-минус-2

  . Icon-delete

  .icon-remove

  .icon-cancel-2

  .icon-publish

  .icon-save

  .icon-ok

  . Значок-галочка

  .icon-новый

  .icon-plus

  . Значок с кружком

  .значок-минус

  . Icon-not-ok

  . Значок-минус-кружок

  .icon-unpublish

  .icon-cancel

  . Icon-cancel-circle

  .icon-checkmark-2

  . Значок-галочка-кружок

  .icon-info

  .icon-info-2

  . Icon-info-circle

  . Значок-вопрос

  . Значок-вопрос-знак

  .icon-help

  .icon-question-2

  . Значок-вопрос-кружок

  .значок-уведомление

  .icon-notification-2

  . Значок-кружок-уведомление

  . Значок в ожидании

  . Значок-предупреждение

  .icon-warning-2

  . Значок-предупреждение-круг

  . Icon-checkbox-unchecked

  . Icon-checkin

  . Значок-флажок

  . Icon-checkbox-checked

  .icon-checkbox-partial

  . Значок квадрат

  . Icon-radio-unchecked

  .icon-radio-checked

  . Значок в круге

  .icon-signup

  . Значок-сетка

  . Icon-grid-view

  .icon-grid-2

  .icon-grid-view-2

  . Icon-меню

  . Icon-list

  . Icon-list-view

  .icon-list-2

  .icon-menu-3

  . Значок-папка-открыть

  . Иконка-папка

  . Значок-папка-закрыть

  .icon-folder-2

  .значок-папка-плюс

  . Значок-папка-минус

  .icon-folder-3

  . Значок-папка-плюс-2

  . Значок-папка-удалить

  .icon-файл

  .icon-file-2

  .icon-file-add

  .icon-file-plus

  .icon-file-remove

  .icon-file-minus

  .icon-file-check

  .icon-file-remove

  .icon-save-copy

  . Значок-копия

  .icon-stack

  .икона-дерево

  .icon-tree-2

  .icon-paragraph-left

  .icon-paragraph-center

  .icon-paragraph-right

  .icon-paragraph-justify

  . Значок-экран

  . Значок-планшет

  .icon-mobile

  .icon-box-add

  .icon-box-remove

  .icon-скачать

  .icon-upload

  .icon-home

  .icon-home-2

  .icon-out-2

  .значок-новая-вкладка

  .icon-out-3

  .icon-new-tab-2

  .icon-link

  . Значок-картинка

  .icon-image

  . Значки-картинки

  .icon-images

  .icon-palette

  .icon-color-palette

  . Значок-камера

  .icon-camera-2

  .icon-video

  .icon-play-2

  .icon-video-2

  .icon-youtube

  . Значок-музыка

  .icon-user

  .icon-users

  .icon-vcard

  . Значок-адрес

  .icon-share-alt

  .icon-out

  . Значок-ввод

  . Icon-exit

  . Значок-комментарий

  . Значок-комментарии

  .icon-comments-2

  . Icon-quote

  . Значок-кавычки-слева

  .icon-quote-2

  . Значок-кавычки-справа

  .icon-quote-3

  .icon-bubble-quote

  .icon-phone

  .icon-phone-2

  . Значок-конверт

  . Icon-mail

  . Значок-конверт-открыт

  .icon-mail-2

  .icon-unarchive

  . Ящик с иконками

  . Icon-архив

  .icon-drawer-2

  .icon-портфель

  .icon-tag

  .icon-tag-2

  .icon-tags

  .icon-tags-2

  .icon-options

  . Icon-cog

  .икона-шестеренки

  . Значок-отвертка

  .icon-tools

  . Значок гаечный ключ

  . Значок-эквалайзер

  . Значок-приборная панель

  . Значок-переключатель

  . Значок-фильтр

  . Значок-продувка

  . Значок-мусор

  .icon-checkout

  . Значок-замок

  . Значок с замком

  . Icon-unlock

  . Значок-ключ

  .icon-поддержка

  .icon-база данных

  .икона-ножницы

  .icon-health

  . Значок-палочка

  . Значок с открытыми глазами

  . Значок глаза

  . Значок закрыть глаза

  . Значок с глазком

  .icon-eye-2

  . Значок-часы

  . Значок-компас

  . Значок-трансляция

  . Значок-соединение

  . Значок Wi-Fi

  . Icon-book

  . Значок-молния

  .icon-flash

  .icon-print

  .значок-принтер

  . Icon-feed

  . Значок-календарь

  .icon-calendar-2

  .icon-calendar-3

  . Значок-пирог

  . Значки

  . Иконка

  . Значок-шнур питания

  . Значок-куб

  . Значок-головоломка

  . Значок-вложение

  . Значок-скрепка

  .icon-flag-2

  . Значок-лампа

  . Значок-контакт

  . Значок-кнопка

  .icon-location

  . Значок-щит

  . Значок-флаг

  .icon-flag-3

  . Значок-закладка

  .icon-bookmark-2

  . Значок-сердце

  .icon-heart-2

  . Значок большого пальца вверх

  . Значок-палец вниз

  . Значок без признаков

  . Значок звездочки

  . Icon-star-empty

  .icon-star-2

  . Значок с изображением

  .icon-default

  .икона-звезда

  . Значок-смайлик

  . Значок-смайлик-счастливый

  . Значок-смайлик-2

  . Значок-смайлик-счастливый-2

  . Значок-смайлик-грустный

  .icon-smiley-sad-2

  . Значок-смайлик-нейтральный

  .icon-смайлик-нейтральный-2

  .icon-cart

  . Значок-корзина

  .icon-кредит

  .icon-credit-2

20 лучших мест для поиска бесплатных и премиум файлов значков (2021

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

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

Несмотря на их небольшой размер и кажущуюся простоту, создать иконку — непростая задача. Создание графики, которая хорошо смотрится при небольшом размере, может быть довольно сложной задачей. Разработчик значков также должен решить, какие изображения подходят для представления различных концепций, и, поскольку большинство значков доступны в наборах, выбрать набор объектов или символов, которые дополняют друг друга.

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

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

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

Если у вас ограниченный бюджет на ресурсы для дизайна, но вы не хотите ограничиваться только бесплатным выбором значков, Envato Elements — отличный вариант.

Envato Elements — это огромная библиотека ресурсов дизайна, включая значки, графику, шрифты, шаблоны, а также стоковые фотографии и видео.

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

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

Количество доступных файлов значков: 17000+

Доступные форматы: AI, PNG, EPS, PSD, SVG, JPG и другие типы файлов. Перед загрузкой проверьте информацию о файле.

Лицензия: Коммерческая лицензия Envato Elements. Вы можете использовать значки в коммерческих или личных проектах, но не для мерчендайзинга, перепродажи или распространения.

Цена: 16,50 долл. США в месяц за неограниченное количество загрузок (годовая подписка). Также доступны ежемесячные планы.

Iconfinder — один из самых популярных ресурсов значков в сети и, по сути, поисковая машина для значков. Он предлагает более 5,5 миллионов иконок в широком диапазоне стилей и категорий.

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

Количество доступных файлов значков: Более 5,5 миллионов

Доступные форматы: PNG, SVG

Лицензия: Бесплатные иконки распространяются под различными лицензиями. Проверяйте перед загрузкой. Все значки премиум-класса выпускаются под лицензией Iconfinder Basic, и вы можете использовать их в личных и коммерческих проектах. Перепродажа и распространение запрещены.

Цена: Некоторые значки доступны бесплатно.Премиум-значки стоят 2 доллара за значок, а пакеты значков — от 9 долларов. Вы также можете выбрать профессиональную подписку, которая дает вам определенное количество кредитов на скачивание каждый месяц. Подписки начинаются от 40,50 долларов в год за 10 загрузок в месяц. Также доступны ежемесячные планы и планы неограниченного скачивания.

Не забудьте использовать наш купон Iconfinder, чтобы получить скидку 50%.

Pixelbuddha — это коллекция бесплатных и премиальных дизайнерских ресурсов, созданных внутренней командой и более чем 100 творческими гостями.Сотни бесплатных иконок доступны в различных стилях и категориях. Большинство наборов значков доступно в форматах SVG и PNG.

Хотя некоторые наборы значков в Pixelbuddha доступны бесплатно, вы получите доступ к большему количеству ресурсов, присоединившись к Pixelbuddha Plus. Это дает вам доступ к новым премиальным ресурсам каждую неделю, включая значки, шрифты, шаблоны, текстуры, анимацию и многое другое, а также специальные предложения только для участников. Вы также можете приобрести премиум-наборы значков в качестве разовой покупки.

Количество доступных файлов значков: Тысяч

Доступные форматы: SVG, PNG, PSD

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

Цена: Некоторые файлы значков доступны для бесплатной загрузки. Членство в Pixelbuddha Plus стоит 10 долларов в месяц и дает вам доступ к дополнительным ресурсам премиум-класса.

Не забудьте использовать наш код купона Pixelbuddha, чтобы получить скидку 30%.

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

Вы можете искать значки по ключевым словам или просматривать наборы значков, созданные создателем. Creative Market даже предложит другие активы, которые могут вас заинтересовать. Это может вызвать некоторые варианты, которые вы иначе могли бы не увидеть.

Количество доступных файлов значков: 200000+

Доступные форматы: EPS, JPG, PNG, SVG, AI, PDF, PSD, CDR

Лицензия: Загрузки доступны с выбором лицензии: личная, коммерческая и расширенная коммерческая.

Цена: Наборы иконок оцениваются по индивидуальной цене от 2 долларов. Большинство из них находятся в диапазоне от 20 до 39 долларов за личную лицензию

.

Icons8 — это библиотека бесплатных и премиальных значков, цель которой — предоставить творческие элементы и инструменты для сообщества дизайнеров. Веб-сайт управляется командой из 40 человек, и все ресурсы создаются внутри компании.

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

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

Количество доступных файлов значков: 130 000+

Доступные форматы: SVG, PNG, PDF, EPS, JPS

Лицензия: Бесплатная лицензия Icons8 позволяет вам бесплатно использовать значки на веб-сайтах, в мобильных и настольных приложениях, но вы должны указать Icons8 и предоставить ссылку.Все платные планы позволяют использовать без указания авторства, но вы не должны перепродавать или распространять значки.

Стоимость: Иконки доступны бесплатно в ограниченном разрешении. Платные планы использования значков без указания авторства составляют 13 долларов в месяц при загрузке до 100 в месяц и 0,2 доллара за значок в дальнейшем.

The Noun Project предлагает одну из крупнейших библиотек значков, доступных в Интернете, с более чем 3 миллионами значков. Большинство значков этого сайта доступны в форматах SVG и PNG, а большинство значков, доступных на этом сайте, выполнены в черно-белом стиле.

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

Количество доступных файлов значков: Более 3 миллионов

Доступные форматы: PNG, SVG

Лицензия: Вы можете использовать бесплатную загрузку значков для некоммерческих проектов по лицензии Creative Commons с обязательным указанием авторства.Вы можете использовать загрузку значков Pro для коммерческих или некоммерческих проектов, в зависимости от приобретенной лицензии.

Цена: Бесплатно для базовой загрузки. 2,99 доллара США за значок при загрузке значка Pro для использования без указания авторства. Подписки на неограниченное скачивание доступны по цене 39,99 долл. США в год.

Freepik — это бесплатный ресурс для дизайнеров, предлагающий сотни тысяч бесплатных и премиальных творческих ресурсов. Файлы значков доступны в форматах PNG, SVG и EPS.

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

Количество доступных файлов значков: 400 000+

Доступные форматы: SVG, EPS

Лицензия: Лицензия Freepik позволяет бесплатно использовать в личных и коммерческих проектах с указанием авторства. Премиум-пользователи могут использовать значки без указания авторства.

Цена: Freepik имеет несколько иконок для бесплатной загрузки, но бесплатные пользователи имеют ограничение в 10 загрузок в день.Если вы хотите получить доступ к полной библиотеке без указания авторства, вам необходимо оформить подписку как премиум-член. Стоимость членства от 9,99 долларов в месяц (при ежегодной оплате) для неограниченных загрузок, также доступны планы с ежемесячной оплатой.

GraphicBurger — это библиотека бесплатных графических элементов, созданная румынским дизайнером Раулем Тачиу. Хотя он не обновлял сайт уже пару лет, это отличное место, где можно найти бесплатные наборы значков, некоторые из которых содержат сотни значков.

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

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

Количество доступных файлов значков: Тысяч

Доступные форматы: SVG, EPS, PNG

Лицензия: Лицензия GraphicBurger дает вам право использовать ресурсы в личных или коммерческих продуктах без указания авторства. Перепродажа или распространение иконок запрещено.

Цена: Бесплатно

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

Команда выпускает около 150-200 новых ресурсов дизайна премиум-класса каждый год. В настоящее время доступно более сотни наборов значков, в основном тематических по социальным сетям и технологиям. Существует ряд значков, специально созданных для дизайна пользовательского интерфейса iOS.

Количество доступных файлов значков: 100+ наборов значков

Доступные форматы: AI, EPS, PNG, PSD

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

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

Flaticon является дочерней компанией Freepik и является одной из крупнейших баз данных бесплатных иконок в Интернете.

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

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

Количество доступных файлов значков: Более 4,5 миллионов

Доступные форматы: PNG, SVG, EPS, PSD

Лицензия: Бесплатные иконки должны содержать указание авторства. Иконки, загруженные по подписке Premium, можно использовать в личных или коммерческих проектах без указания авторства, но с некоторыми ограничениями.Например, нельзя использовать значки в логотипах, и они не должны быть основным элементом дизайна.

Цена: Некоторые значки доступны бесплатно. Чтобы получить доступ ко всей базе данных, вы должны приобрести членство Premium от 8,25 доллара в месяц (доступны варианты ежемесячной и годовой оплаты).

11. Iconshock

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

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

.

Количество доступных файлов значков: Более 2 миллионов

Доступные форматы: PNG, SVG, EPS

Лицензия: Вы должны указать авторство, если используете бесплатную версию любого значка.Премиум-пользователи могут скачивать иконки по коммерческой лицензии.

Стоимость: Иконки можно скачать бесплатно. Чтобы получить доступ к полным векторным версиям файлов значков и использовать их без указания авторства, премиум-членство стоит от 79 долларов в год или 99 долларов за пожизненный доступ.

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

Иконки представлены более чем 2600 пакетами в широком диапазоне стилей. Вы можете найти значки по ключевым словам, размеру, цвету, лицензии и т. Д.

Количество доступных файлов значков: 500 000+

Доступные форматы: PNG, ICO, ICNS. Вы можете использовать встроенный конвертер для загрузки значков в форматах, включая PNG, BMP, GIF, JPG, PSD, SVG, TGA, TIFF

.

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

Цена: Бесплатно

IcoMoon — это приложение с библиотекой значков, в котором представлены тщательно подобранные наборы значков с идеальной точностью до пикселя. Приложение также позволяет создавать собственные наборы значков.

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

Количество доступных файлов значков: 5,550+

Доступные форматы: SVG, PNG, PDF, Polymer, XAML, CSH, значок шрифта

Лицензия: Каждый пакет значков поставляется с собственной лицензией.Пожалуйста, проверьте права использования перед загрузкой значков.

Цена: Приложение IcoMoon можно использовать бесплатно. Стоимость каждого набора значков взимается отдельно. Доступен бесплатный пакет, содержащий 490 иконок. Премиум-пакеты начинаются от 39 долларов.

14. iconmonstr

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

Каждая иконка на сайте создана одним дизайнером с более чем 15-летним опытом создания иконок.

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

Количество доступных файлов значков: 4,500+

Доступные форматы: SVG, EPS, PSD, PNG

Лицензия: Лицензия iconmonstr разрешает бесплатное использование в личных или коммерческих проектах, но значки не должны быть основным компонентом дизайна или использоваться в логотипе.Иконки нельзя перепродавать или распространять.

Цена: Бесплатно

ZillionDesigns — это сервис с мощной командой, состоящей из более чем 100 000 дизайнеров из более чем 200 стран и территорий по всему миру.

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

Хотя вам, возможно, придется заплатить, чтобы получить свой собственный дизайн, ZillionDesigns также предлагает небольшой набор бесплатных пакетов значков, доступных для загрузки.Эти значки доступны в различных стилях и цветах, но обычно они имеют формат PNG.

Количество доступных файлов значков: Ограниченное количество бесплатных пакетов значков

Доступные форматы: Бесплатные иконки в основном в формате PNG. Вы можете запросить любой формат, который пожелаете, если начнете конкурс дизайна.

Лицензия: После присуждения приза вы обладаете полными правами на любой дизайн для победившего дизайна.

Цена: Доступны бесплатные пакеты значков.Если вы хотите заказать свои собственные иконки, вы можете начать «конкурс». Стоимость приза за дизайн иконок начинается с 199 долларов, но вы можете предложить приз более высокой стоимости, если хотите получить больше заявок.

Streamline предлагает одну из самых полных коллекций наборов иконок, доступных в Интернете. Полная коллекция включает более 97 000 векторных иконок в 12 стилях и охватывает множество тем, каждая из которых легко доступна для использования в векторном формате.

Внутренняя команда разрабатывает все значки и периодически добавляет новые значки в коллекцию.Существует настольное приложение для поиска, просмотра и настройки значков и плагинов, чтобы использовать их непосредственно в программном обеспечении, включая Sketch, Adobe XD, Figma и Powerpoint.

Количество доступных файлов значков: 97 000+

Доступные форматы: SVG, PNG

Лицензия: Вы можете использовать значки PNG бесплатно с указанием авторства в любых проектах, включая логотипы и шаблоны, но вы не можете их распространять. Премиум-лицензия позволяет неограниченное использование в коммерческих проектах при условии, что вы используете не более 100 иконок в проекте.

Цена: 19 долларов в месяц за доступ к полному набору значков с 5-дневной бесплатной пробной версией. Вы можете бесплатно скачать иконки с низким разрешением в формате PNG.

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

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

Вы также можете запросить пользовательские значки в стиле существующих наборов значков.

Количество доступных файлов значков: 15000+

Доступные форматы: AI, EPS, SVG, PNG

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

Цена: Бесплатные иконки доступны в блоге Icojam. Наборы значков премиум-класса продаются по индивидуальной цене от 5 долларов. Пользовательские значки можно заказать от 15 долларов за значок при минимальной стоимости заказа 100 долларов.

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

Значки имеют открытый исходный код и доступны для использования или редактирования.Каждый символ доступен в пяти темах и различных размерах и плотности.

Количество доступных файлов значков: 26000+

Доступные форматы: Webfont, SVG, PNG, XAML

Лицензия: Открытый исходный код и бесплатное использование в любых проектах

Цена: Бесплатно

Glyphish предлагает коллекцию из более чем 2200 контурных и заполненных значков, созданных дизайнером Джозефом Уэйном. Значки предназначены в первую очередь для использования в приложениях iOS, но они также подходят для Android, Windows Mobile, веб-сайтов и других целей.

Каждый набор значков включает значки размеров @ 2 и @ 3x Retina-ready, и все значки готовы для загрузки в Xcode. Исходные файлы эскиза включены.

Количество доступных файлов значков: 2,200+

Доступные форматы: PNG, SVG, Sketch

Лицензия: Лицензия Glyphish позволяет использовать в личных или коммерческих проектах, но их нельзя перепродавать или распространять.

Цена: Бесплатный пакет из 50 иконок, доступный при ссылке на сайт Glyphish.Полный комплект из 2220 иконок стоит 99 долларов.

20. Дизайнерские бомбы

Не забудьте заглянуть в раздел Design Bombs Freebies, который включает в себя десятки бесплатных наборов значков в различных стилях и категориях, доступных исключительно для читателей Design Bombs. Обязательно подпишитесь на нашу рассылку, чтобы мы могли сообщить вам, когда мы выпустим новый пакет.

Количество доступных файлов значков: Десятки наборов значков

Доступные форматы: SVG, EPS, PNG, AI

Лицензия: Бесплатное использование в личных и коммерческих проектах без указания авторства.

Цена: Бесплатно

Последние мысли

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

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

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

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

Похожие сообщения

Иконки и текст Раздел конструктора сайтов — Thinkific

Используйте этот горизонтальный список значков и текста, чтобы выделить различные темы курса, поговорить со своими инструкторами или перечислить все преимущества регистрации на ваши курсы!

---

В этой статье:

Об этом разделе

Добавление значков и текстовой секции

Настройка раздела

Примеры разделов

Об этом разделе

Раздел «Значок и текст» позволяет создать горизонтальный список элементов, присвоив каждому элементу в списке визуальный значок, а также текстовое описание.Хотя значки обеспечивают небольшое визуальное разнообразие, этот раздел на самом деле посвящен словам: используйте его всякий раз, когда вы хотите создать привлекательный список элементов, которые можно легко просканировать. Примеры могут включать в себя: три основных вещи, которым студент научится делать в рамках курса, четыре руководящих принципа вашей образовательной философии или различные уровни знаний, на которые ориентированы ваши курсы.

Где использовать этот раздел

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

Раздел «Бонусные материалы» — это немного более специализированная версия раздела «Значки и текст»; он не позволяет вам перечислить столько элементов, но предоставляет некоторые дополнительные параметры, включая возможность загрузки фонового изображения для раздела!

Добавление значков и текстовой секции

1. В Site Builder перейдите на страницу, на которую вы хотите добавить раздел
2. Щелкните Добавить раздел и выберите Значки и текст из списка
3. Дополнительно: При необходимости измените положение новой секции
4. Нажмите Значки и текст , чтобы открыть настройки раздела
5. Щелкните Добавить значок и текст ; новая карточка появится в разделе «Блоки»
6. Щелкните значок и текстовую карточку и выберите значок, который вы хотите использовать для этого элемента
7. Отрегулируйте Название и Описание позиции соответствующим образом
8. Необязательно: Повторите шаги 5-7, чтобы добавить любые дополнительные элементы Icon и текст , которые вы хотите включить в раздел; вы можете изменить порядок элементов, перетаскивая отдельные карточки
9. Дополнительно: При необходимости настройте раздел (параметры см. Ниже)
10. Нажмите Сохранить , чтобы применить изменения

Настройка раздела

Заголовки: Заголовок — это заголовок для всего раздела, а подзаголовок появляется непосредственно над или под заголовком (в зависимости от вашей темы). Выравнивание контролирует выравнивание заголовка и подзаголовка.

Макет: Вы можете удалить прокладку верхней или нижней секции , если кажется, что между этой и соседней секциями слишком много места. В темах Vogue вы также можете установить цвет фона Цвет в качестве основного или дополнительного цвета темы.

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

Примеры разделов

Империя (Halo)

Видение (процветание)

Vogue (классический)

Подробные примеры наших различных тем и стилей в действии можно найти на нашем демонстрационном сайте тем. Используйте кнопки внизу страницы, чтобы просмотреть все возможные варианты!

---

Подробнее о разделах Site Builder

Список всех доступных разделов Site Builder

Добавить раздел Site Builder

Удалить раздел Site Builder

Перемещение / реорганизация раздела Site Builder

Обзор конструктора сайтов

Значки

веб-сайтов важны для дизайна: вот почему

Что такое значки веб-сайтов?

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

Часть отличного дизайна веб-сайта — это значки, которые вы используете на своем веб-сайте. Цвета, элементы, текст, навигация и другие аспекты важны, поскольку они дают пользователю возможность познакомиться с вашим брендом.

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

Вот пример нескольких значков, которые появляются на нашем собственном веб-сайте:

Обратите внимание, например, на то, что в поле «маркетинг по электронной почте» есть значок конверта.Этот значок веб-сайта поддерживает контент и дополнительно передает важную информацию об этой функции.

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

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

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

История иконок веб-сайтов

Иконки в веб-дизайне претерпели интересную эволюцию с первых дней Интернета.

Давайте пройдемся по визуальным подсказкам истории веб-сайтов:

• С загруженных текстом веб-сайтов 1990-х годов с анимированными GIF-файлами и счетчиками посещений страниц (почему?).
• Через период одержимости Flash (сейчас огромное SEO-нет-нет).
• К Web 2.0.
• К скевоморфному дизайну.
• Для плоского современного адаптивного дизайна.

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

Боковое примечание:

Подробнее о тенденциях веб-дизайна можно узнать здесь.

Что значки веб-сайтов делают для дизайна?

Иконки веб-сайтов выполняют три основные функции в дизайне:

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

Вот как работают значки веб-сайтов

Иконки в веб-дизайне выполняют три основные функции.

Мы рассмотрим наш недавний редизайн сайта Kelly’s Choice в некотором контексте.

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

На главной странице веб-сайта Kelly’s Choice ниже мы использовали иконографию веб-сайта, чтобы усилить сообщение, передаваемое в разделе баннеров на странице.

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

2. Значки содержат важную информацию.

На снимке экрана ниже вы увидите, что значки помогают подкрепить ключевую статистику о программе Kelly’s Choice.

3. Иконография разбивает блоки содержимого, делая текст более читаемым.

В приведенном ниже примере мы хотели передать пошаговый план, которому пользователи могут следовать при работе с Kelly’s Choice и, в конечном итоге, получить желаемую выгоду, а именно «получение результатов».

Используя многоколоночный макет с пронумерованными значками — вместо простого упорядоченного списка с одним текстом — мы предоставили пользователю более простой способ идентифицировать шаги программы и конвертировать их в призыв к действию (выберите Ваша программа).

Полезная стратегия использования значков

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

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

Как правило, имейте в виду: используйте значки там, где они имеют смысл!

5 лучших практик для значков веб-сайта + 5 инструментов для поиска значков

Хотите упростить использование вашего веб-сайта и графики для клиентов? Затем используйте значки веб-сайтов и эти 6 лучших практик, чтобы ваши значки сияли.

Вырваться вперед

В этой статье

Иконография, или информационные значки, относится к использованию и разработке значков.А значки — это изображения, которые представляют действие или идею.

В наши дни значки используются повсюду в Интернете. Фактически, некоторые значки веб-сайтов, которые вы, вероятно, видите (и используете) каждый день:

• Значок «X» вверху страницы означает закрытие окна или страницы

• Стрелка вниз для загрузки чего-либо

• Птичка Twitter для перехода на канал бренда в Twitter

• A маленькая батарея для уровня мощности вашего устройства

Если вам интересно, почему значки так широко используются, это потому, что они создают лучший пользовательский интерфейс (UI), чтобы посетители вашего веб-сайта могли иметь лучший пользовательский интерфейс (UX).

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

• Пользовательский интерфейс относится к страницам и информационным панелям, которые люди используют при посещении веб-сайта или приложения. Например, домашний экран вашего смартфона — это пользовательский интерфейс, который вы, вероятно, используете каждый день.

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

Итак, как значки сделать пользовательский интерфейс вашего сайта и пользовательский интерфейс посетителей максимально плавным?

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

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

Это ускоренное поглощение тоже имеет смысл, учитывая, что люди могут обрабатывать изображения всего за 0,013 секунды.

Есть одно важное преимущество экономии места и упрощения восприятия контента — удобная навигация.

Это настолько важно, что ошеломляющие 94% людей утверждают, что навигация по веб-сайту является самой важной функцией веб-сайта.

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

(Кстати, если вам нужны дополнительные советы по созданию страниц, которые конвертируют ваших клиентов, ознакомьтесь с этими 5 настройками пользовательского интерфейса, чтобы повысить доверие к страницам продаж.)

Итак, вывод:

Иконки — это графические символы, которые облегчают вашим клиентам поиск информации на вашем сайте. Они улучшают пользовательский интерфейс и пользовательский интерфейс вашего сайта, оптимизируя контент и упрощая навигацию.

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

Как иконография используется в графике?

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

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

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

Как видите, значки разбивают статистику и копируют, делая это намного проще для глаз.

Иконки также используются для введения или акцентирования внимания на теме, прежде чем переходить к деталям.

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

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

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

В двух словах:

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

Теперь, когда мы рассмотрели, что и зачем использовать иконки, давайте рассмотрим шесть правил иконографии, которые должен знать каждый создатель.

5 правил использования иконок для сайтов и графики

Правило №1: Используйте знакомые значки

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

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

Однако — это широко используемых значка в определенных странах и отраслях, и именно эти значки вы хотите использовать в своих проектах.

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

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

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

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

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

Использование знакомых значков может помочь посетителям найти то, что им нужно на вашем сайте, и отказаться от них из-за разочарования.

Резюме:

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

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

Правило № 2: помните о значках с несколькими значениями

В то время как наше первое правило — использовать знакомые значки, наше второе — обращать внимание на значки, которые слишком хорошо знакомы и имеют несколько значений.

Опять же, несколько значков действительно универсальны.

Возьмем, к примеру, иконку в виде подарка.

На Гарри и Дэвиде значок подарка представляет списки подарков клиентов.

Uncommon Goods использует значок подарка для обозначения своего инструмента поиска подарков.

С другой стороны, Slack когда-то использовал значок подарка для обозначения уведомлений и обновлений программного обеспечения.

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

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

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

Итак, означает ли это, что вы вынуждены использовать несколько однозначных значков?

Не совсем так. Маркировка ваших значков может помочь вашим пользователям понять использование и значение значка (подробнее об этом позже).

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

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

Конечно, вы захотите протестировать иконки со своей аудиторией, чтобы увидеть, насколько достаточно деталей или конкретности (мы также поговорим об этом чуть позже).

Как правило, лучше использовать значки, не похожие на другие.

В противном случае вы можете получить за это flack, как Slack после изменения значка логотипа. Многие отмечали, насколько он похож на другие компании, например, приложение Google Фото.

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

Теперь, когда у вас есть прекрасный баланс между общими и слишком общими значками, давайте добавим третий элемент — простоту.

Правило № 3: Используйте простые значки

Наше следующее правило иконографии — выбирать простые, а не замысловатые иконки.

Причина в том, что сложные значки труднее распознать на маленьких экранах.

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

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

В конце концов, люди обычно предпочитают значки, которые представляют идеи или действия в знакомой, наглядной (картинной) и простой форме.

Итак, как именно выглядит «простой» значок?

Простые значки состоят из нескольких линий и деталей.

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

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

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

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

Делает это просто и чисто, правда?

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

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

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

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

Одно исследование не обнаружило существенной разницы в скорости или точности при выборе между этими стилями значков.

Что делает тем не менее, так это расстояние между значками. Одно исследование показало, что изменение расстояния между значками увеличивает время поиска пользователями, что усложняет UX и может привести к тому, что посетители покинут ваш сайт.

Всего:

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

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

Правило №4: Обозначьте свои значки

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

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

Посмотрите, например, ярлыки на навигации веб-сайта Publix.

Это делает их навигацию очень четкой и прямой.

Вы также можете размещать метки под значками, как это делает Canva на панели инструментов дизайна.

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

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

Ярлыки

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

Что важно, учитывая, что в 2017 году в Северной Америке у потребителей в среднем было восемь сетевых устройств на человека. И, по прогнозам, к 2022 году у них будет тревожная цифра 13,4.

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

Очень мало значков используется для обозначения одного и того же во всем мире, и их расшифровка только усложняет обмен сообщениями.

Подводя итог:

Обозначение значков делает их значение более понятным для посетителей, что дает им более приятный и эффективный опыт.

Однако самые откровенные иконки в мире не очень помогут вашей аудитории — если вы не следуете нашему пятому правилу.

Правило № 5: Делайте значки большими (достаточно большими)

Наше пятое правило иконографии — отображать значки достаточно большого размера.

Это особенно важно для ваших мобильных зрителей, которых много.

В 2019 году 51,51% веб-трафика приходилось на мобильные устройства.

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

Одно исследование рекомендует, чтобы значки были размером не менее 0,7 сантиметра при просмотре с расстояния 40 сантиметров (около 15,7 дюйма).

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

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

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

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

5 библиотек иконок для поиска и создания иконок

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

Некоторые веб-сайты со значками, на которые стоит обратить внимание:

№1. Флатикон

Количество значков: Более 2386000 значков

Цена: 11,99 долларов в месяц (или 8 долларов.25 в месяц с оплатой ежегодно)

Для кого лучше:

№2. Проект существительное

Количество иконок: Более 2 миллионов

Цена: 39,99 долларов в год

Для кого лучше:

# 3: Roundicons

Количество значков: Более 42000 значков

Стоимость: Единовременный платеж в размере 99 долларов США

Для кого лучше:

# 4: Оптимизация

Кол-во иконок: Более 30 000

Цены: Бесплатно за Free Icon Pack, 194 доллара за Essential Pack, 274 доллара за Ultimate Pack

Для кого лучше:

• Создатели, которые ищут именно библиотеку (а не рынок) с отличными наборами иконок UX и UI

• Создатели, готовые платить немного больше за надежную библиотеку иконок

# 5: Iconmonstr

Кол-во иконок: Более 4 486

Цена: Бесплатно для коммерческого использования

Для кого лучше:

Информационный бюллетень

Присоединяйтесь к нашему информационному бюллетеню

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

Используйте значки, чтобы сделать ваш сайт приятным для изучения

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

Вот несколько рекомендаций, которым следует следовать при использовании значков на своем веб-сайте:

• №1. Используйте значки, знакомые вашей аудитории

• # 2. Будьте осторожны при использовании значков с несколькими значениями

• # 3.Выбирайте простые, а не сложные значки

• # 4. Обозначьте свои значки, чтобы добавить ясности

• # 5. Сделайте свои значки достаточно большими, чтобы их можно было распознать и нажимать на любом устройстве.

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

Нужно где-нибудь создать этот веб-сайт? Не смотрите дальше Подии.