На сайт значки: Где скачать иконки для сайта бесплатно?

Содержание

Свой значок для сайта

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

Фавиконки в 2021 году

В 2021 году мы можем использовать SVG-значки в качестве фавиконки. Минимальный код, который следует размещать в head страницы.


<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Первая строчка meta с именем theme-color требуется для цвета значка в Chrome и Android.

Файл favicon.svg (имя может быть любым) является векторным. Размер не важен. Указывать тип type=»image/svg+xml» теперь не нужно.

Одним из преимуществ SVG-значка является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от тёмного или светлого режима пользователя. Этот метод не будет работать со mask-icon, так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.


<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Файл apple-touch-icon.png с атрибутом apple-touch-icon нужен для значка на IOS-устройствах, а также для «ИзбранноеЭ на странице новой вкладки в браузере. Вам нужен только размер 180×180, и атрибут sizes лишний.

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Значок используется в Android и Chrome. Нужен только самый большой размер 512×512. Приблизительное содержание файла:


{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

Для старых браузеров можно использовать файл favicon.ico размером 32×32 в корне веб-сайта. Описание файла ниже в старой версии статьи.

Значок для сайта в 2017 году. Старая версия

Что такое значок веб-сайта и для чего он нужен? Для этого нам придётся вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар.

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

Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:


<link rel="shortcut icon" href="адрес значка" type="image/x-icon">

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

В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.

Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.

Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов «Favorites Icon» , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем

favicon. ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.

На самом деле они совершили опрометчивый поступок, поскольку использование тега link даёт следующие преимущества:

файл со значком можно назвать как угодно, а не только favicon.ico
можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)

Примечание: Кстати, исходя из вышесказанного, рекомендация размещать файл с именем favicon.ico в корне веб-сайта с последующим указанием на него в теге link выглядит опрометчивой, поскольку, если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий link будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon. ico в корне сайта. В этом случае придётся переименовывать файл favicon.ico и изменять код во всех остальных страниц веб-сайта, а не только той одной, для которой захочется отменить указание значка.

Поэтому, свои значки желательно не называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.

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

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

Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).

Размер 16×16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16×16 является обязательным: если IE5 не обнаружит в файле значок 16×16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16×16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16×16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16×16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16×16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете — и не работает для локальных страниц.

Подобное поведение Internet Explorer, кстати, позволяет веб-мастеру сайта отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на веб-сервер.

Остальные браузеры отображают значок 16×16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.

Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.

Отсюда следует вывод, что при создании значка для сайта или страницы главным является размер 16×16, и именно его следует прежде всего помещать в ICO-файл.

Если стоит выбор между сохранением значка 16×16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.

Наряду с основным размером значка 16×16, существует ещё пара стандартных размеров — 32×32 и 48×48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».

К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован — 32×32 или 48×48? Это зависит от настроек свойств экрана — вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48×48, иначе 32×32. Использование значков размером 48×48 популярно на дисплеях улучшенной разрешающей способности, где значки 32×32 уже слишком мелки.

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

Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16×16, один 32×32, и один 48×48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.

Дополнительные возможности

Может ли значок быть не в формате ICO, а в каком-нибудь другом формате — например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:


<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.

Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:


<link rel="shortcut icon" href="адрес значка. ico" type="image/x-icon" />
<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузер всегда берёт последний из указанных значков — при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.

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

ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.

Значки для iPhone, iPad

В связи с популярностью устройств от компании Apple стала актуальной создания значков для iPad и iPhone. Когда пользователь в Safari выбирает команду Добавить в «Домой» на рабочем столе устройства появляется значок. Для этой цели необходимо создать картинку в формате PNG с размерами 72×72 пикселей для iPad и 114×114 пикселей для iPhone 4. После этого необходимо прописать:


<link rel="apple-touch-icon" href="/icon.png" />

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

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


<link rel="apple-touch-icon-precomposed" href="/icon-precomposed.png" />

HTML5

С появлением HTML5 стало возможным использовать новый атрибут sizes. И теперь можно встретить такую запись.


<link rel="icon" type="image/png" href="/favicon-32x32.png">

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

Программы для создания ICO-файлов

Многие графические редакторы и специализированные редакторы значков позволяют создавать или конвертировать картинки в значки.

Не забывайте о том, что фиксированная палитра не обязана состоять из системных цветов. Поэтому значки 32×32 и 48×48 следует сохранять, по крайней мере, в 256-цветной палитре, поскольку в True Color они будут занимать слишком много места, а грамотный подбор палитры способен сделать ограниченность количества цветов практически незаметной.

Также вы можете воспользоваться различными онлайн-сервисами, которые позволяют загрузить на сайт нужный значок или PNG-файл и получить готовый значок для вашего веб-сайта:
www.favicon.cc/
www.favico.com
FavIcon Generator
Genfavicon

Дополнительная информация

Добавляем favicon в WordPress
Какие нужны фавиконки

Иконки для сайта: какие бывают, зачем нужны и где их брать?

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

Содержание

Какие бывают иконки?
Зачем нужны иконки на сайте?
Где взять иконки для сайта?

Какие бывают иконки?

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

В зависимости от типа графики иконки делятся на:

