Иконки сайта: Скачивайте 158k бесплатных иконок + иллюстрации, фото и музыку

Free Icons | Бесплатные иконки для сайта

Рады представить вам 30 иконок для обозначения жестов в использовании сенсорных устройств

— PSD + EPS vector files
— PNG в 5 разных размерах: 48px, 64 px, 128px, 256px and 512px
Скачать

Новые иконки 128×128, 256×256, 48×48, 512×512, 64×64, EPS, PSD

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

Читать полностью…

Новые иконки AI, EPS

Пушистый сайт? Эти пушистые иконки социальных медиа будет идеальными для вашего сайта.

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

Читать полностью…

Новые иконки PNG

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

Скачать

Без рубрики

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

Читать полностью…

Новые иконки PNG

Удивительный набор из 350 пиксельных иконок, которые идеально подходят для приложений и веб-сайтов.

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

Читать полностью…

Новые иконки PNG

7 футбольных иконок к чемпионату Европы!

Скачать
Скачать с templay.de

Новые иконки 128×128, 64×64, PNG

Это безусловно один из лучших бесплатных сетов социальных иконок, которые вы когда либо видели в интернете!

Скачать
Скачать с templay.de

Новые иконки 128×128, 32×32, 64×64

Представляем вам 28 бесплатных иконок для веб-дизайнеров и блоггеров.

Скачать
Скачать с templay.de

Новые иконки 16×16, 32×32

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: icondesignlab

Бесплатные иконки для вашего продукта (Большой список)

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

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

Бесплатные иконки

Эти 5 сайтов являются золотым рудником для дизайнеров, которые хотят сохранить для себя больше времени.

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

The Noun Project – Почти миллион бесплатных иконок созданных мировым дизайнерским сообществом.

Flat Icon – Самая большая база данных бесплатных значков.

Find Icons – Найдите бесплатные значки по ключевым запросам или используйте кнопку “surprise me”, чтобы получить что-то совершенно случайное — к тому же совершенно бесплатно.

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

Icon Gallery – В настоящее время, сервис насчитывает более 404 тыс. бесплатных иконок и значков. Дизайнеры разных профилей могут искать и использовать лицензионные значки для использования в коммерческих целях.

---

Бесплатные пакеты значков для web-дизайна

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

Flat Graphic Design Icons – 36 бесплатных иконок, идеально подходящих для построения инфографики, пользовательских интерфейсов и панелей инструментов.

Metro UI Icon Set – 725 бесплатных значков (512×512) для веб-браузеров, операционных систем и популярных веб-сайтов.

Flat Icons (PSD) – Красочные бесплатные иконки от дизайнера Пьера Бородина.

48 Flat Designer Icons – бесплатный набор значков — 48 офисных, туристических и социальных иконок. (Вам нужно будет ввести свой адрес электронной почты, чтобы произвести загрузку).

168 Custom Interface Icons – В пакет входят значки в 3 стилях (выделенные, заполненные и цветные).

Plex – 119 бесплатных значков, созданных для соответствия с продуктами Google.

Free Flat Style Icon Pack – Идеально подходит для работы с векторными стилями.

Varient Flat Custom CS Icons – Идеальный пакет значков от Тома Ньютона.

Hex Icons Pack – 170 бесплатных значков, плюс 45 игровых иконок.

Climacons – 75 иконок климатической тематики от Адама Уиткрофта.

Free Line Icon Set – 38 значков, некоторые из них – значки самых популярных графических редакторов.

Free Flat Icons – Простые, элегантные иконки от дизайнера Яна Дворжака.

Publicons – Коллекция тонко-настроенных значков для издательской и платформенной графики от Tumblr до Drupal.

Product Icons – Содержит значки для Dribbble, Pinterest и других приложений.

Elegant Mobile App Icons – Полностью редактируемые значки для мобильных приложений.

---

Бесплатные иконки для социальных сетей

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

Social Icons from Flat Icons – Бесплатный пакет плоских значков для социальных сетей. Значки являются лицензированными, могут применяться для коммерческого использования.

Retina-ready Circle Flat Icons – 24 высококачественных бесплатных сетчатых значков для социальной сети.

24 Circle Social Media Icons – Не квадратные значки, для пользователей избегающих острых углов.