Векторные (формат SVG).
Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.
Растровые (формат PNG).
Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.
Символьные (форматы шрифтов).
В веб-дизайне нередко применяются иконочные шрифты (например: FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.

Существуют основные следующие стили оформления иконок:

плоские (flat),
контурные (outline),
объемные (3D).

Иконка с одинаковым значением в разных стилях:

Контурная

Плоская

Объемная

Зачем нужны иконки на сайте?

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

Иконкам можно найти применение на любом сайте:

В дополнение к пунктам навигации.
Благодаря единому размеру, иконки в навигации способствуют скорейшему запоминанию каждого пункта. В меню сайта иконки могут полностью заменять текст в адаптивном дизайне или других случаях изменения интерфейса. Такой подход применяет в интерфейсе панели управления Joomla 4:
Иконки в меню админки Joomla 4
Иконки при скрытии текста пунктов меню
Для функциональных кнопок.
Не будем далеко ходить и вспомним интерфейс админки Joomla 3, в котором также активно применяются иконки для обозначения функциональных кнопок и не только их.
Иконки в кнопках админки Joomla 3
Иконки на странице интернет-магазина
Для обозначения любого элемента контента.
Особенно это касается лендингов, где почти каждый элемент страницы сопровождается графическим объектом. В частности, иконки практически всегда применяются для блоков преимуществ и в призывах к действию:
Иконки преимуществ на лендинге
Для обозначения мета-информации.
Иконками можно помечать любые мета-данные на веб-страницах: дату создания, изменения и публикации, имя автора, категорию, рейтинг, комментарии и т. д.

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

Где взять иконки для сайта?

Иконочные шрифты

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

Font Awesome.
Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.
Иконки из Font Awesome
IcoMoon.
Иконки из этого шрифта применяются в админке Joomla 3.x.
Иконки из IcoMoon
Themify Icons.
Этот бесплатный шрифт включает более 320 контурных иконок.
Иконки из Themify Icons
Fontello.
Это не шрифт, а веб-сервис, позволяющий создавать наборы нужных к применению на сайте иконок из представленного набора и сохранять их в формате шрифта.
Сервис Fontello

Иконки в формате изображений

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

Iconfinder отличается:

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

Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:

Переходим на www.iconfinder.com.
В строку поиска вводим запрос Joomla и ищем.
Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.
Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.
Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.
Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.

пп. 1, 2

п. 3

пп. 4, 5

п. 6

Ознакомиться с наборами иконок можно на странице Icon sets:

Страница с наборами иконок

Комментарии для сайта Cackle

Сайты с бесплатными иконками и логотипами – База знаний Timeweb Community

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

Иконки

Captain Icon

https://mariodelvalle.github.io/CaptainIconWeb/

Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.

Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.

Ego

https://www.ego-icons.com/

На этом сайте есть 3600 иконок, но бесплатно можно скачать только 100 из них. Если хотите использовать все из них, то придется заплатить 217 долларов. Форматы: Sketch, ai, svg, pdf, eps, iconjar.

Иконки представлены в синих и серых оттенках.

Endless Icons

http://www.endlessicons.com/

Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.

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

Flaticon

https://www.flaticon.com/

Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).

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

Icofinder

https://www.iconfinder.com/

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

Логотипы и favicon

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

Logomakr

https://logomakr. com/

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

Online Logomaker

https://ru.onlinelogomaker.com/

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

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

Canva

https://www.canva.com/ru_ru/sozdat/logotip/

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

Designimo

https://www.designimo.com/

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

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon. ico.

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

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

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

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

Виджет значков социальных сетей — Справка

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

Содержание

Доступные значки

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

Нажмите сюда, чтобы развернуть список доступных значков.

500px

Amazon

Apple

Bandcamp

Behance

CodePen

DeviantArt

Digg

Dribbble

Dropbox

Адреса электронной почты (если ваш адрес me@yourgroovydomain. com, введите mailto:[email protected] в поле URL-адрес учётной записи)

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

Среднее

Встречи

Pocket

Ravelry

RSS-ленты

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

Tumblr

Twitch

Twitter

Vimeo

ВКонтакте

WordPress

Yelp

YouTube

Виджет значков социальных сетей

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

Добавление виджета со значками социальных сетей

Перейти на вкладку Мой сайт(ы) → Внешний вид → Настроить
Нажмите Виджеты, и вы увидите различные области виджетов, поддерживемых вашей темой. Почти во всех темах есть хотя бы область виджетов в подвале. Некоторые поддерживают добавление виджетов на боковую панель и в другие области.
Click on an available Widget area; В этом случае выбран подвал.
Нажмите Добавить виджет и выполните поиск по запросу Социальных или просмотрите список доступных виджетов, чтобы найти виджет Значки социальных сетей.

Примечание. Если у вас установлены плагины, в конце заголовка виджета вы увидите (Jetpack).

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

Добавьте ссылку на первый профиль в социальной сети. Например, https://www.facebook.com/WordPresscom

Убедитесь, что указали ссылку полностью, в том числе https://.

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

Нажмите кнопки «Добавить» и «Значок», чтобы добавить еще один значок соцсетей

Все ссылки, добавленные в виджет «Значки социальных сетей», будут автоматически отображаться в виде значков при предварительном просмотре в Конфигураторе.
Если вы не видите нужный значок, убедитесь, что правильно ввели ссылку на социальную сеть, в том числе https://.

Когда добавлены ссылки на все профили в социальных сетях, щёлкните «Опубликовать», чтобы добавить виджеты соцсетей на ваш сайт.

Теперь новенькие значки соцсетей засияют на вашем сайте.

Изменение порядка значков

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

Настройка значков соцсетей

При желании изменить анимацию появления значков, например, положение, выравнивание или размер, можно использовать пользовательские CSS, доступные в плане WordPress.com Premium или выше. Цвет значков соцсетей зависит от используемой темы, но их также можно поменять с помощью CSS.

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

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

Шаг 1. Подберите несколько значков социальных сетей на свой вкус и загрузите их в Библиотеку медиафайлов.

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

Загрузите значок в галерею медиафалов

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

Получите ссылку на значок социальной сети

Перейдите в раздел Мой сайт → Медиафайлы.
Щёлкните изображение загруженного значка социальной сети и выберите Изменить.
В опции URL-адрес выберите Копировать, чтобы сохранить ссылку в буфер обмена.
Нажмите кнопку Готово, чтобы выйти из редактора медиафайлов.

Шаг 2. Добавьте виджеты «Текст» или «HTML-код» и настройте формат кнопок с помощью HTML.

Добавьте виджет значков социальных сетей

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

Перейти на вкладку Мои сайты →Внешний вид →Настроить → Виджеты.
Выберите область виджетов, где должны отображаться значки.
Нажмите кнопку Добавить виджет и выберите виджет Текст или HTML-код
Чтобы добавить виджет, щёлкните его название.

Добавьте HTML-код виджета значков социальных сетей

По желанию укажите заголовок своего виджета, а затем добавьте HTML-код следующего формата:

Вместо типового адреса https://facebook.com/WordPresscom укажите полную ссылку на свой профиль в социальной сети.
Замените ссылку на изображение: https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png ссылкой на загруженный вами значок соцсетей.
Необязательное действие: измените ширину и высоту значка в соответствии со своими предпочтениями.

Введите HTML-код повторно в существующем виджете «Текст» или «HTML-код» для каждого значка, который должен присутствовать на вашем сайте.

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

Примеры и шаблонные изображения

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

Чтобы использовать эти значки в своём виджете, сначала создайте пустой виджет «Текст» в разделе Внешний вид → Настроить → Виджеты.

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

Часто задаваемые вопросы

Почему значок социальной сети не появляется на сайте?

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

Пример: https://www.pinterest.fr/yourpinterest/ следует заменить на https://www.pinterest.com/yourpinteres/

Были ли эти инструкции полезны?

Иконка для сайта — Создать свой сайт бесплатно

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

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

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

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

Поддерживаемые форматы иконки сайта: ICO, PNG, GIF, Анимированный GIF, JPEG, но если вы хотите, чтобы ваш фавикон отображался во всех браузерах выбирайте ICO.

Вы можете скачать готовые иконки для сайта http://faviconka.ru/ нажав на нужной картинке правой мышкой и выбрав Сохранить изображение как левой кнопкой мышки, сами нарисовать в графическом редакторе или сделать из фото.

Делаем favicon онлайн

Перейти https://www.favicon.by

Нарисовать в сетке нужную фигуру цветом подходящим к дизайну сайта

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

Осталось скачать иконку нажав кнопку СКАЧАТЬ ФАВИКОНКУ

Logaster — конструктор фирменного стиля: лого, фавикон, визитка, конверт, бланк, русские шрифты.

Как установить фавикон на сайт на хостинге

Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё.

Как установить фавикон на сайт Wix

Только на премиум тарифе. В Редакторе сайта слева нажмите Настройки > Фавикон > кликните Изменить. Выберите изображение из Мои фавиконы или нажмите Загрузить фото > кликните Выбрать фавикон > нажмите Готово. Фавикон может быть загружен в следующих форматах: .JPG и .PNG. размером 16 на16 пикселей.

Чтобы изменить фавикон в новом редакторе wix:

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

Как установить фавикон на blogger / blogspot

Дизайн.

Изменить

сохранить

Как создать favicon (фавикон) для сайта

О чем статья:

Что такое фавикон и каких форматов он бывает
Какие требования предъявляют разные платформы
С помощью каких инструментов можно создать иконку
Можно ли не создавать фавикон и как это повлияет на выдачу

Что такое фавикон

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.

Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются..

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

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

Фавиконки отображаются на пустой стартовой странице Google

Особенности фавиконов для разных платформ

Десктоп

Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.
Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение.

Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение

Mac OS и iOS Safari Web Clip

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

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

Размеры фавиконов для разных экранов устройств Apple:

	Ретина версия 6 и ниже	Ретина версия 7	Не ретина версия 6 и ниже	Не ретина версия 7
iPhone	144х144	120х120	57х57	60х60
iPad	144х144	152х152	72х72	76х76

Другие варианты

Android TV (до 2014 г. – Google TV)	Opera Coast
96х96	228х228

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы.

Adobe Photoshop или Figma

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

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки.

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

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

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

Как установить

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

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

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Запомните

Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.
Создавайте сразу две версии фавиконов – с прозрачным и непрозрачным фоном. Сегодня иконки отображаются на разных устройствах, разных платформах и в разных контекстах. Вы не всегда сможете спрогнозировать, как именно значок вашего сайта будет виден у пользователя.
Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.
Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.
Чтобы пользователи могли сохранять сайт как приложение на домашний экран мобильного устройства, создайте веб-манифест и свяжите его с кодом на сайте.
Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.
Наличие favicon может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче.