Social Icons from Icons8 – Сервис позволяет искать значки — от WhatsApp до Paper Plane.

New Social Media Icons – Набор из 9 бесплатных растровых значков в формате PNG.

Buttonz – Красочные иконки с тенью для использования в социальных сетях.

Social Network Buttons – Яркие и крупные круглые иконки.

Social Media Icon Stickers – Иконки-стикеры для социальных сетей.

Premium Flat Social Icon Set – 40 круглых изменяемых по размеру иконок.

Triangle Vector Icons – 20 бесплатных векторных значков.

Social Media Badges – 20 ярких значков.

Иконка сайта.

Что такое иконка сайта?

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

ico. которое можно увидеть в адресной строке, «закладках», «избранном» «истории», заголовках страниц в браузерах,

а также в результатах поиска поисковой системы Яндекс

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

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

Как подключить иконку к своему сайту?

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

Напомню, тег <link> имеет атрибуты:

• href — Путь к файлу.
• rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
• shortcut icon — Определяет, что подключаемый файл является иконкой.
• stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml — Файл в формате XML для описания ленты новостей.
• type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

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

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

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

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=»../graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>

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

Как самостоятельно изготовить файл favicon.

ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

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

Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

Ну и третий способ:

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

Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

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

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

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:

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

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



Для этого заходим в административную панель, вкладка Дизайн. Видим в левом верхнем углу гаджет Значок. Нажимаем «Изменить», — откроется окно Настройка значка Загружаем свой фавикон. И нажимаем сохранить.

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

Как изменить иконку (favicon) для сайта?

Как изменить иконку (favicon) для сайта?

В инструкции рассмотрены следующие вопросы:

Зачем нужен favicon для сайта?

Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:

Вот где можно увидеть такую иконку:

• Закладки и вкладки браузера
• Результаты поиска Яндекс, Google
• Каталоги и рейтинги, которые загружают favicon сайтов
• Панель задач и рабочий стол операционной системы

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

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

По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

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

При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.

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

Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (корень — это то, что вы видите первым при входе в файловый менеджер не переходя в другие директории):

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

Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт. ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.

Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152. png">

В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />

Как изменить иконку (favicon) для сайта?

Как добавить иконку (favicon) на сайт?

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

Что такое favicon

Favicon — это устоявшееся в интернете сокращение от английского словосочетания favorites icon, что можно вольно перевести как «иконка для избранного». Это небольшое изображение размером 16 на 16 пикселей, которое выводится рядом с заголовком сайта на вкладках браузера, в сохраненных закладках и в некоторых поисковых системах.
 
Favicon задумывалась как способ быстрой идентификации ресурса, но в итоге они стали действенным инструментом раскрутки сайтов, привлечения к ним внимания. Красивая и аккуратная иконка рядом с названием страницы в выдаче поисковой системы позволяет выделиться на фоне конкурентов и получить нового посетителя.

Как добавить Favicon

Прежде чем добавлять favicon на сайт, его необходимо создать. Есть три основных способа сделать это.
• Нарисовать иконку с нуля.
• Конвертировать готовое изображение в иконку.
• Заказать отрисовку уникальной иконки у дизайнера.
Для первых двух способов вам понадобится либо специальный графический редактор, либо онлайн-сервис, предназначенный для создания иконок. Так или иначе, результатом этого этапа должен стать графический файл с названием favicon.ico разрешением 16 на 16 пикселей.
 
После этого остается лишь правильно загрузить иконку. Её нужно поместить в корень сайта — папку на сервере, в которой лежат все файлы ресурса. Сделать это можно по протоколу FTP или через панель управления хостингом. В случае работы на локальном сервере, можно просто скопировать и вставить файл в нужную папку.
 
Может возникнуть резонный вопрос: как добавить иконку на сайт, если по каким-то причинам копирование файла в корневую директорию невозможно или нежелательно? Такое бывает, если ресурс работает на какой-либо CMS (системе управления контентом). Выбор папки, в которую следует поместить иконку, зависит от используемой системы. Обычно это директория шаблона оформления. В его коде уже должно быть указание на нестандартное расположение фавикона, но если его нет, следует добавить код между тегами и в файле, описывающем структуру шапки страницы.
 