Материал подготовила Светлана Сирвида-Льорентэ.

иконок веб-сайтов — Creative Commons

Маски от Creative Stall под лицензией CC BY 3.0 используются для представления Искусства и Культуры в представленных произведениях на домашней странице

Search Applications от Rohith M S под лицензией CC BY 3.0 используется для представления Use & remix в полосе быстрых ссылок на домашней странице

Justice от Creative Stall под лицензией CC BY 3.0 используется для представления юридических инструментов и лицензий

Brain от Арджуна Адамсона под лицензией CC BY 3.0 используется для представления «Поделитесь своей работой» в полосе быстрых ссылок на главной странице

от Austin Condiff под лицензией CC BY 3.0 используется для представления открытого доступа

от Icon Island под лицензией CC BY 3.0 — это значок электронной почты в заголовке и на главной странице

Atom от Erin Agnoli под лицензией CC BY 3.0 используется для представления Science

Наушники от Молли Брамлет по лицензии CC BY 3.0 используется для представления музыки в избранных произведениях на домашней странице

Книга Майка Эшли под лицензией CC BY 3.0 используется для представления Книги в избранных произведениях на домашней странице

Видеоплеер Nikhil Dev под лицензией CC BY 3.0 используется для представления Учебных материалов в избранных произведениях на главной странице.

Изображение Хосе Кампоса под лицензией CC BY 3.0 используется для представления фотографий в избранных работах на домашней странице

График Николаса Менгини под лицензией CC BY 3.0 используется для представления государственных данных в избранных произведениях на домашней странице и в открытых данных

Куб Андрея Васильева под лицензией CC BY 3.0 используется для представления 3D-моделей в представленных работах на главной странице.

Microchip от Creative Stall под лицензией CC BY 3.0 используется для представления технологии

от Maciej Świerczek под лицензией CC BY 3.0 используется для представления инструментов

Документ Жуана Миранды под лицензией CC BY 3.0 используется для представления Учебных материалов в избранных произведениях на домашней странице

Gift by Nicolò Bertoncin, имеющий лицензию CC BY 3.0, используется для представления соответствующих подарков при пожертвовании и других способах дарения

Чек от Darin S под лицензией CC BY 3.0 используется для обозначения метода проверки при пожертвовании и других способов передачи

Growing Market от Icon Island под лицензией CC BY 3.0 используется для представления метода проверки при пожертвовании и других способов пожертвования

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

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

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

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

Плюсы использования иконок в следующем UX-дизайн-проекте

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

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

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

Бесплатные иконки ;
Торговые площадки с наборами иконок. На торговой площадке представлены иконки разных авторов. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары;
Значок материала набора и плоский значок набора;
Наборы иконок CSS. иконок CSS созданы с использованием — угадайте, что — CSS. Чтобы использовать их, просто скопируйте код на свою страницу;
Иконки шрифтов. Согласно Pluralsight, шрифты значков — это фактические шрифты, содержащие символы и глифы вместо букв или цифр.Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Иконочные шрифты обрабатываются браузерами как текст, поэтому вам необходимо нормализовать их, чтобы избежать проблем со сглаживанием текста, и поддерживаются почти во всех браузерах;
Иконки SVG. Масштабируемая векторная графика (SVG) — это формат векторной графики на основе XML, который можно масштабировать до любого размера без потери четкости. Они могут быть отображены с помощью CSS, тегов объектов, тегов изображений или встроены непосредственно в ваш HTML;
Наборы символов и пиктограмм .

Список лучших пакетов значков

Флатикон

Веб-сайт: https://www.flaticon.com/packs
Форматы и тип: PNG, SVG, EPS, PSD и BASE 64, Marketplace
Цена и лицензия: Ограниченный бесплатный план и премиум планы от 7,50 $ / месяц

Flaticon содержит полностью редактируемые векторы и может использоваться как для личных, так и для коммерческих проектов. FlatIcon содержит более 2,3 миллиона векторных иконок, сгруппированных в 51202 пакета.

Продукт имеет расширение Adobe, которое позволяет легко импортировать значки в Photoshop, Illustrator и After Effects. Если вы хотите использовать веб-шрифт вместо статических файлов для ваших значков, FlatIcon позаботится о преобразовании формата и сгенерирует веб-шрифт, готовый к использованию. Вы также можете настроить загруженные значки.

Основные факты:

более 90 000 иконок;
форматы SVG, EPS, PSD и PNG;
иконочных шрифтов;
Adobe Extension для CC Suite;
Лицензия Linkshare с дополнительными опциями; и
новых пакетов значков добавляются каждый месяц.

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

Джем Иконки

Web-сайт: https://jam-icons.com/
Формат и тип: SVG, CSS
Цена и лицензия: Free, MIT

Иконки Jam — это набор из 896 иконок ручной работы. Этот пакет значков поставляется с версиями SVG и шрифтов.Значки можно использовать как файлы SVG в ваших проектах в Интернете, печати или разработке приложений. Значки также можно использовать в качестве шрифта с заданными таблицами стилей CSS. Есть размеры 16px, 24px и 32px. Вы также можете выбрать заливку или обводку значков.

Пакет значков Fontisto

Веб-сайт: https://fontisto.com/
Формат и тип: CSS
Цена и лицензия: Бесплатно, MIT

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

На веб-сайте вы можете найти полную документацию и различные руководства по запуску и настройке продукта. Вы можете начать использовать продукт, просто вставив ссылку на свой сайт. Кроме того, вы можете использовать Fontisto с подходящими для вас менеджерами пакетов: npm, yarn, bower и т. Д.

Iconscout

Веб-сайт: https: // iconscout.com / icons
Формат и тип: SVG, PNG, ICO, ICNS, EPS, AI, PDF
Лицензия и цена: Бесплатные и Премиум планы от $ 11,99

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

Ключевые факты:

2,9 млн + иконок, 30 тыс. + Иллюстраций, 3 тыс. + 3D-ассеты, 2,8 тыс. Анимаций Lottie;
5000+ активов добавляются каждый день;
Iconscout Приложение доступно для использования прямо с панели инструментов;
Интегрированные плагины и инструменты, такие как Icon Editor и Icon Converter.

Iconmonstr

Web-сайт: https: // iconmonstr.com /
Формат и тип: SVG, EPS, PSD и PNG, Marketplace
Цена и лицензия: Бесплатно

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

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

Основные характеристики:

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

Библиотека значков материалов Pixsellz

Веб-сайт: https://icons.pixsellz.io/
Формат: SVG, EPS, PSD, PNG, FIG, Material design
Цена и лицензия: Бесплатно, Apache License Version 2.0

Огромный набор из более чем 1000 иконок, разделенных на 16 различных категорий. Бесплатный набор значков вдохновлен материальным дизайном и представлен в трех различных визуальных стилях — округлых, контурных и двухцветных. Набор доступен в 6 различных форматах файлов, так что вы можете использовать значки в предпочитаемом вами программном обеспечении для дизайна.

Основные характеристики :

3 стиля,
стили Figma,
1000+ иконок,
24 × 24 пикселя,
стили и символы эскиза,
16 категорий и
6 форматов файлов.

Entypo

Веб-сайт: http://www.entypo.com/
Формат и тип: SVG
Цена и лицензия: Бесплатно, Creative Common License 4.0

Entypo — это семейный набор иконок svg, тщательно созданный несколько лет назад Даниэлем Брюсом из Швеции. Эти значки великолепны: когда дело доходит до бесплатных услуг, они первоклассные. Продукт поставляется в формате SVG с 411 значками, бесплатно с лицензией Creative Commons.

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

Злые иконы

Веб-сайт: https://evil-icons.io/
Формат и тип: SVG, Sketch
Цена и лицензия: Free, MIT

Этот пакет огромен, и в нем есть все, включая SVG и исходные файлы. Это означает, что вы можете загружать SVG вместе с файлами для Illustrator и файлами .sketch для Sketch.

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

Иконки Streamline

Веб-сайт: https://streamlineicons.com/
Формат и тип: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Цена и лицензия: Бесплатно до $ 411

Streamline Icons — еще один красивый и легко адаптируемый бесплатный набор иконок на веб-рынке. Инструмент разделен на 53 категории с более чем 30000 векторными иконками.

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

У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать значки прямо из браузера.

Основные характеристики:

организовано более 30000 векторных иконок;
Smart Strokes для изменения толщины контура;
Эскиз, форматы AI, EPS, PDF, PNG, SVG;
веб-приложение для поиска и редактирования значков;
каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и жирный.

Smashicons

Веб-сайт: https://smashicons.com/
Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
Цена и лицензия: Бесплатно до $ 149

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

Основные характеристики:

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

Иконки8

Веб-сайт: https://icons8.com/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Лицензия Good Boy, бесплатно до 24 долларов в месяц

Набор значков от Icons8 включает более 1 20000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей.Иконки созданы, чтобы имитировать внешний вид конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Вы можете использовать веб-редактор перед загрузкой значков в свою систему.

Основные характеристики:

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

Icomoon

Веб-сайт: https://icomoon.io/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Бесплатно до 139 долларов в месяц

Icomoon представляет собой полноценный инструмент для иконографии и управления иконками. В продукте есть качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную на сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI.Набор иконок также постоянно обновляется его создателями.

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

Основные характеристики :

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

Glyphish

Web-сайт: http: // www.glyphish.com/
Формат и тип: SVG, PNG, PDF, PSD, Glyph, Icon font
Лицензия и цена: Creative Common Attribution, 99 долларов США за весь срок службы

Glyphish предлагает множество различных пакетов значков. Каждый пакет поставляется в различных форматах, включая PNG, SVG, PSD и AI. Набор иконок доступен за 99 долларов. Бесплатная демоверсия включает 50 иконок. Все иконки легко редактируются дизайнерами.

Основные характеристики:

иконок для нескольких платформ: iOS, Android, Web, Windows;
набор из 50 бесплатных иконок;
простое перетаскивание в Xcode;
значков, специально созданных для дисплеев Apple Retina.

Иониконы

Веб-сайт: https://ionicons.com/
Формат и тип: SVG и Webfont, шрифт Icon
Лицензия: MIT

Команда Ionic решила выпустить свои значки в виде веб-шрифта под названием Ionicons. Естественно, они абсолютно бесплатны и доступны на GitHub. Вы даже можете добавить эти значки прямо на свой сайт, используя версию таблицы стилей для CDN. Он полностью поддерживает SVG и веб-шрифты.