После всех проделанных действий достаточно будет перезагрузить страницу (иногда может потребоваться очистить кэш), чтобы увидеть иконку в заголовке браузера. В поисковых системах изменения могут отобразиться не сразу, а лишь спустя какое-то время. Это нормально и не стоит переживать: если иконка видна в шапке, вы все сделали правильно.

иконок веб-сайтов — скачать бесплатно, PNG и SVG

иконок веб-сайтов — бесплатно, PNG и SVG

Иконки

Фото

Музыка

Иллюстрации

Поиск

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

Коллекция

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт

+

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция Me Веб-сайт

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

Веб-сайт резюме

+ Коллекция

+ Коллекция

Веб-сайт резюме

+ Коллекция

+ Коллекция

Аналитика веб-сайта

+ Коллекция

Любимый веб-сайт

+ Коллекция

Любимый веб-сайт

+ Коллекция

Интеллектуальный веб-сайт

+ Коллекция

Статистика веб-сайта

+ Коллекция

+ Коллекция

+ Коллекция

Аналитика веб-сайта

+ Коллекция

Статистика веб-сайта

+ Коллекция

Интеллектуальный веб-сайт

+ Коллекция

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

+ Коллекция

Конструктор веб-сайтов

+ Коллекция

Веб-сайты Ite Builder

+ Коллекция

иконок сайта — скачать бесплатно, PNG и SVG Иконки сайта

— скачать бесплатно, PNG и SVG

Иконки

Фото

Музыка

Иллюстрации

Поиск

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

+ Коллекция

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

+ Коллекция

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

+ Коллекция

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

+ Коллекция

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

+ Коллекция

Гарантия качества на площадке

+ Collection

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

+ Collection

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

+ Collection

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

+ Collection

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

+ Collection

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

+ Collection

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

+ Коллекция

Sitecore

+ Коллекция

Sitecore

+ Коллекция

Sitecore

+ Коллекция

Sitecore

+ Коллекция

Вкладка

+ Коллекция

+ Коллекция

+ Коллекция

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab

+ Collection

Tab Unselected

+ Collection

Tab Unselected

+ Collection

Tab Unselected

+ Tab

Unselected

Вкладка Невыделена

+ Коллекция

Вкладка Невыделена

+ Коллекция

Вкладка

Невыделена

+ Коллекция

Globe Network

+ Collection

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

+ Collection

Коллекция Globe Восстановить страницу

+ Colle ction

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

+ Collection

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

+ Collection

Globe Network

+ Collection

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

+ Collection

Globe Network

+ Collection

Globe Network

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

+ Коллекция

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

+ Коллекция

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

+ Коллекция

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

+ Коллекция

Globe Network

+ Коллекция

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

Сеть

+ Коллекция

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

+ Коллекция

Глобус Сеть

+ Коллекция

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

+ Коллекция

Глобус Сеть

+ Коллекция

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

+ Коллекция

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

+ Коллекция

+ Коллекция

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

+ Коллекция

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

+ Коллекция

20 мест, где можно получить бесплатные значки веб-сайтов

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



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

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

Download Free

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

Тогда у вас есть множество доступных форматов файлов. Большой вопрос здесь в том, что вам подходит? Наиболее распространенными предлагаемыми форматами являются PNG и SVG. Многие из них также доступны в виде фрагментов HTML-кода. PNG — это в основном растеризованные изображения, и если они не подходят по размеру для текущего проекта, вы потеряете качество при их изменении. SVG имеют тенденцию попадать в золотую середину, поскольку они полностью масштабируемы, что дает вам возможность регулировать размер по мере необходимости в вашем любимом инструменте прототипирования.

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

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

Вы обнаружите, что значки на Streamline Icons бывают трех разных типов или «веса». Отмечена разница между их светлыми, обычными и жирными значками, более светлые — более геометрические и минималистичные, в отличие от жирных значков с глифами, которые больше напоминают рекомендации Apple по человеческому интерфейсу.

Вы можете загружать значки с этого сайта в пакетах в формате SVG, PNG или PSD, и существует не менее 10 500 разновидностей значков трех разных весов, разделенных на 53 категории.Вы обязательно найдете здесь то, что вам нужно!

Загружаемый формат: SVG, PNG и PSD

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

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