Основные характеристики:

совершенно бесплатно,
простая установка путем копирования и вставки ссылки,
поставляется в виде веб-шрифта,
нестандартных размеров,
более 1100 элементов.

Угловые значки материалов

Веб-сайт: https://material.io/resources/icons/?style=baseline
Формат и тип: SVG, Webfont, Material design
Лицензия и цены: бесплатно, Apache License 2.0

Material Icon — это бесплатный набор значков от Google. Чтобы обеспечить удобочитаемость и ясность, эти значки были оптимизированы, чтобы они отлично смотрелись на всех платформах и дисплеях. Эти значки материалов абсолютно бесплатны и доступны на GitHub.Этот набор значков огромен и включает более 1000 значков, охватывающих широкий спектр функций интерфейса.

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

Линейные значки

Веб-сайт: https://linearicons.com/
Формат и тип: SVG, Webfont, Icon font
Лицензия и цена: Бесплатно до $ 59, Common Creative License

Linear Icon pack — один из самых популярных и лучших наборов значков для личных или коммерческих целей.Пакет линейных значков доступен как в бесплатной, так и в премиальной версиях. Бесплатная версия этого замечательного пакета значков распространяется под лицензией Creative Common. Существуют также различные пакеты, которые вы можете выбрать в соответствии с вашими потребностями, например, Desktop Package.

Основные характеристики :

CloudFront CDN;
доступна бесплатная версия;
имеет разные форматы: SVG, PDF, Webfont.

Перья

Web-сайт: https: // fedicons.com /
Формат и тип: SVG, Webfont, Iconfont
Лицензия и цена: бесплатно, лицензия MIT

Feather — один из самых популярных наборов иконок с открытым исходным кодом. Это значки с открытым исходным кодом, созданные в сетке 24X24. Иконки доступны в формате SVG. Он находится под лицензией Массачусетского технологического института, и в нем содержится около 250+ значков с открытым исходным кодом.

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

Iconfinder

Веб-сайт: https://www.iconfinder.com/
Формат: SVG, PNG, ICO, Marketplace
Лицензия и цена: От 9 до 49 долларов в месяц

Iconfinder — один из самых популярных ресурсов иконок в сети. Он предлагает более 4 миллионов значков, предоставляя пользователям множество вариантов поиска, включая формат значков, цену, размер, фон и т. Д. Существует несколько ежемесячных планов оплаты — от 9 до 49 долларов. Вы также можете выбрать систему «плати по мере использования».

доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, а их размеры варьируются от 16 × 16 до 512 × 512. Вы также можете поработать с некоторыми из лучших дизайнеров сайта, если не можете найти что-то, что вам нравится, или просто хотите, чтобы пользовательские значки были разработаны специально для вас и вашего бренда.

Основные характеристики:

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

Проект существительное

Веб-сайт: https://thenounproject.com/
Формат и тип: SVG, PNG, Marketplace
Лицензия и цена: Creative Commons License, От $ 39.99

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

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

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

Основные характеристики:

более 150 000 иконок;
форматы SVG, PNG;
инструменты поиска и обнаружения;
Creative Common License с дополнительными опциями;
бесплатные и платные варианты загрузки;
новых иконок загружаются почти ежедневно.

Иконки Fontawesome

Веб-сайт: https://fontawesome.com/icons
Формат и тип: SVG, PNG, шрифт Icon, Marketplace
Лицензия и цена: SIL OFL 1.1

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

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

Основные характеристики:

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

Линейные иконки

Веб-сайт: https://lineicons.com/
Формат и тип: SVG, веб-шрифт, шрифт Icon
Лицензия и цена: Бесплатно

LineIcons также предоставляет бесплатный CDN с понятной документацией, что упрощает начало работы.

Этот набор значков полностью бесплатный и содержит более 450 линейных значков. Он охватывает все необходимые для проекта значки из разных категорий. LineIcons также предоставляет бесплатный CDN и понятную документацию, чтобы легко начать работу.Он поставляется с двумя различными масштабируемыми пакетами — WebFonts и файлами SVG, которые вы можете использовать в зависимости от потребностей вашего проекта.

Основные характеристики:

450+ бесплатных иконок,
файлов SVG,
готовых веб-шрифтов,
бесплатного CDN.

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

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

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

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

Возможно, вам понравятся эти статьи:

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

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

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

Что такое доступные значки?

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

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

Вот пример из Google Maps.

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

Источник

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

Источник

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

Например, пользователи могут не заметить даже вездесущий значок гамбургера в меню мобильных устройств. Фактически, A / B-тест показал лучшее взаимодействие и конверсию, когда к значку было добавлено слово «Меню».

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

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

Источник

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

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

Источник

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

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

Готовы добавить на свой сайт иконки со специальными возможностями? Самый простой способ начать — скачать готовые иконки.

Готовые наборы иконок

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

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

Один из самых известных наборов иконок — Font Awesome, который содержит тысячи иконок. Давайте посмотрим на это поближе.

Доступные значки с использованием Font Awesome

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

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

Источник

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

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

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

Как сделать значки доступными

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

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

Проверьте размер значка в программе и при необходимости отрегулируйте его перед экспортом. (Размеры в мм могут подходить для полиграфического дизайна, но могут сделать ваши значки слишком большими.)
Измерения в пикселях больше подходят для веб-дизайна.Нередко иконки имеют квадратные размеры. (Стандартные размеры в пикселях: 16×16, 32×32, 64×64, 128×128, 256×256 или 512×512.)
Убедитесь, что размер документа соответствует размеру вашего значка.
Обычно при экспорте значков можно выбрать один из нескольких форматов файлов. Для использования в Интернете наиболее распространенными форматами файлов являются PNG или SVG. Поскольку сделать значки PNG проще, давайте посмотрим на них.
Если вы планируете добавить значок к фону, убедитесь, что он будет достаточно контрастным.

Доступные значки в формате PNG

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

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

Источник

Если ваш значок связан, используйте замещающий текст, указывающий место назначения ссылки.

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

Источник

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

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

Напишите нам по электронной почте

Источник

Начните делать ваши веб-иконки доступными

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

U.С. Система веб-дизайна (USWDS)

accessibility_new

available_forward

остаток на счету

account_box

account_circle

добавлять

add_circle

add_circle_outline

тревога

Альтернативный адрес электронной почты

объявление

arrow_back

arrow_downward

arrow_drop_down

arrow_drop_up

arrow_forward

arrow_upward

api

оценка

прикрепить файл

attach_money

авто-обновление

рюкзак

ванна

постельные принадлежности

закладка

сообщение об ошибке

строить

calendar_today

кампания

Отдых на природе

отменить

чат

чек об оплате

check_box_outline_blank

check_circle

check_circle_outline

гардероб

clean_hands

одежда

Закрыть

closed_caption

облако

код

комментарий

connect_without_contact

строительство

строитель

contact_page

content_copy

коронавирус

кредитная карта

палуба

Удалить

device_thermostat

направления

direction_bike

Directions_bus

Directions_car

direction_walk

просьба не беспокоить

do_not_touch

drag_handle

эко

редактировать

электрические_услуги

emoji_events

ошибка

error_outline

событие

expand_less

expand_more

facebook

перемотка вперед

fast_rewind

любимый

избранное_бордер

скачать файл

file_present

файл загружен

filter_alt

filter_list

отпечаток пальца

первая страница

флаг

фликр

полет

наводнение

папка

folder_open

format_quote

format_size

Форум

github

вид сетки

group_add

группы

слух

помощь

help_outline

highlight_off

история

дом

больница

отель

песочные часы пустые

ураган

удостоверение личности

изображение

Информация

info_outline

идеи

instagram

клавиатура

этикетка

язык

Предыдущая страница

запуск

лампочка

lightbulb_outline

ссылка на сайт

link_off

список

local_cafe

local_fire_department

local_gas_station

local_grocery_store

local_hospital

local_laundry_service

local_library

local_offer

local_parking

local_pharmacy

local_police

local_taxi

location_city

Местоположение на

замок

lock_open

lock_outline

авторизоваться

выйти

петля

Почта

mail_outline

карта

маски

медицинские услуги

меню

military_tech

more_horiz

more_vert

мое местонахождение

navigate_before

navigate_next

navigate_far_before

navigate_far_next

рядом со мной

уведомления

notifications_active

notifications_none

notifications_off

парк

люди

человек

домашние питомцы

Телефон

фото камера

Распечатать

priority_high

общественный

push_pin

radio_button_unchecked

дождь

reduce_capacity

Удалить

отчет

ресторан

Новостная лента

Safety_divider

дезинфицирующее средство

save_alt

суровая погода

график

школа

наука

поиск

безопасность

Отправить

sentiment_dissatisfied

sentiment_neutral

sentiment_satisfied

sentiment_satisfied_alt

sentiment_very_dissatisfied

настройки

доля

щит

корзина покупателя

снег

мыло

social_distance

sort_arrow

проверка орфографии

звезда

star_half

star_outline

хранить

служба поддержки

support_agent

text_fields

thumb_down_alt

thumb_up_alt

таймер

toggle_off

toggle_on

тема

торнадо

перевести

trending_down

trending_up

твиттер

отменить

разворачиваться

развернуть_больше

Обновить

загрузить файл

проверено

проверенный_пользователь

видимость

visibility_off

volume_off

предупреждение

стирка

вай-фай

работай

YouTube

приблизить

zoom_out_map

уменьшить

24 лучших идей для веб-сайтов с иконками

О наших иконах Вдохновение для веб-дизайна

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

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

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

Как дизайн веб-сайтов с иконками может помочь вашему бизнесу?

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

Как вы можете больше рассказать о своем бренде, меньше размещая на странице?

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

Какие компании должны использовать дизайн веб-сайтов с иконками?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На веб-страницах отсутствуют графические значки — браузеры

14.07.2020
4 минуты на чтение

В этой статье

Важно

Настольное приложение Internet Explorer 11 будет прекращено и не будет поддерживаться 15 июня 2022 г. (список возможностей см. В разделе часто задаваемых вопросов).Те же самые приложения и сайты IE11, которые вы используете сегодня, могут открываться в Microsoft Edge в режиме Internet Explorer. Узнайте больше здесь.

Когда вы загружаете веб-приложения, которые используют значки шрифтов, вы замечаете, что значки не отображаются правильно в Internet Explorer. Эта проблема может возникать на веб-страницах, которые используют такие популярные источники значков шрифтов, как font-awesome, @ font-face, значки графической оболочки и шрифты GDI. В этой статье описаны некоторые из этих сценариев, потенциальные причины проблемы и шаги, которые можно предпринять для решения проблемы.