Если вы ищете идеальный набор плоских иконок для своего веб-сайта, даже если он ориентирован на нишевый рынок, Flat Icon поможет вам.

Загружаемый формат: SVG и PNG

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

Еще одной интересной особенностью этого веб-сайта является их бесплатный редактор изображений, который позволяет изменять размер, перекрашивать и даже перерисовывать каждое изображение по своему вкусу перед загрузкой в ​​формате SVG — приятное прикосновение!

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG и HTML

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

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

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

Загружаемый формат: SVG, PNG и PNG

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

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

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG и HTML

Иконки, которые вы можете найти на Тильде, просты, минималистичны и идеально подходят для любого типа веб-сайта и практически любой ситуации. Без заливки и геометрический дизайн, большинство этих значков представлены в 2D, а некоторые в 3D, в зависимости от категории, что подводит нас к одному из самых привлекательных аспектов этого веб-сайта — предлагается 43 поразительные категории!

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

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

Загружаемый формат: SVG

Fontello предоставляет интересный список бесплатных значков веб-сайтов для использования в качестве шрифтов значков в любом месте вашего веб-сайта или мобильного веб-приложения.Фактически, у вас есть доступ к целому ряду различных наборов иконок от разных авторов, таких как Fontelico, Font Awesome, Modern Pictograms, Typicons и многих других.

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

Загружаемый формат: SVG

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

Эти бесплатные фирменные значки веб-сайтов отлично подходят, если вы хотите иметь возможность связывать своих пользователей с внешним веб-сайтом или приложением, иметь возможность делиться своим контентом через социальные сети или если вы просто хотите, чтобы значки отображали определенное программное обеспечение на вашей веб-странице. К таким значкам относятся все, от Hubspot, Microsoft PowerPoint и Slack до Tinder, Instagram и Tesla.Вы обязательно найдете то, что вам нужно!

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG, PSD и EPS

Если вы ищете что-то немного необычное и красочное, чтобы привлечь внимание пользователей, почему бы не попробовать коллекцию Ballicon из 36 круглых плоских значков с легким градиентом?

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

Загружаемый формат: SVG, PNG и PSD

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

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

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG, PNG и CSS

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

Paulolyslager.com позволяет бесплатно загрузить большой набор этих бесплатных значков веб-сайтов в форматах SVG и PNG.

Загружаемый формат: SVG и PNG

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

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

Загружаемый формат: SVG

И последнее, но не менее важное: если вы хотите привнести немного черного юмора на свой веб-сайт, почему бы не попробовать набор Nasty Icons?

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

Загружаемый формат: AI и EPS

Создавайте отличные веб-сайты с Justinmind

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

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

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

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

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

иконок — манифест веб-приложения

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

  "значки": [
  {
    "src": "icon / lowres.webp",
    "размеры": "48x48",
    "тип": "изображение / webp"
  },
  {
    "src": "icon / lowres",
    "размеры": "48x48"
  },
  {
    "src": "icon / hd_hi.ico ",
    "размеры": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon / hd_hi.svg",
    "размеры": "72x72"
  }
]  

Объекты изображения могут содержать следующие значения:

Член	Описание
размеры	Строка, содержащая размеры изображения, разделенные пробелами.
src	Путь к файлу изображения. Если src является относительным URL-адресом, базовый URL-адрес будет URL-адресом манифеста.
тип	Подсказка относительно типа носителя изображения. Назначение этого члена — позволить пользовательскому агенту быстро игнорировать изображения с типами мультимедиа, которые он не поддерживает.
назначение	Определяет цель изображения, например, если изображение предназначено для некоторой специальной цели в контексте ОС хоста (т. Е. Для лучшей интеграции). цель может иметь одно или несколько из следующих значений, разделенных пробелами: монохромный : пользовательский агент может представить этот значок там, где требуется монохромный значок со сплошной заливкой.Информация о цвете в значке отбрасывается, и используются только альфа-данные. Затем значок может использоваться пользовательским агентом как маска поверх любой сплошной заливки. maskable : изображение разработано с учетом масок значков и безопасной зоны, так что любая часть изображения за пределами безопасной зоны может быть проигнорирована и замаскирована пользовательским агентом. любой : пользовательский агент может отображать значок в любом контексте (это значение по умолчанию).

Таблицы BCD загружаются только в браузере

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

Masks от 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 от Arjun Adamson под лицензией 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 используется для представления государственных данных в избранных произведениях на домашней странице и в открытых данных.

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

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

Гаечный ключ

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

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

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

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

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

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

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

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

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

Добавить

[addme] [circleaddme] [roundaddme]

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

[appstorealt] [circleappstorealt] [Roundappstorealt]

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

[appstore] [circleappstore] [roundedappstore]

Яблоко

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

Blip

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

Blogger

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

Закладка

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

Кино

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

Знак доллара

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

Стрелка вниз

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

Эл. Почта

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

Etsy

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

Facebook

[facebook] [circlefacebook] [roundedfacebook]

Питатель

[Feedburner] [Circlefeedburner] [Roundfeedburner]

Пленка

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

Flickr

[flickr] [circleflickr] [Roundflickr]

Foursquare

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

Googleplay

[googleplay] [circlegoogleplay] [roundedgoogleplay]

Googleplus

[googleplus] [circlegoogleplus] [roundedgoogleplus]

Googletalk

[googletalk] [circlegoogletalk] [Roundgoogletalk]

Значок Gowalla

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

Сердце

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

iMessage

[imessage] [circleimessage] [roundimessage]

Instagram

[instagram] [circleinstagram] [roundinstagram]

iTunes

[itunes] [circleitunes] [roundeditunes]

Lastfm

[lastfm] [circlelastfm] [roundedlastfm]

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

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

Linkedin

[linkedin] [circlelinkedin] [roundlinkedin]

Карта

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

Значок карты

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

Встреча

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

MySpace

[myspace] [circlemyspace] [roundmyspace]

PayPal

[PayPal] [circlepaypal] [Roundpaypal]

Photobucket

[photobucket] [circlephotobucket] [roundphotobucket]

Picasa

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

Pinterest

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

Подкаст

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

Запись

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

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

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

RSS

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

Поделиться

[sharethis] [circleharethis] [roundsharethis]

Skype

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

Slideshare

[slideshare] [circlelideshare] [Roundslideshare]

Soundcloud

[soundcloud] [circleoundcloud] [roundsoundcloud]

Spotify

[spotify] [circlepotify] [roundspotify]

Звезда

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

Стол проекта

[tableproject] [circletableproject] [roundtableproject]


Город

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

Tumblr

[tumblr] [circletumblr] [roundedtumblr]

Twitter Bird

[twitterbird] [circletwitterbird] [roundedtwitterbird]

Твиттер

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

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

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

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

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

Vimeo

[vimeo] [circlevimeo] [Roundvimeo]

WordPress

[wordpress] [circlewordpress] [roundedwordpress]

Yelp

[yelp] [circleyelp] [roundyelp]

YouTube

[youtube] [circleyoutube] [roundyoutube]

Поддержка адаптивных значков в PWA с маскируемыми значками

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

19 декабря 2019 г. • Обновлено 16 сентября 2020 г.

Появляется в: прогрессивных веб-приложениях

Что такое маскируемые значки? #

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

Прозрачные значки PWA отображаются внутри белых кругов на Android.

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

Маскируемые значки вместо этого покрывают весь круг

Мои текущие значки готовы? #

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

Различные формы для конкретных платформ

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

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

Панель приложений

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

Как использовать маскируемые значки? #

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

Создание значков в редакторе Maskable.app

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

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

Маскируемые значки должны иметь другое назначение: «маскируемые» . Это указывает на то, что изображение предназначено для использования с масками значков, что дает вам больше контроля над результатом.Таким образом, ваши значки не будут иметь белый фон. Вы также можете указать несколько целей, разделенных пробелами (например, «любой маскируемый» ), если вы хотите, чтобы маскируемый значок использовался без маски на других устройствах.

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

  {
… 
 "значки": [
… 
 {
 "src": "путь / к / regular_icon.png", 
 "размеры": "196x196", 
 "тип": "изображение / png» , 
 "цель": "любой" 
}, 
 {
 "src": "путь / к / maskable_icon.png", 
 "размеры": "196x196", 
 "тип": "изображение / png", 
 "цель": "маскируемый" 
}, 
… 
], 
… 
}  

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