Исходная версия продукта: Internet Explorer
Оригинальный номер базы знаний: 4551929

Неполный список сценариев

Отсутствуют значки графической оболочки веб-сайта.
Отсутствуют значки веб-шрифтов.
Отсутствуют иконки Font-awesome.
Шрифты блокируются при запуске Internet Explorer 11 в Windows 10.
Отсутствуют значки Office 365 — правая панель навигации не отображает значки.
CRM не отображаются значки.
Правая панель навигации Yammer не отображает значки.
Иконки MSN отсутствуют.
Значки веб-сайта Microsoft.com отсутствуют.
Веб-значки отсутствуют при просмотре веб-сайтов с помощью Internet Explorer 11 в Windows 7 (см. Раздел «Причина 2 — Разрешить загрузку шрифтов» GPO отключен).
сайт OneDrive в SharePoint колесо настроек отсутствует на панели навигации.

Microsoft рекомендует пользователям перейти на Microsoft Edge, чтобы избежать этих сценариев.Если вам необходимо продолжить использование Internet Explorer, вы можете использовать следующие решения для устранения проблемы, в зависимости от причины.

Причина 1 — Функция блокировки ненадежных шрифтов настроена в Windows 10

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

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

CSS3111: @ font-face обнаружил неизвестную ошибку

Оболочка-иконы-0.4.0.eot

CSS3114: @ font-face не удалось проверить разрешение на внедрение OpenType. Разрешение должно быть устанавливаемым.

MWFMDL2.ttf

Примечание

Вы можете открыть Инструменты разработчика, нажав клавишу F12 на клавиатуре.

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

Случай 1: функция блокировки ненадежных шрифтов, включенная через групповую политику

Для следующего раздела реестра задано значение 1000000000000 :

HKEY_LOCAL_MACHINE \ SOFTWARE \ Policies \ Microsoft \ Windows NT \ MitigationOptions

Случай 2: функция блокировки ненадежных шрифтов, включенная через реестр

Для следующего раздела реестра задано значение 1000000000000 :

HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Control \ Session Manager \ Kernel \ MitigationOptions

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

Дополнительную информацию см. В следующем документе:

Причина 2 — Разрешить загрузку шрифтов GPO отключен

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

Этот GPO можно настроить. По умолчанию он включен для следующих зон Internet Explorer:

Интернет-зона
Зона местной интрасети
Надежные сайты Зона
Зона ограниченного доступа

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

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

Важно

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

Для получения дополнительных сведений о настройке Разрешить загрузку шрифтов с помощью групповой политики перейдите на следующие веб-страницы с информацией о политике:

Конфигурация компьютера: https://gpsearch.azurewebsites.net/#746

: https://gpsearch.azurewebsites.net/#747

Подсказка

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

Свой значок для сайта

Фавиконки в 2021 году

Значок для сайта в 2017 году. Старая версия

Дополнительные возможности

Значки для iPhone, iPad

HTML5

Программы для создания ICO-файлов

Дополнительная информация

Реклама

Иконки для сайта: какие бывают, зачем нужны и где их брать?

Содержание

Какие бывают иконки?

Зачем нужны иконки на сайте?

Где взять иконки для сайта?

Иконочные шрифты

Иконки в формате изображений

Сайты с бесплатными иконками и логотипами – База знаний Timeweb Community

Иконки

Логотипы и favicon

Как добавить иконку сайта в адресную строку браузера?

Виджет значков социальных сетей — Справка

Доступные значки

Виджет значков социальных сетей

Добавление виджета со значками социальных сетей

Изменение порядка значков

Настройка значков соцсетей

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

Примеры и шаблонные изображения

Часто задаваемые вопросы

Иконка для сайта — Создать свой сайт бесплатно

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

Делаем favicon онлайн

Как установить фавикон на сайт на хостинге

Как установить фавикон на сайт Wix

Как установить фавикон на blogger / blogspot

Как создать favicon (фавикон) для сайта

Что такое фавикон

Формат и стили фавиконов

Особенности фавиконов для разных платформ

Десктоп

Andriod, Chrome и Opera

Mac OS и iOS Safari Web Clip

Размеры фавиконов для разных экранов устройств Apple:

Другие варианты

Как создать?

Как установить

Запомните

иконок веб-сайтов — Creative Commons

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

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

Возможно, вам понравятся эти статьи:

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

Что такое доступные значки?

Готовые наборы иконок

Доступные значки с использованием Font Awesome

Как сделать значки доступными

Доступные значки в формате PNG

Начните делать ваши веб-иконки доступными

U.С. Система веб-дизайна (USWDS)

24 лучших идей для веб-сайтов с иконками

О наших иконах Вдохновение для веб-дизайна

Как дизайн веб-сайтов с иконками может помочь вашему бизнесу?

Какие компании должны использовать дизайн веб-сайтов с иконками?

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

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

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

На веб-страницах отсутствуют графические значки — браузеры

В этой статье

Неполный список сценариев

Причина 1 — Функция блокировки ненадежных шрифтов настроена в Windows 10

Причина 2 — Разрешить загрузку шрифтов GPO отключен

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

Рубрики