Бесплатные иконки для сайта — ИТ Шеф
Статья, в которой рассматриваются 7 источников, с которых можно скачать бесплатные векторные значки для сайта.
Flaticon
Этот сайт содержит очень большое количество бесплатных векторных иконок. Для скачивания иконок не требуется регистрация. Также перед скачиванием можно выбрать цвет иконки. Кроме этого на сайте имеется бесплатный font-face генератор, который поддерживает следующие типы файлов: .ttf
, .svg
, .eot
, .woff
и .otf
.
Перейти на flaticon.com
Iconfinder
Iconfinder содержит более 800000 значков. Среди значков имеются как бесплатные, так и платные (премиум класса). Нахождение значков на данном ресурсе осуществляется с помощью формы поиска.
Перейти на iconfinder.com
All-free-download
All Free Download — это очень популярный сайт, который бесплатно позволяет получить такой контент как фотографии, значки, обои, PSD и др. При использовании контента этого сайта, не забывайте соблюдать условия лицензионного соглашения.
Перейти на all-free-download.com
Vecteezy
Vecteezy — это еще один популярный сайт, который позволяет бесплатно скачать векторные значки и картинки. Кроме бесплатного контента, здесь также присутствуют платные (премиум) коллекции. Поиск контента на сайте можно осуществлять как с помощью поиска так и посредством просмотра категорий.
Перейти на vecteezy.com
Pixeden
Pixeden предлагает различные веб-ресурсы. На сайте представлены темы, логотипы, фотографии, значки в формате шрифта, наборы иконок, векторные изображения и многое другое. Сайт предлагает бесплатные и платные ресурсы. Для скачивания бесплатных ресурсов, регистрация не требуется.
Перейти на pixeden.com
Icons8
Этот сайт предлагает более 19000 бесплатных плоских значков с возможностью изменения у каждого из них цвета и размера. Перед скачиванием значков с Icons8 необходимо пройти процедуру регистрации.
Перейти на icons8.com
Vector Open Stock
Vector Open Stock предлагает множество графических ресурсов как бесплатных, так и платных (премиум класса). Сайт содержит интересные категории. Бесплатные элементы можно скачать без регистрации. Но необходимо обратить внимание на то, что использование бесплатного контента в коммерческих целях возможно потребует приобретение лицензии.
Перейти на vectoropenstock.com
Если Вы знаете ещё сайты, которые могут предложить бесплатные векторные значки, то поделитесь ими пожалуйста в комментариях.
favicon.ico и другие форматы, поддержка браузерами
От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.
Что такое favicon?
Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах. В зависимости от браузера и контекста они могут отображаться:
Рядом с именем сайта во вкладке браузера
В списке закладок
Как иконка запуска на домашнем экране устройства и десктопа
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееВ самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)
Firefox показывает большие favicon на стартовом экране и маленькие во вкладке
Favicon традиционно ассоциировался с сайтом, но так как он добавляется через разметку, то на каждой странице можно поставить свой favicon, если хотите. Можно даже поставить отдельный favicon для всех запросов страницы.
Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.
Мы не будем уделять время кэшированию браузера. Будем поддерживать простоту. Оказывается, с ростом количества платформ и клиентов с поддержкой веб-страниц растет и сложность добавления маленькой иконки так, чтобы она правильно отображалась и удовлетворяла требованиям всех платформ.
Что такое формат favicon .ico (ICO)?
Прежде чем переходить к подробностям, давайте быстро разберем формат ICO.
ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.
В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.
Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).
Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.
Как подключить favicon?
Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.
Начнем с самого старого и базового способа добавления favicon на сайт.
Размещение favicon.ico в корне сайта
Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon. ico.
Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.
Подключение favicon через тег link
После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.
Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:
<link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»> <link rel=»icon» type=»image/x-icon» href=»/favicon.ico»> <link rel=»icon» href=»/favicon.ico» />
<link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»> <link rel=»icon» type=»image/x-icon» href=»/favicon.ico»> <link rel=»icon» href=»/favicon.ico» /> |
Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:
<link rel=»icon» type=»image/gif» href=»/image.gif»> <link rel=»icon» type=»image/png» href=»/image.png»>
<link rel=»icon» type=»image/gif» href=»/image.gif»> <link rel=»icon» type=»image/png» href=»/image.png»> |
Подключение иконок через Web App Manifest: manifest.json
Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.
manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.
Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.
Favicon на домашнем экране устройства Android
Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.
Файл manifest.json с двумя иконками может выглядеть следующим образом:
{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» } |
Используйте код ниже для ссылки на манифест, который в нашем случае сохранен в корне:
<link rel=»manifest» href=»/manifest.json»>
<link rel=»manifest» href=»/manifest.json»> |
Подключение иконок через файл browserconfig.xml
browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows.
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig> |
Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.
Так много способов подключения иконки – какой использовать?
Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.
Почему столько много способов подключения favicon?
Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.
Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.
На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.
Какие размеры favicon использовать?
У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:
<link rel=»icon» type=»image/png» href=»/icon-16.png»> <link rel=»icon» type=»image/png» href=»/icon-32.png»>
<link rel=»icon» type=»image/png» href=»/icon-16.png»> <link rel=»icon» type=»image/png» href=»/icon-32.png»> |
Рекомендации Chrome
На сайте Google developers рекомендуют использовать для Chrome максимальный размер 192×192px.
<link rel=»icon» type=»image/png» href=»icon-192.png»>
<link rel=»icon» type=»image/png» href=»icon-192.png»> |
Изображение будет автоматически уменьшено до необходимого размера.
Однако если вам нужно больше контроля, и вы сами предпочитаете масштабировать изображения, а не оставлять это браузеру, можете предоставить свои собственный иконки кратные 48px.
Мы получаем следующие размеры:
48×48
96×96
144×144
192×192
Другой источник Google developer для заставок Add to homescreen рекомендует разрешение еще больше. Поэтому можно добавить 256, 384 и 512:
256×256
384×384
512×512
Разметка со всеми этими favicon будет выглядеть так:
<link rel=»icon» type=»image/png» href=»icon-48.png»> <link rel=»icon» type=»image/png» href=»icon-96.png»> <link rel=»icon» type=»image/png» href=»icon-144.png»> <link rel=»icon» type=»image/png» href=»icon-192.
<link rel=»icon» type=»image/png» href=»icon-48.png»> <link rel=»icon» type=»image/png» href=»icon-96.png»> <link rel=»icon» type=»image/png» href=»icon-144.png»> <link rel=»icon» type=»image/png» href=»icon-192.png»> <link rel=»icon» type=»image/png» href=»icon-256.png»> <link rel=»icon» type=»image/png» href=»icon-384.png»> <link rel=»icon» type=»image/png» href=»icon-512.png»> |
Рекомендации Safari
Apple рекомендует следующие размеры иконок:
120×120: iPhone
152×152: iPad
167×167: iPad Retina
180×180: iPhone Retina
Их можно подключить через тег link. Получается:
<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>
<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> |
Оптимальные размеры для старых устройств на iOS:
57×57
60×60
72×72
76×76
114×114
<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76. png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>
<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> |
Их также моно разместить в корневой папке с именами типа apple-touch-icon-180×180.png и apple-touch-icon.png, и Safari iOS автоматически найдет правильную иконку.
Тем не менее, другие платформы тоже могут использовать иконки iOS, поэтому лучше задать их явно через теги link.
Закрепленные вкладки в Safari
Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):
<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″>
<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″> |
Плитки Microsoft Windows
Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееПлитки Microsoft Windows
Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.
Базовые размеры плитки, определенные Microsoft:
70×70 (маленькая плитка)
150×150 (средняя плитка)
310×150 (широкая плитка)
310×310 (большая плитка)
В Windows 8. 0 и IE 10 плитку 144×144 можно задать в разметке так:
<meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>
<meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> |
С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.
Запутаем вас немного: чтобы покрыть большой диапазон устройств, Microsoft рекомендует использовать изображения в 1.8 раза больше размера стандартной плитки, чтобы их можно было увеличить или уменьшить при необходимости.
Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig> |
Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:
<meta name=»msapplication-config» content=»/path/to/config-file.xml» />
<meta name=»msapplication-config» content=»/path/to/config-file.xml» /> |
Собираем все вместе
Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:
favicon.ico
favicon-16.png
favicon-32.png
icon-48.png
icon-96.png
icon-144.png
icon-192.png
icon-256.png
icon-384.png
icon-512.png
apple-touch-icon-57.png
apple-touch-icon-60.png
apple-touch-icon-72.png
apple-touch-icon-76.png
apple-touch-icon-114.png
apple-touch-icon-120.png
apple-touch-icon-152.png
apple-touch-icon-167.png
apple-touch-icon-180.png
ms-tile-144.png
ms-tile-126.png
ms-tile-270.png
ms-tile-558×270.png
ms-tile-558.png
И 2 конфиг файла:
manifest.json
browserconfig.xml
Разметка favicon
<link rel=»icon» href=»icon-48.png»> <link rel=»icon» href=»icon-96.png»> <link rel=»icon» href=»icon-144.png»> <link rel=»icon» href=»icon-192.png»> <link rel=»icon» href=»icon-256.png»> <link rel=»icon» href=»icon-384.png»> <link rel=»icon» href=»icon-512.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-120. png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″> <meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> <link rel=»manifest» href=»/manifest.json»>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <link rel=»icon» href=»icon-48.png»> <link rel=»icon» href=»icon-96.png»> <link rel=»icon» href=»icon-144.png»> <link rel=»icon» href=»icon-192.png»> <link rel=»icon» href=»icon-256.png»> <link rel=»icon» href=»icon-384.png»> <link rel=»icon» href=»icon-512.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″> <meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> <link rel=»manifest» href=»/manifest. json»> |
Этого незначительного куска разметки должно хватить, чтобы все браузеры были счастливы.
Прозрачность и кадрирование: не все иконки одинаково обрабатываются
Предупреждение: даже если у вас не будет проблем с созданием всех файлов, результат в определенных контекстах вас может удивить.
Мы уже поняли, что все платформы делают все по-своему и используют свои наборы размеров изображений. Но различия на этом не заканчиваются. Могут возникнуть неожиданные различия в том, как платформы будут обрабатывать иконки, над которыми вы так трудились.
Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.
Другое различие заключается в кадрировании. iOS добавляет скругленные углы иконкам, Android этого не делает. Windows помещает изображения иконок на плитки и в зависимости от размера плитки и внутреннего отступа иконки последняя может быть либо слишком маленькой, либо слишком большой.
Вывод – нужно проверять рендер favicon на всех платформах.
Нам действительно нужны все эти favicon?
Для такой маленькой иконки очень много работы.
С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.
Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.
Пусть браузер сам занимается уменьшением
Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.
Поэтому если вы не возражаете, чтобы браузер за вас автоматически уменьшал изображения, можете предоставить всего одну большую иконку, которая будет покрывать большинство случаев.
Есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах. В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.
Минимальный набор иконок
1. Следующие файлы в корневой папке
favicon.ico (с размерами 16×16, 32×32)
favicon-16×16.png: современный эквивалент формата ICO
favicon-32×32.png: Safari
apple-touch-icon-180.png: Apple touch icon
icon-192.png: Chrome/Android
safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari
mstile-150×150.png: MS плитка
2. Файл manifest.json, использующий изображение chrome:
{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }
{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» } |
3. Файл browserconfig.xml, использующий изображение mstile
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig> |
4. Следующая разметка
<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»> <link rel=»icon» type=»image/png» href=»/icon-32×32.png»> <link rel=»icon» type=»image/png» href=»/icon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″> <meta name=»theme-color» content=»#ffffff»>
<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»> <link rel=»icon» type=»image/png» href=»/icon-32×32.png»> <link rel=»icon» type=»image/png» href=»/icon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″> <meta name=»theme-color» content=»#ffffff»> |
Данный набор иконок и разметки был получен с помощью некоторых тонкостей. Рекомендую прочесть, почему именно эти файлы. Например, можно выкинуть следующее:
<link rel=»icon» href=»icon-192.png»>
<link rel=»icon» href=»icon-192.png»> |
Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.
Это хорошая отправная точка. Но если необходимы дополнительные иконки или настройка вида на определенном размере, можете добавить свои иконки поверх этого.
Будущее favicon
Возможно, вы думаете, что все это немножко безумно! Так и есть. Это результат множества платформ с разной стандартизацией и проприетарных форматов, которые были выбраны для хорошего сочетания.
SVG favicon
Вы должны были слышать о формате векторных изображений SVG. Так как формат векторный, изображение можно увеличивать и уменьшать без потели деталей и качества. То есть во многих случаях будет хватать одного изображения.
Однако это не панацея. Всегда нужно вручную подстраивать иконки. То есть на больших иконках желательно добавить больше деталей, таких как текст и название бренда. На маленьких иконках нужно удалить те детали, которые не удастся разглядеть.
Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:
<link rel=»icon» href=»icon.svg» type=»image/svg+xml»>
<link rel=»icon» href=»icon.svg» type=»image/svg+xml»> |
Автор: Ruadhán O’Donoghue
Источник: //mobiforge.com/
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееХотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоКак вставить иконку на сайт html
Привет всем любителям-сайтостроителям, сегодня расскажу, как быстро вставить иконку на сайт с помощью html. Знаю два способа о которых хочу рассказать:
Первый способ — очень простой. Для того, чтобы его использовать необходимо знать специальный HTML5 код символов. Вообще в интернете много ресурсов, которые представляют таблицу спецсимволов HTML5, которые можно найти по запросу «спецсимволов HTML5».
Ниже пример применения иконок на сайте с помощью HTML5 символов:
Второй способ — не менее простой, но более гибкий и дающий больше возможностей. Здесь речь пойдет о применении стороннего сервиса Font Awesome. Для того чтобы использовать его, необходимо зайти на сайт и в верхнем меню нажать «Get Started» (выделено красным)
Далее попадаем на страницу, где нужно выбрать метод использования иконок на сайте. Рекомендую выбрать метод «Web Fonts with CSS»
Далее мы попадаем на страничку, где нам нужно скопировать код:
И далее этот код вставить в код сайта в разделе <head></head>
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Всё для сайта и сайтостроения</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> </head>
Далее мы можем использовать иконки Font Awesome. Переходим в раздел Icons в верхнем меню
Находим нужную иконку. Можно использовать поиск или просто найти, пролистывая страничку вниз. После того как нашли нужную иконку жмем на нее, находим код типа
<i></i>
И вставляем его в нужном месте сайта.
Использование данного сервиса имеет как плюсы, так и минусы. Из плюсов: Мы можем редактировать иконки как текст на css: изменять размер, цвет, отступы и т.д. Также есть небольшой минус — лицензия на использование данного ресурса частично бесплатная, при поиске вы будете видеть затемненные иконки, которые не сможете использовать до оплаты лицензии.
На этом всё, если вам понравилась статья, ставьте LIKE. Если есть вопросы, задавайте, будут рад помочь.
Иконки для сайта: какие бывают, зачем нужны и где их брать?
Иконки плавно и основательно стали обязательным атрибутом любого качественного сайта. Поговорим о том, какие бывают иконки, когда и в каких целях их стоит применять и где их брать.
Содержание
- Какие бывают иконки?
- Зачем нужны иконки на сайте?
- Где взять иконки для сайта?
Какие бывают иконки?
В этом материале мы не станем рассматривать иконочные шрифты, а поговорим об иконках в формате изображений.
В зависимости от типа графики иконки делятся на:
Векторные (формат 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:
Страница с наборами иконок
Комментарии для сайта CackleCSS Иконки. Уроки для начинающих. W3Schools на русском
Как добавить иконки
Самый простой способ добавить иконку на свою HTML-страницу — использовать библиотеку иконок, например, Font Awesome.
Добавьте название указанного класса иконок в любой встроенный элемент HTML (например, <i>
или <span>
).
Все иконки в библиотеках иконок ниже представляют собой масштабируемые векторы, которые можно настраивать с помощью CSS (размер, цвет, тень и т.д.)
Font Awesome Иконки
Чтобы использовать иконки Font Awesome, перейдите на
fontawesome.com, войдите в систему и получите код для добавления в раздел <head>
вашей HTML-страницы.:
<script src="https://kit.fontawesome.com/ваш код.js"></script>
Узнайте больше о том, как начать использовать Font Awesome в нашем Font Awesome 5 Учебнике.
Примечание: Не требуется загрузка или установка!
Пример
<i></i>
<i ></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
Результат:
Попробуйте сами »Bootstrap иконки
Чтобы использовать глификонки Bootstrap, добавьте следующую строку в раздел <head>
вашей HTML-страницы:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Примечание: Не требуется загрузка или установка!
Пример
<i></i>
<i></i>
<i></i>
<i ></i>
<i></i>
</body>
</html>
Результат:
Попробуйте сами »Google Иконки
Чтобы использовать Google иконки, добавьте следующую строку внутри раздела <head>
вашей HTML страницы:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Примечание: Не требуется загрузка или установка!
Пример
<i>cloud</i>
<i >favorite</i>
<i >attachment</i>
<i >computer</i>
<i >traffic</i>
</body>
</html>
Результат:
Попробуйте сами »Примечание. Ссылки на сайты иконок (Fontawesome, Bootstrap, Google-иконки) могут меняться в зависимости от выхода новой версии набора иконок. Поэтому для получения наиболее новой версии набора иконок и ссылки на них посетите официальный сайт необходимого набора и скопируйте нужную ссылку.
Как создать favicon (фавикон) для сайта
О чем статья:
-
Что такое фавикон и каких форматов он бывает
-
Какие требования предъявляют разные платформы
-
С помощью каких инструментов можно создать иконку
-
Можно ли не создавать фавикон и как это повлияет на выдачу
Что такое фавикон
Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.
Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.
Формат и стили фавиконов
Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.
С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются..
Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.
-
Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.
- Второй вариант со сплошной заливкой. Он будет использоваться в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, например, на домашнем экране устройства.
Фавиконки отображаются на пустой стартовой странице Google
Особенности фавиконов для разных платформ
Десктоп
Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.
Так выглядят фавиконы в мобильной версии браузера 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
Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется 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 |
Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.
Другие варианты
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 может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче.
Материал подготовила Светлана Сирвида-Льорентэ.
Иконки для сайта. Как установить фавикон (favicon)
Содержание:
Что такое «фавикон» для сайта
Практически каждый веб-мастер должен знать, что такое «фавикон» для сайта и какова его функция. Но есть и те, кто слышит об этом впервые.
Эта статья написана специально для тех, кто незнаком с этим понятием, или хочет освежить/дополнить свои знания про иконки для сайта.
Итак, само название «фавикон» – это то, что осталось от исходного «favicon», так сказать – сленговая версия, которая популярна в русскоязычном интернете.
Favicon – для сайта является его своеобразной визитной карточкой. Расшифровывается как «favourite icon» (если дословно, то это «любимое/избранное изображение»).
По факту это небольшая картинка, которая отображается:
- В результатах поиска рядом с названием отображаемой странички веб-ресурса.
- В адресных строках почти всех браузеров непосредственно перед адресом.
- Во вкладке браузера, соответствующей отображаемой странице, рядышком с ее названием.
- В закладках браузера.
Зачем нужен favicon для сайта
Если установить «фавикон» на сайт ничего сверхъестественного не случится. Но некоторые положительные моменты все же будут:
- Повышение узнаваемости веб-ресурса интернет-пользователями (если сделать иконку из картинки, которая будет выделяться среди других и легко запоминаться).
- Увеличение показателя CTR веб-ресурса (тоже полезно).
- Косвенное улучшение поведенческих факторов вследствие подсознательного выбора пользователем Вашего веб-ресурса в результатах поисковой выдачи (если он будет выделяться).
Как сделать «фавикон» для сайта
Для того чтобы сделать иконку из картинки, которую Вы выберете, нужно соблюсти некоторые условия:
- Назвать ее «favicon.ico».
- Размер иконки должен составлять 16х16 пикселей.
- Разместить favicon.ico для сайта в корне веб-ресурса.
- Нужно сделать иконку в формате .ico.
Другие варианты места размещения и формата тоже возможны, но для этого придется вносить изменения в HTML-код страничек в зависимости от выбранного типа изображения:
Создать «фавикон» можно вручную, используя практически любой из доступных графических редакторов и минимальные знания в работе с кодом.
В случае если Вы не хотите разбираться с тем, как сделать иконку для сайта самому, всегда есть возможность воспользоваться одним из многочисленных онлайн-сервисов, созданных специально для этой цели.
На них обычно можно выбрать готовую favicon.ico для сайта или же воспользоваться онлайн-генератором, который может сделать иконку в формате ico из картинки на Ваш выбор:
Как создать новый «фавикон» или вообще его удалить
Для того, чтобы заменить старую иконку для сайта на новую или вовсе от нее избавиться, нужно всего лишь удалить favicon.ico из корневого каталога и, если это надо, загрузить туда же новый файл.
Во время следующего визита поисковый бот проиндексирует изменения и новый «фавикон» для сайта начнет отображаться везде, где это возможно.
Небольшой итогНезависимо от способа, который Вы выберете, чтобы создать favicon.ico для сайта, это простейшее действие поможет существенно улучшить узнаваемость Вашего веб-ресурса среди сотен одинаковых конкурентов. А это однозначно не будет лишним!
Спасибо за внимание! Не забудьте «лайкнуть»!
Значки
.html — скачать бесплатно, PNG и SVG
Значки .html — скачать бесплатно, PNG и SVGИконки
Фото
Музыка
Иллюстрации
ПоискТип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML +
9000 Коллекция Тип файла+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция файлов
Тип файла HTML
9000+ Коллекция
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Коллекция
Тип файла HTML
+ Тип файла HTML
+ Тип файла HTML
Коллекция
Тип файла HTML
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
50002 Html Html 5+ Collection
Html 5
+ Collection
Html 5
+ Collection
Html 5
+ Collection
Html 5
+ Collection
9000 Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
+ Коллекция
Html 5
Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ HTML
КоллекцияHTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция HTML
+ Коллекция HTML
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
HTML
+ Коллекция
Использование Font Awesome Icons на вашем веб-сайте
Подпишитесь на нашу рассылку новостей.
Добавление значков к содержанию вашего сайта обеспечивает визуальную точку фокусировки, которая направляет пользователя к определенному разделу и сопутствующему контенту.
Использование значков в веб-дизайне — проверенный метод модернизации веб-сайта и помощи в управлении потоком пользователей. Добавление значков к содержанию вашего сайта помогает пользователю лучше обрабатывать информацию, которую вы пытаетесь передать, и обеспечивает визуальную точку фокусировки, которая направляет пользователя к определенному разделу.
Графические значки можно использовать любым количеством способов, чтобы оживить ваш проект веб-дизайна.Вы можете использовать их как визуальное сопровождение к текстовым областям или как отдельные ссылки в ситуациях, когда пространство ограничено, а текстовые блоки невозможно использовать в дизайне. Универсальность иконок делает их такими полезными и широко распространенными.
К счастью, нет необходимости создавать собственный набор значков. Font Awesome представляет собой универсальную платформу, включающую практически любую графическую иконку, которую вы можете себе представить, а также необходимые возможности масштабирования и настройки. Font Awesome почти наверняка сэкономит вам время и деньги при использовании определенных иконок.В следующей статье будет рассмотрено включение значков Font Awesome для оптимизации вашего проекта веб-дизайна.
Шаг 1. Добавьте необходимые включения на свою веб-страницу
Для начала вам нужно убедиться, что на ваш сайт включены следующие ресурсы Font Awesome. Никаких загрузок или сложных скриптов не требуется — всего одна ссылка на Font Awesome CSS поможет вам начать.
Шаг 2 — Добавьте выбранный значок
Font Awesome включает в себя сотни значков для использования, охватывающих широкий спектр тем и контента. Для целей этого руководства мы добавим значок RSS. Просто включите следующий код на свою страницу везде, где вы хотите, чтобы отображался значок.
Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки.Чтобы использовать разные значки, просто найдите соответствующий класс CSS.
Шаг 3. Используйте встроенные настройки
Font Awesome имеет ряд встроенных способов настройки значка, например увеличение его размера, обеспечение фиксированной ширины значка или добавление анимации к выбранному классу значков. Приведенный ниже код отобразит значок «Поддержка» в нескольких размерах.
Шаг 4. Добавьте уникальные настройки
Поскольку эти значки полностью основаны на CSS, вы можете добавлять свои собственные стили и классы, чтобы полностью заставить значок работать в вашем проекте веб-дизайна.Например, вы можете сделать значок «Фильм» красным.
Выполнив описанные выше шаги, вы получите прочную основу, чтобы начать встраивать значки в свой веб-сайт. Обязательно используйте значки только там, где это имеет смысл. Как и в случае с другими визуальными элементами, чрезмерное использование противоречит намеченной цели и может отвлекать от дизайна вашего сайта.
Как обнаружили многие другие, мы здесь, в Solodev, добились большого успеха, используя значки для дополнения или дизайна и создания потрясающих веб-сайтов.
иконок — материализовать
Мы добавили 932 иконок Material Design, любезно предоставленных Google. Вы можете скачать их прямо из спецификаций Material Design.
Чтобы использовать эти значки, вы должны включить эту строку в часть
вашего HTML-кода.
Чтобы использовать эти значки, используйте класс material-icons для элемента и укажите лигатуру в качестве текста. содержание.
Чтобы управлять размером значка, измените свойство font-size: 30px
своего значка.При желании вы можете использовать предустановленные классы, как показано ниже.
3d_ротация 3d_ротация
ac_unit ac_unit
access_alarm access_alarm
access_alarms access_alarms
access_time access_time
доступность доступность
доступный доступный
account_balance account_balance
account_balance_wallet account_balance_wallet
account_box account_box
account_circle account_circle
адб адб
прибавить прибавить
add_a_photo add_a_photo
add_alarm add_alarm
add_alert add_alert
add_box add_box
add_circle add_circle
add_circle_outline add_circle_outline
add_location add_location
add_shopping_cart add_shopping_cart
add_to_photos add_to_photos
add_to_queue add_to_queue
отрегулируйте отрегулируйте
Airlines_seat_flat Airlines_seat_flat
airlines_seat_flat_angled airlines_seat_flat_angled
airport_seat_individual_suite Airlines_seat_individual_suite
airport_seat_legroom_extra Airlines_seat_legroom_extra
airport_seat_legroom_normal Airlines_seat_legroom_normal
airport_seat_legroom_reduced airport_seat_legroom_reduced
airlines_seat_recline_extra Airlines_seat_recline_extra
airlines_seat_recline_normal Airlines_seat_recline_normal
airplanemode_active airplanemode_active
airplanemode_inactive airplanemode_inactive
трансляция трансляция
airport_shuttle airport_shuttle
сигнализация сигнализация
alarm_add alarm_add
alarm_off alarm_off
тревога_он тревога_в
альбом альбом
все включено все включено
all_out all_out
андроид андроид
объявление объявление
приложения приложений
архив архив
arrow_back arrow_back
arrow_downward arrow_downward
arrow_drop_down arrow_drop_down
arrow_drop_down_circle arrow_drop_down_circle
arrow_drop_up arrow_drop_up
arrow_forward arrow_forward
arrow_upward arrow_upward
art_track art_track
соотношение сторон соотношение сторон
оценка оценка
назначение назначение
assignment_ind assignment_ind
конец_задания индекс_присвоения
assignment_return assignment_return
assignment_returned assignment_returned
assignment_turned_in assignment_turned_in
помощник помощник
ассистент_фото ассистент_фото
attach_file attach_file
attach_money attach_money
приставка приставка
аудиотрек аудиотрек
автообновление автообновление
авітаймер авітаймер
backspace backspace
резервный резервный
battery_alert battery_alert
battery_charging_full battery_charging_full
полная батарея полная батарея
battery_std battery_std
battery_unknown battery_unknown
доступ к пляжу доступ к пляжу
здесь здесь
блок блок
bluetooth bluetooth
bluetooth_audio bluetooth_audio
bluetooth_connected bluetooth_connected
bluetooth_disabled bluetooth_disabled
bluetooth_searching bluetooth_searching
blur_circular blur_circular
blur_linear blur_linear
blur_off blur_off
blur_on blur_on
книга книга
закладка закладка
bookmark_border bookmark_border
border_all border_all
нижняя граница нижняя граница
border_clear border_clear
цвет границы цвет границы
border_horizontal border_horizontal
border_inner border_inner
border_left border_left
border_outer border_outer
border_right border_right
border_style border_style
border_top border_top
граница_вертикальная граница_вертикальная
branding_watermark branding_watermark
яркость_1 яркость_1
яркость_2 яркость_2
яркость_3 яркость_3
яркость_4 яркость_4
яркость_5 яркость_5
яркость_6 яркость_6
яркость_7 яркость_7
яркость_авто яркость_авто
яркость_высокая яркость_высокая
яркость_низкая яркость_низкая
яркость_среда яркость_среда
broken_image broken_image
щетка щетка
пузырьковая_ диаграмма пузырьковая_ диаграмма
bug_report bug_report
сборка сборка
burst_mode burst_mode
бизнес бизнес
бизнес_центр бизнес_центр
кэшируется кэшируется
торт торт
звонок звонок
call_end call_end
call_made call_made
call_merge call_merge
call_missed call_missed
call_missed_outgoing call_missed_outgoing
call_received call_received
call_split call_split
call_to_action call_to_action
камера камера
camera_alt camera_alt
camera_enhance camera_enhance
camera_front camera_front
camera_rear camera_rear
camera_roll camera_roll
отменить отменить
card_giftcard card_giftcard
card_membership card_membership
card_travel card_travel
казино казино
литье литье
cast_connected cast_connected
center_focus_strong center_focus_strong
center_focus_weak center_focus_weak
change_history change_history
чат чат
chat_bubble chat_bubble
chat_bubble_outline chat_bubble_outline
чек чек
check_box check_box
check_box_outline_blank check_box_outline_blank
check_circle check_circle
левый шеврон левый шеврон
chevron_right chevron_right
присмотр за детьми присмотр за детьми
дружелюбный к ребенку дружелюбный к ребенку
chrome_reader_mode chrome_reader_mode
класс класс
прозрачный прозрачный
clear_all clear_all
закрыть закрыть
closed_caption closed_caption
облако облако
cloud_circle cloud_circle
cloud_done cloud_done
cloud_download cloud_download
cloud_off cloud_off
cloud_queue cloud_queue
cloud_upload cloud_upload
код код
коллекции коллекции
коллекции_закладка коллекции_закладка
color_lens color_lens
раскрасить раскрасить
комментарий комментарий
сравнить сравнить
compare_arrows compare_arrows
компьютер компьютер
номер_подтверждения номер_подтверждения
contact_mail contact_mail
contact_phone contact_phone
контакта контактов
content_copy content_copy
content_cut content_cut
content_paste content_paste
контрольная точка контрольная точка
control_point_duplicate control_point_duplicate
авторское право авторское право
создать создать
create_new_folder create_new_folder
кредитная карта кредитная карта
урожай урожай
урожай_16_9 урожай_16_9
урожай_3_2 урожай_3_2
урожай_5_4 урожай_5_4
урожай_7_5 урожай_7_5
Кроп_дин Кроп_дин
Crop_free Crop_free
Crop_landscape Crop_landscape
культура_оригинал культура_оригинал
Crop_portrait Crop_portrait
Crop_rotate Crop_rotate
кроп_квадрат кроп_квадрат
панель приборов панель приборов
data_usage data_usage
диапазон_даты диапазон_даты
удаление дымки удаление дымки
удалить удалить
delete_forever delete_forever
delete_sweep delete_sweep
описание описание
desktop_mac desktop_mac
desktop_windows desktop_windows
подробности подробности
Плата разработчика Плата разработчика
developer_mode developer_mode
концентратор_устройства концентратор_устройства
устройства устройств
устройства_другие устройства_другие
dialer_sip dialer_sip
Панель набора номера Панель набора номера
направления направлений
direction_bike direction_bike
направления_ лодка направление_ лодка
направления_шина направлений_шина
направления_машина направлений_машина
железная дорога_ железная дорога
direction_run direction_run
направления_ метро направления_ метро
направления_транзит направление_транзит
direction_walk direction_walk
полный диск полный диск
днс днс
do_not_disturb do_not_disturb
do_not_disturb_alt do_not_disturb_alt
do_not_disturb_off do_not_disturb_off
do_not_disturb_on do_not_disturb_on
док док
домен домен
выполнено выполнено
готово_все готово_все
пончик большой пончик большой
пончик_маленький пончик_маленький
чертежа чертежа
ручка перетаскивания ручка перетаскивания
drive_eta drive_eta
видеорегистратор видеорегистратор
редактировать редактировать
edit_location edit_location
выбросить выбросить
электронная почта электронная почта
расширенное_шифрование расширенное_шифрование
эквалайзер эквалайзер
Ошибка Ошибка
error_outline error_outline
евро_символ евро_символ
ev_station ev_station
событие событие
event_available event_available
event_busy event_busy
event_note event_note
event_seat event_seat
exit_to_app exit_to_app
expand_less expand_less
expand_more expand_more
явное явное
изучить изучить
экспозиция экспозиция
Exposure_neg_1 Exposure_neg_1
extension_neg_2 Exposition_neg_2
Exposition_plus_1 Exposure_plus_1
Exposition_plus_2 Exposure_plus_2
ноль экспозиции ноль экспозиции
добавочный добавочный
лицевая лицевая
fast_forward fast_forward
fast_rewind fast_rewind
избранное избранное
любимая_ граница любимая_ граница
Featured_play_list Featured_play_list
избранное_видео избранное_видео
обратная связь обратная связь
fiber_dvr fiber_dvr
fiber_manual_record fiber_manual_record
fiber_new fiber_new
fiber_pin fiber_pin
fiber_smart_record fiber_smart_record
file_download file_download
file_upload file_upload
фильтр фильтр
фильтр_1 фильтр_1
фильтр_2 фильтр_2
фильтр_3 фильтр_3
фильтр_4 фильтр_4
фильтр_5 фильтр_5
фильтр_6 фильтр_6
фильтр_7 фильтр_7
filter_8 filter_8
фильтр_9 фильтр_9
filter_9_plus filter_9_plus
filter_b_and_w filter_b_and_w
filter_center_focus filter_center_focus
filter_drama filter_drama
filter_frames filter_frames
filter_hdr filter_hdr
filter_list filter_list
filter_none filter_none
filter_tilt_shift filter_tilt_shift
filter_vintage filter_vintage
find_in_page find_in_page
find_replace find_replace
отпечаток пальца отпечаток пальца
первая_страница первая_страница
фитнес_центр фитнес_центр
флаг флаг
под отбортовку под отбортовку
flash_auto flash_auto
flash_off flash_off
flash_on flash_on
рейс рейс
flight_land flight_land
рейс_взлет рейс_взлет
флип флип
flip_to_back flip_to_back
flip_to_front flip_to_front
папка папка
folder_open folder_open
folder_shared folder_shared
папка_специальная папка_специальная
font_download font_download
format_align_center format_align_center
format_align_justify format_align_justify
format_align_left format_align_left
format_align_right format_align_right
жирный_формат жирный_формат
format_clear format_clear
format_color_fill format_color_fill
format_color_reset format_color_reset
формат_цвет_текст формат_цвет_текст
format_indent_decrease format_indent_decrease
format_indent_increase format_indent_increase
format_italic format_italic
format_line_spacing format_line_spacing
format_list_bulleted format_list_bulleted
format_list_numbered format_list_numbered
format_paint format_paint
format_quote format_quote
format_shapes format_shapes
формат_размер формат_размер
format_strikethrough format_strikethrough
format_textdirection_l_to_r format_textdirection_l_to_r
format_textdirection_r_to_l format_textdirection_r_to_l
формат_подчеркнутый формат_подчеркнутый
форум форум
вперед вперед
вперед_10 вперед_10
вперед_30 вперед_30
вперед_5 вперед_5
бесплатный завтрак бесплатный завтрак
полноэкранный полноэкранный
полноэкранный_exit полноэкранный_exit
функции функции
g_translate g_translate
геймпад геймпад
игры игры
молоток молоток
жест жест
get_app get_app
gif gif
гольф_курс гольф_курс
gps_fixed gps_fixed
gps_not_fixed gps_not_fixed
gps_off gps_off
марка марка
градиент градиент
зерно зерно
graphic_eq graphic_eq
grid_off grid_off
сетка_на сетка_он
группа группа
group_add group_add
group_work group_work
hd hd
hdr_off hdr_off
hdr_on hdr_on
hdr_strong hdr_strong
hdr_weak hdr_weak
гарнитура гарнитура
headset_mic headset_mic
исцеление исцеление
слух слух
справка справка
help_outline help_outline
высокое_качество высокое_качество
изюминка изюминка
highlight_off highlight_off
история история
дом дом
гидромассажная ванна гидромассажная ванна
гостиница гостиница
песочные часы_ пустые песочные часы_ пустые
полные песочные часы полные песочные часы
http http
https https
изображение изображение
image_aspect_ratio image_aspect_ratio
import_contacts import_contacts
import_export import_export
important_devices important_devices
входящие входящие
indeterminate_check_box indeterminate_check_box
информация информация
info_outline info_outline
вход вход
insert_chart insert_chart
insert_comment insert_comment
insert_drive_file insert_drive_file
insert_emoticon insert_emoticon
insert_invitation insert_invitation
insert_link insert_link
insert_photo insert_photo
invert_colors invert_colors
invert_colors_off invert_colors_off
iso iso
клавиатура клавиатура
keyboard_arrow_down keyboard_arrow_down
keyboard_arrow_left keyboard_arrow_left
keyboard_arrow_right keyboard_arrow_right
keyboard_arrow_up keyboard_arrow_up
keyboard_backspace keyboard_backspace
keyboard_capslock keyboard_capslock
keyboard_hide keyboard_hide
keyboard_return keyboard_return
keyboard_tab keyboard_tab
keyboard_voice keyboard_voice
кухня кухня
этикетка этикетка
label_outline label_outline
пейзаж пейзаж
язык язык
ноутбук ноутбук
ноутбук_chromebook ноутбук_chromebook
ноутбук_mac ноутбук_mac
ноутбук_windows ноутбук_windows
last_page last_page
запуск запуск
слоя слоев
Layers_clear Layers_clear
добавить утечку добавить утечку
leak_remove leak_remove
линза линза
добавление библиотеки добавление библиотеки
библиотека_книги библиотека_книги
library_music library_music
lightbulb_outline lightbulb_outline
line_style line_style
line_weight line_weight
linear_scale linear_scale
ссылка ссылка
подключенная_камера связанная_камера
список список
live_help live_help
live_tv live_tv
local_activity local_activity
local_airport local_airport
local_atm local_atm
local_bar local_bar
local_cafe local_cafe
local_car_wash local_car_wash
local_convenience_store local_convenience_store
local_dining local_dining
local_drink local_drink
local_florist local_florist
местная_газовая_станция местная_газовая_станция
local_grocery_store local_grocery_store
местная_больница местная_больница
local_hotel local_hotel
local_laundry_service local_laundry_service
local_library local_library
local_mall local_mall
local_movies local_movies
местное_предложение местное_предложение
local_parking local_parking
local_pharmacy local_pharmacy
local_phone local_phone
local_pizza local_pizza
local_play local_play
local_post_office local_post_office
local_printshop local_printshop
local_see local_see
local_shipping local_shipping
local_taxi local_taxi
location_city location_city
location_disabled location_disabled
location_off location_off
расположение_на расположение_на
location_searching location_searching
замок замок
lock_open lock_open
lock_outline lock_outline
выглядит выглядит
look_3 look_3
look_4 look_4
look_5 look_5
look_6 look_6
look_one look_one
look_two look_two
петля петля
лупа лупа
низкий_приоритет низкий_приоритет
лояльность лояльность
почта почта
mail_outline mail_outline
карта карта
markunread markunread
markunread_mailbox markunread_mailbox
память память
меню меню
merge_type merge_type
сообщение сообщение
микрофон микрофон
mic_none mic_none
mic_off mic_off
мм мм
mode_comment mode_comment
mode_edit mode_edit
монетизация_на монетизация_на
money_off money_off
монохромные_фотографии монохромные_фотографии
настроение настроение
mood_bad mood_bad
подробнее подробнее
more_horiz more_horiz
more_vert more_vert
мотоцикл мотоцикл
мышь мышь
move_to_inbox move_to_inbox
фильм фильм
movie_creation movie_creation
movie_filter movie_filter
multiline_chart multiline_chart
music_note music_note
music_video music_video
my_location my_location
природа природа
природа_ люди природа_ люди
navigate_before navigate_before
navigate_next navigate_next
навигация навигация
near_me near_me
network_cell network_cell
network_check network_check
network_locked network_locked
сеть_wifi сеть_wifi
new_releases new_releases
следующая неделя следующая неделя
NFC NFC
no_encryption no_encryption
no_sim no_sim
не заинтересован не заинтересован
примечание примечание
note_add note_add
уведомления уведомления
notifications_active notifications_active
notifications_none notifications_none
notifications_off notifications_off
notifications_paused notifications_paused
offline_pin offline_pin
ondemand_video ondemand_video
Непрозрачность Непрозрачность
open_in_browser open_in_browser
open_in_new open_in_new
open_with open_with
страницы страницы
просмотр страницы просмотр страницы
палитра палитра
pan_tool pan_tool
панорама панорама
Panorama_fish_eye Panorama_fish_eye
панорама_горизонтальная панорама_горизонтальная
панорама_вертикальная панорама_вертикальная
панорама_широкоугольный панорама_широкоугольный
party_mode party_mode
пауза пауза
pause_circle_filled pause_circle_filled
pause_circle_outline pause_circle_outline
платеж платеж
человек человек
чел ._контракт чел_схем
perm_camera_mic perm_camera_mic
perm_contact_calendar perm_contact_calendar
perm_data_setting perm_data_setting
perm_device_information perm_device_information
perm_identity perm_identity
перм_медиа перм_медиа
perm_phone_msg perm_phone_msg
perm_scan_wifi perm_scan_wifi
человек человек
человек_добавить _персонал
person_outline person_outline
человек_пин человек_пин
круг_контакта лица круг_контакта лица
личное_видео личное_видео
домашние животные домашние животные
телефон телефон
phone_android phone_android
phone_bluetooth_speaker phone_bluetooth_speaker
phone_forwarded phone_forwarded
phone_in_talk phone_in_talk
phone_iphone phone_iphone
phone_locked phone_locked
phone_missed phone_missed
phone_paused phone_paused
телефонная линия телефонная линия
стирание телефонной ссылки стирание телефонной ссылки
блокировка телефонной связи блокировка телефонной связи
phonelink_off phonelink_off
кольцо телефонной связи кольцо телефонной связи
phonelink_setup phonelink_setup
фото фото
photo_album photo_album
photo_camera photo_camera
photo_filter photo_filter
photo_library photo_library
photo_size_select_actual photo_size_select_actual
photo_size_select_large photo_size_select_large
photo_size_select_small photo_size_select_small
picture_as_pdf picture_as_pdf
picture_in_picture picture_in_picture
picture_in_picture_alt picture_in_picture_alt
pie_chart pie_chart
pie_chart_outlined pie_chart_outlined
pin_drop pin_drop
place place
play_arrow play_arrow
play_circle_filled play_circle_filled
play_circle_outline play_circle_outline
play_for_work play_for_work
playlist_add playlist_add
playlist_add_check playlist_add_check
playlist_play playlist_play
plus_one plus_one
poll poll
polymer polymer
pool pool
portable_wifi_off portable_wifi_off
portrait portrait
power power
power_input power_input
power_settings_new power_settings_new
pregnant_woman pregnant_woman
present_to_all present_to_all
print print
priority_high priority_high
public public
publish publish
query_builder query_builder
question_answer question_answer
queue queue
queue_music queue_music
queue_play_next queue_play_next
radio radio
radio_button_checked radio_button_checked
radio_button_unchecked radio_button_unchecked
rate_review rate_review
receipt receipt
recent_actors recent_actors
record_voice_over record_voice_over
redeem redeem
redo redo
refresh refresh
remove remove
remove_circle remove_circle
remove_circle_outline remove_circle_outline
remove_from_queue remove_from_queue
remove_red_eye remove_red_eye
remove_shopping_cart remove_shopping_cart
reorder reorder
repeat repeat
repeat_one repeat_one
replay replay
replay_10 replay_10
replay_30 replay_30
replay_5 replay_5
reply reply
reply_all reply_all
report report
report_problem report_problem
restaurant restaurant
restaurant_menu restaurant_menu
restore restore
restore_page restore_page
ring_volume ring_volume
room room
room_service room_service
rotate_90_degrees_ccw rotate_90_degrees_ccw
rotate_left rotate_left
rotate_right rotate_right
rounded_corner rounded_corner
router router
rowing rowing
rss_feed rss_feed
rv_hookup rv_hookup
satellite satellite
save save
scanner scanner
schedule schedule
school school
screen_lock_landscape screen_lock_landscape
screen_lock_portrait screen_lock_portrait
screen_lock_rotation screen_lock_rotation
screen_rotation screen_rotation
screen_share screen_share
sd_card sd_card
sd_storage sd_storage
search search
security security
select_all select_all
send send
sentiment_dissatisfied sentiment_dissatisfied
sentiment_neutral sentiment_neutral
sentiment_satisfied sentiment_satisfied
sentiment_very_dissatisfied sentiment_very_dissatisfied
sentiment_very_satisfied sentiment_very_satisfied
settings settings
settings_applications settings_applications
settings_backup_restore settings_backup_restore
settings_bluetooth settings_bluetooth
settings_brightness settings_brightness
settings_cell settings_cell
settings_ethernet settings_ethernet
settings_input_antenna settings_input_antenna
settings_input_component settings_input_component
settings_input_composite settings_input_composite
settings_input_hdmi settings_input_hdmi
settings_input_svideo settings_input_svideo
settings_overscan settings_overscan
settings_phone settings_phone
settings_power settings_power
settings_remote settings_remote
settings_system_daydream settings_system_daydream
settings_voice settings_voice
share share
shop shop
shop_two shop_two
shopping_basket shopping_basket
shopping_cart shopping_cart
short_text short_text
show_chart show_chart
shuffle shuffle
signal_cellular_4_bar signal_cellular_4_bar
signal_cellular_connected_no_internet_4_bar signal_cellular_connected_no_internet_4_bar
signal_cellular_no_sim signal_cellular_no_sim
signal_cellular_null signal_cellular_null
signal_cellular_off signal_cellular_off
signal_wifi_4_bar signal_wifi_4_bar
signal_wifi_4_bar_lock signal_wifi_4_bar_lock
signal_wifi_off signal_wifi_off
sim_card sim_card
sim_card_alert sim_card_alert
skip_next skip_next
skip_previous skip_previous
slideshow slideshow
slow_motion_video slow_motion_video
smartphone smartphone
smoke_free smoke_free
smoking_rooms smoking_rooms
sms sms
sms_failed sms_failed
snooze snooze
sort sort
sort_by_alpha sort_by_alpha
spa spa
space_bar space_bar
speaker speaker
speaker_group speaker_group
speaker_notes speaker_notes
speaker_notes_off speaker_notes_off
speaker_phone speaker_phone
spellcheck spellcheck
star star
star_border star_border
star_half star_half
stars stars
stay_current_landscape stay_current_landscape
stay_current_portrait stay_current_portrait
stay_primary_landscape stay_primary_landscape
stay_primary_portrait stay_primary_portrait
stop stop
stop_screen_share stop_screen_share
storage storage
store store
store_mall_directory store_mall_directory
straighten straighten
streetview streetview
strikethrough_s strikethrough_s
style style
subdirectory_arrow_left subdirectory_arrow_left
subdirectory_arrow_right subdirectory_arrow_right
subject subject
subscriptions subscriptions
subtitles subtitles
subway subway
supervisor_account supervisor_account
surround_sound surround_sound
swap_calls swap_calls
swap_horiz swap_horiz
swap_vert swap_vert
swap_vertical_circle swap_vertical_circle
switch_camera switch_camera
switch_video switch_video
sync sync
sync_disabled sync_disabled
sync_problem sync_problem
system_update system_update
system_update_alt system_update_alt
tab tab
tab_unselected tab_unselected
tablet tablet
tablet_android tablet_android
tablet_mac tablet_mac
tag_faces tag_faces
tap_and_play tap_and_play
terrain terrain
text_fields text_fields
text_format text_format
textsms textsms
texture texture
theaters theaters
thumb_down thumb_down
thumb_up thumb_up
thumbs_up_down thumbs_up_down
time_to_leave time_to_leave
timelapse timelapse
timeline timeline
timer timer
timer_10 timer_10
timer_3 timer_3
timer_off timer_off
title title
toc toc
today today
toll toll
tonality tonality
touch_app touch_app
toys toys
track_changes track_changes
traffic traffic
train train
tram tram
transfer_within_a_station transfer_within_a_station
transform transform
translate translate
trending_down trending_down
trending_flat trending_flat
trending_up trending_up
tune tune
turned_in turned_in
turned_in_not turned_in_not
tv tv
unarchive unarchive
undo undo
unfold_less unfold_less
unfold_more unfold_more
update update
usb usb
verified_user verified_user
vertical_align_bottom vertical_align_bottom
vertical_align_center vertical_align_center
vertical_align_top vertical_align_top
vibration vibration
video_call video_call
video_label video_label
video_library video_library
videocam videocam
videocam_off videocam_off
videogame_asset videogame_asset
view_agenda view_agenda
view_array view_array
view_carousel view_carousel
view_column view_column
view_comfy view_comfy
view_compact view_compact
view_day view_day
view_headline view_headline
view_list view_list
view_module view_module
view_quilt view_quilt
view_stream view_stream
view_week view_week
vignette vignette
visibility visibility
visibility_off visibility_off
voice_chat voice_chat
voicemail voicemail
volume_down volume_down
volume_mute volume_mute
volume_off volume_off
volume_up volume_up
vpn_key vpn_key
vpn_lock vpn_lock
wallpaper wallpaper
warning warning
watch watch
watch_later watch_later
wb_auto wb_auto
wb_cloudy wb_cloudy
wb_incandescent wb_incandescent
wb_iridescent wb_iridescent
wb_sunny wb_sunny
wc wc
web web
web_asset web_asset
weekend weekend
whatshot whatshot
widgets widgets
wifi wifi
wifi_lock wifi_lock
wifi_tethering wifi_tethering
work work
wrap_text wrap_text
youtube_searched_for youtube_searched_for
zoom_in zoom_in
zoom_out zoom_out
zoom_out_map zoom_out_map
The complete guide to HTML icons — iOS, Android, desktop and more… • Code The Web
Из этой статьи вы узнаете, как создать значок для iOS, Android, рабочего стола и других устройств с помощью HTML…
Начало работы
Не стесняйтесь следовать! Возможно, у вас не все устройства, операционные системы или браузеры, о которых я буду говорить, но вы сможете протестировать хотя бы одно или два 😉
Для начала создайте файл HTML со следующим базовым кодом:
< ! DOCTYPE html>
HTML-иконки
HTML-иконки!
Откройте его в браузере — он должен выглядеть так:
Теперь вы готовы к работе!
Значок
В сегодняшних примерах мы будем использовать этот значок вафли, который я сделал (с мороженым сверху, конечно 🍦 😉):
Не так уж вкусно!
Значки вкладок браузера (значки)
Если вы посмотрите на маленький значок на вкладке прямо сейчас (они также известны как значки), он просто покажет нам скучный значок по умолчанию — никому это не нужно!
Обратите внимание, что в зависимости от того, какой браузер вы используете, вкладки и значок по умолчанию могут немного отличаться.Этот и большинство других снимков экрана браузера в этой статье сделаны в Google Chrome.
Итак, добавим свой! Просто добавьте эту строку кода в свой
:
Атрибут типа
зависит от изображения, которое мы используем. В данном случае мы используем файл .png
, поэтому установим для нашего типа
значение image / png
.Есть и другие типа
, которые вы можете использовать, например, image / ico
для файлов .ico
.
Щелкните здесь, чтобы просмотреть список поддерживаемых типов файлов.
Также убедитесь, что ваш значок имеет размер 16px
на 16px
, 32px
на 32px
или 64px
на 64px
. Вам необходимо убедиться, что фактическое изображение имеет эти размеры, а также атрибут sizes
— вы можете изменить размер своих изображений онлайн.Обратите внимание, что другие размеры также работают, но они поддерживаются не всеми браузерами. В этом случае наше изображение имеет размер 64 пикселя
на 64 пикселя
— я рекомендую вам использовать этот размер, потому что это самое высокое разрешение из трех.
В любом случае, вот результат:
Теперь рядом с заголовком нашей страницы появился значок! 🎉 🎉
Домашний экран Safari и значки закладок
Если мы добавим наш веб-сайт на домашний экран в iOS, он по умолчанию даст нам очень уродливый снимок экрана странного размера:
Давайте вместо этого добавим наш собственный значок! Для этого добавьте эту строку под строкой вашего значка в вашем
:
Как видите, это очень похоже на то, как мы объявляем наш значок, за исключением того, что вместо этого мы используем apple-touch-icon
в качестве атрибута rel
. Убедитесь, что ваш значок всегда имеет размер 180 пикселей
на 180 пикселей
.
Теперь, если мы снова добавим его на домашний экран, мы получим гораздо лучший результат!
Это также дает нашему веб-сайту значок для закладок Safari на iOS:
И на Mac:
Значки Android
Веб-сайты также можно добавлять на главный экран с помощью Google Chrome на Android.К счастью, нам не нужно указывать значки только для Android! Он будет использовать значок или значок с изображением яблока
, если он у вас есть.
Плитки Windows
В Windows, если вы еще не знаете, есть эти вещи, называемые плитками:
Они также используются на телефонах Windows:
Как вы можете видеть на фотографиях выше, нам также необходимо создать прямоугольная версия нашего логотипа, когда плитка прямоугольная. Вот прямоугольная версия вафли, которую я сделал:
В нашем HTML нам нужно определить этот значок, а также три квадратных значка: 70px
на 70px
, 150px
на 150px
и 310px.
на 310 пикселей
.Наша прямоугольная иконка должна быть 310 пикселей в ширину
на на 150 пикселей в высоту
пикселей.
Одна важная вещь: При создании значков для плиток Windows всегда используйте прозрачный фон.
Вот наши значки, но с прозрачным фоном:
Вот HTML — добавьте его под своим значком Safari и favicon в
:
Они немного отличаются от типов значков, которые мы обсуждали до сих пор, поскольку они используют теги
вместо тегов
.
А если у иконок прозрачный фон, не будет ли это странно смотреться? Да. Причина, по которой у них должен быть прозрачный фон, заключается в том, чтобы Windows могла поместить под них цвет. В качестве примера возьмем эту плитку:
Здесь значок карты будет изображением (с прозрачным фоном), а затем Windows поместит под ним розовый / фиолетовый цвет. Но как определить цвет Windows? Здесь пригодится метатег msapplication-TileColor
. В этом случае шестнадцатеричный цвет фона значка вафли — # 2e2e2e
.Имея это в виду, добавьте эту строку под наши значки внутри
:
Вот результат мета-тегов значков и цвета плитки:
Окончательный HTML
После всего этого вот как должен выглядеть наш окончательный HTML (с добавленными комментариями для ясности):
HTML-иконки
HTML-иконки!
Если вам лень……
Есть замечательный веб-сайт под названием Real Favicon Generator, который генерирует для вас значки, значки Safari, значки Windows и многое другое. Однако я рекомендую вам не использовать это, пока вы не будете достаточно уверены в том, что сделаете это сами. — иначе вы никогда не научитесь. Тем не менее, вы всегда можете найти его, если вам нужно. Так что решать вам.
Заключение
Ура! Это все, что осталось на сегодня. Надеюсь, вы что-то узнали! Если да, то я был бы рад, если бы вы поделились этим или подписались на информационный бюллетень, чтобы получать новые сообщения в свой почтовый ящик. Если вы делаете что-то из этого, вы великолепны и заслуживаете космического тако, если это вообще так! 😎 🌮 🚀
Сегодня я говорил об иконках для множества различных платформ, и вам не обязательно использовать их все, хотя это хорошая идея.Но для начала можно было попробовать привыкнуть к фавиконам (первая часть).
Если вам нужна помощь, оставить отзыв или вы хотите поздороваться 👋, я был бы рад, если бы вы сделали это в комментариях ниже.
В следующий раз я сделаю специальный пост на сайтах Quick-reference, чтобы помочь вам в вашем пути программирования. Увидимся позже!
20+ лучших премиум и бесплатных пакетов значков для веб-разработчиков и дизайнеров
Иконки играют важную роль в создании первого впечатления от интерфейса сайта или приложения.Но на их разработку с нуля уходит много времени и денег. Использование значков на вашем сайте позволяет вам эффективно общаться с вашими посетителями: они повышают удобочитаемость, выделяют важный контент, усиливают функциональность или функции и улучшают дизайн. Поэтому стоит обратить внимание на готовые лучшие наборы иконок.
Кроме того, когда дело доходит до дизайна иконок, это отличный способ продемонстрировать квалификацию дизайнера. Симпатичный набор значков — идеальная демонстрация работы дизайнера и мощный инструмент для повышения вашей репутации в Интернете.
Кроме того, значки — одна из самых неотъемлемых частей веб-сайта или приложения. Иконки отвечают за навигацию и влияют на общее восприятие приложения. В настоящее время, если вы небольшая компания, доступно множество бесплатных и платных пакетов значков. Процесс выбора значков очень важен, существует множество ресурсов значков, которые также можно подразделить на значки материалов или значки социальных сетей. Вот почему мы собрали для вас подборку бесплатных и платных пакетов значков и ресурсов.
Плюсы использования иконок в следующем UX-дизайн-проекте- Иконки помогают повысить удобочитаемость сайта или приложения;
- Хорошо оформленные значки помогают уменьшить объем текста. Использование значков делает ваше сообщение понятным без текста;
- Иконки могут добавить индивидуальности вашему продукту;
- Иконки могут быть хорошей отправной точкой в знакомстве с продуктом;
- И последнее, но не менее важное: одна из наиболее важных функций значков — помочь пользователям интуитивно понять приложение как при первом знакомстве, так и во время последующего использования.
В Flatlogic мы создаем шаблоны веб-приложений и мобильных приложений, созданные с помощью React, Vue, Angular и React Native, чтобы помочь вам быстрее разрабатывать веб-приложения и мобильные приложения. Пойдите и проверьте себя!
Смотрите наши темы!
В этой статье вы найдете коллекцию некоторых из лучших премиальных и бесплатных пакетов значков, которые вы можете использовать на своем веб-сайте или в бизнесе, даже если вы не являетесь творческим художником. Наборы иконок, представленные в этой статье, могут использоваться не только на обычных сайтах и в базовых случаях, но и в более сложных и специализированных.
Для вашего удобства мы разделили наборы значков на несколько категорий. Перед описанием вы увидите категорию, к которой принадлежит этот продукт.
- Бесплатные иконки ;
- Торговые площадки с наборами иконок. На торговой площадке представлены иконки разных авторов. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары;
- Значок материала наборов и Плоский значок наборов;
- Наборы иконок 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 для пакета CC;
- Лицензия Linkshare с дополнительными опциями; и
- новых набора значков добавляются каждый месяц.
Премиум-подписка с FlatIcon предоставит вам полные лицензионные права, доступ к эксклюзивному контенту, отсутствие рекламы, приложение MacOS и расширения Adobe, а также возможность создавать неограниченное количество коллекций.
Значки застрявшей бумаги Веб-сайт: https://jam-icons.com/
Формат и тип: SVG, CSS
Цена и лицензия: Free, MIT
Иконки Jam — это набор из 896 иконок ручной работы. Этот пакет значков поставляется с версиями SVG и шрифтов. Значки можно использовать в качестве файлов SVG в ваших проектах в Интернете, печати или разработке приложений. Значки также можно использовать в качестве шрифта с заданными таблицами стилей CSS.Есть размеры 16px, 24px и 32px. Вы также можете выбрать заливку или обводку значков.
Fontisto Icon Pack Веб-сайт: https://fontisto.com/
Формат и тип: CSS
Цена и лицензия: Free, MIT
Fontisto — это набор векторных иконок. Иконки можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS. Продукт не требует Javascript.Иконки Fontisto являются векторными, а это значит, что они будут хорошо смотреться на мониторах с высоким разрешением.
На веб-сайте вы можете найти полную документацию и различные руководства по запуску и настройке продукта. Вы можете начать использовать продукт, просто вставив ссылку на свой сайт. Кроме того, вы можете использовать Fontisto с подходящими для вас менеджерами пакетов: npm, yarn, bower и т. Д.
Iconmonstr Веб-сайт: https://iconmonstr.com/
Формат и тип: SVG, EPS, PSD и PNG, Marketplace
Цена и лицензия: Бесплатно
Iconmonstr насчитывает более 4400 иконок.Каждый набор значков предлагает как очертания, так и варианты графики с заливкой, чтобы их можно было использовать в различных дизайнерских приложениях. Все значки на этом сайте доступны бесплатно, а файлы значков имеют такие форматы, как SVG, AI, PSD и PNG. Файлы можно использовать в коммерческих и бесплатных целях.
Iconmonstr упрощает поиск значков благодаря мощной функции поиска. Вы даже можете сохранить свои любимые значки в личной коллекции для использования в будущем.
Основные характеристики:
- бесплатное использование всех значков,
- четыре варианта загрузки формата и
- уменьшенных значков, оптимизированных для использования в Интернете.
Веб-сайт: 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 форматов файлов.
Веб-сайт: 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.
Каждый значок следует тонкой линии, и они идеально подходят для большинства веб-сайтов. Тот факт, что вы можете редактировать исходный источник, делает их еще более ценными.
Значки оптимизации Веб-сайт: https://streamlineicons.com/
Формат и тип: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Цена и лицензия: Бесплатно до $ 411
Streamline Icons — еще один красивый и легко адаптируемый бесплатный набор иконок на веб-рынке.Инструмент разделен на 53 категории с более чем 30000 векторными иконками.
Это один из немногих пакетов значков, оптимизированных для Sketch, позволяющий легко управлять шириной и цветом штриха. Встроенные функции Sketch, такие как символы и общие стили, позволяют быстро и легко повторно использовать элементы, например значки.
У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать значки прямо из браузера.
Основные характеристики:
- организовано более 30000 векторных иконок;
- Умные штрихи для изменения толщины контура;
- Эскиз, форматы AI, EPS, PDF, PNG, SVG;
- веб-приложение для поиска и редактирования значков;
- каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и жирный.
Веб-сайт: https://smashicons.com/
Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
Цена и лицензия: Бесплатно до $ 149
Smashicons предлагает обширную коллекцию иконок с более чем 219000 иконок в своей библиотеке. Smashicons работает немного иначе, чем другие: их цена основана на ежемесячном плане 5 долларов в месяц.Это означает, что за 5 долларов в месяц вы получаете доступ ко всей их коллекции существующих значков, а также к любым будущим значкам, которые они выпустят.
Основные характеристики:
- очень большая коллекция значков,
- все значки многоплатформенные,
- простое в использовании веб-приложение для поиска нужных значков, бизнес-модель
- на основе подписки,
- многоплатформенная поддержка.
Веб-сайт: https: // icons8.com /
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Лицензия Good Boy, бесплатно до 24 долларов США в месяц
Набор значков от Icons8 включает более 1 20000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей. Иконки созданы, чтобы имитировать внешний вид конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.
Иконки работают в Sketch, Photoshop и Xcode.Вы можете использовать веб-редактор перед загрузкой значков в свою систему.
Основные характеристики:
- форматы SVG, PNG и HTML;
- иконки доступны в разных стилях, например, значок линии, значок с заливкой и полноцветный;
- все значки можно скачать через файл .zip;
- редактировать перед загрузкой;
- как бесплатная, так и платная подписка.
Веб-сайт: https: // icomoon.io /
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Бесплатно до 139 долларов США в месяц
Icomoon представляет собой полноценный инструмент для иконографии и управления иконками. В продукте есть качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную в сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI. Набор иконок также постоянно обновляется его создателями.
Каждый пакет значков имеет подробное лицензирование, поэтому дизайнеры и разработчики точно знают, как можно использовать значки.Пользователи также могут создавать свои собственные шрифты для значков.
Основные характеристики :
- комплексные инструменты управления значками,
- бесплатные и платные варианты загрузки,
- широкий выбор форматов загрузки,
- бесплатные и простые обновления.
Веб-сайт: 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.
Web-сайт: 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 с дополнительными опциями;
- бесплатные и платные варианты загрузки;
- новых значка загружаются почти ежедневно.
Веб-сайт: 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
Выбор правильного набора значков для вашего проекта должен основываться не на том, что считается наиболее популярным, а на том, что лучше всего соответствует потребностям вашего проекта.Выбирая набор иконок, обратите внимание на то, насколько легко запустить проект, какие форматы присутствуют в библиотеке, и на цену.
Также важным фактором при выборе набора значков будет соответствие стилю вашего приложения или сайта.
Мы надеемся, что эта статья поможет вам выбрать наиболее подходящий премиум или бесплатный набор иконок для ваших нужд.
Возможно, вам понравятся эти статьи:
иконок веб-шрифтов | Стили и внешний вид пользовательского интерфейса Kendo
Начиная с выпуска R1 2017, Kendo UI предоставляет интегрированные значки шрифтов, предназначенные для веб-приложений, и виджеты визуализации данных пакета.В настоящее время доступно 577 иконок.
Эти значки можно использовать непосредственно в веб-проекте Kendo UI, назначив один из предопределенных классов CSS, представленных в списке значков шрифтов ниже. В следующем примере показано, как добиться такого поведения.
В следующем примере показано, как добавить значок шрифта к кнопке пользовательского интерфейса Kendo.
Копировать
Иконочные шрифты — это шрифты, содержащие векторные глифы вместо букв и цифр.Вы можете легко стилизовать их с помощью CSS, используя все свойства стиля, которые можно применить к обычному тексту в современном браузере.
Использование шрифтов значков в пользовательском интерфейсе (UI) естественным образом заменяет устаревшую технику спрайтов значков.
Значки шрифтов демонстрируют значительные преимущества, такие как:
- Улучшенная масштабируемость. Хотя спрайты значков являются растровыми изображениями и плохо масштабируются, шрифты значков используют векторную графику, отлично смотрятся на дисплеях Retina и делают масштабирование столь же простым, как установка параметра конфигурации font-size
.
- Улучшенные возможности дизайна - вы можете легко применять эффекты CSS на лету, задав цвет текста, тень или другие параметры для различных состояний взаимодействия. Например, на
: hover
. - Улучшенная поддержка браузера. Значки шрифтов не зависят от браузера и поддерживаются всеми современными браузерами.
- Уменьшенное количество HTTP-запросов. Чтобы загрузить иконочный шрифт, вам потребуется максимум несколько HTTP-запросов.
- Уменьшенный размер файла - файл размером 100 КБ содержит примерно 500 векторных значков.
Чтобы использовать значки шрифтов Kendo UI:
- Загрузите тему Kendo UI в свой проект.
Назначьте класс CSS
k-icon
, за которым следует предопределенный класс из списка значков шрифтов, тегу HTML. Например, элемент
Хотя шрифт веб-значков поставляется с набором предопределенных классов CSS, вам может потребоваться использовать значки с собственным именем класса CSS.Для этого установите значение псевдосодержания : до
для соответствующего значка.
<стиль>
.my-custom-icon-class: before {
content: "\ e13a"; / * Добавляет глиф, используя номер символа Unicode * /
}
Иконочные шрифты поддерживают следующие параметры визуального улучшения:
Регулировка размера
Значки шрифтов Kendo UI созданы на основе сетки 16 пикселей. Чтобы добиться идеального отображения значков, увеличивайте масштаб, сохраняя размер в 16 единиц (32, 48, 64 и т. Д.).
Вы можете масштабировать значки, просто установив параметр конфигурации font-size
.
<стиль>
.k-icon-32 {
размер шрифта: 32 пикселя; / * Устанавливает размер значка 32 пикселя * /
}
.k-icon-48 {
размер шрифта: 48 пикселей; / * Устанавливает размер значка 48 пикселей * /
}
.k-icon-64 {
размер шрифта: 64 пикселей; / * Устанавливает размер значка 64 пикселей * /
}
Настройка цветов
Чтобы установить цвет значка, используйте свойство color
CSS.
<стиль>
.colored-icon {
цвет: зеленый;
}
Применение перелистывания
Чтобы лучше разместить значок в приложении, переверните его с помощью предопределенных классов CSS k-flip-h
и k-flip-v
.
Значки шрифтов отсортированы по группам в зависимости от функции, которую они помогают вам проиллюстрировать.
Действия
- .k-i-undo
- .k-i-redo
- .k-i-reset
- .k-i-reload
.k-i-refresh
.k-i-повторение - .k-i-неповторение
- .k-i-reset-sm
- .k-i-reload-sm
.k-i-refresh-sm
.k-i-recurrence-sm - .k-i-часы
- .k-i-calendar .
- .k-i-save
.k-i-floppy - .k-i-print
.k-i-printer - .k-i-edit
.k-i-Pencil - .k-i-delete
.k-i-trash - .k-i-attachment
.k-i-clip . - .k-i-attachment-45
.k-i-clip-45 - .k-i-link-horizontal
.k-i-hyperlink . - .k-i-unlink-horizontal
.k-i-hyperlink-remove - .k-i-link-vertical
- .k-i-unlink-vertical
- .k-i-замок
- .k-i-unlock
- .k-i-set-column-позиция
- .K-i-Stick
- .k-i-unstick
- .k-i-cancel
- .k-i-cancel-outline
- .k-i-cancel-circle
- .k-i-check
.k-i-checkmark . - .k-i-check-outline
.k-i-checkmark-outline
.k-i-success - .k-i-check-circle
.k-i-checkmark-circle . - .k-i-close
.k-i-x - .k-i-close-outline
.k-i-x-outline
.k-i-error - .k-i-close-circle
.k-i-x-круг - .k-i-plus
- .k-i-plus-outline
- .k-i-plus-circle
- .k-i-minus
.k-i-kpi-trend-equal - .k-i-minus-outline
- .k-я-минус-круг
- .k-i-div
- .k-i-equal
- .k-i-not-equal
- .k-i-less-or-equal .
- .k-i-больше-или-равно
- .k-i-sort-asc
- .k-i-sort-desc .
- .k-i-unsort
- .k-i-sort-clear
- .k-i-sort-asc-sm
- .k-i-sort-desc-sm
- .k-i-фильтр
- .k-я-фильтр-прозрачный
- .k-i-filter-sm
- .k-я-фильтр-сортировка-asc-sm
- .k-i-filter-sort-desc-sm .
- .k-i-фильтр-добавить-выражение
- .k-я-фильтр-добавление-группа
- .k-i-login
- .k-i-logout
- .k-i-download
- .к-я-загрузка
- .k-i-hyperlink-open
- .k-i-hyperlink-open-sm
- .k-i-launch
- .k-i-window
.k-i-window-maximize . - .k-i-windows
.k-i-window-restore
.k-i-tile . - .k-i-window-минимизировать
- .k-i-gear
.k-i-cog
.k-i-custom . - .k-i-шестерни
.k-i-cogs - .k-i-wrench
.k-i-settings . - .k-i-preview
.k-i-eye . - .k-i-zoom
.k-i-search - .k-i-zoom-in
- .k-i-zoom-out
- .k-i-pan
.k-i-move . - .k-i-hand
- .k-i-cursor
- .k-i-калькулятор
- .k-i-cart
.k-i-shopping-cart . - .k-i-коннектор
- .k-i-plus-sm
- .k-i-minus-sm
- .k-i-kpi-status-deny
- .k-i-kpi-status-hold
- .k-i-kpi-status-open
- .k-i-штрих-код
- .k-i-barcode-outline
- .k-i-сканер штрих-кода
- .k-i-qr-код .
- .k-i-qr-code-outline
- .k-i-QR-код-сканер
- .k-i-сканер-штрих-кода-QR-код
- .k-i-подпись
- .k-i-accessibility
- .k-i-export
- .k-i-import
Оповещения и уведомления
- .k-i-notification
.k-i-bell - .k-i-информация
.k-i-info - .k-i-question
.k-i-help . - .k-i-warning
.k-i-exception
Редактирование
- .k-i-page-свойства
- .k-i-bold
- .k-i-italic .
- .k-i-underline
- .k-i-font-family .
- .k-i-цвет переднего плана
- .k-i-convert-нижний регистр
- .k-i-convert-uppercase
- .k-i-strikethrough
- .k-i-sub-script
- .k-i-sup-скрипт
- .k-i-div
- .k-i-all
- .k-i-h2
- .k-i-h3
- .k-i-h4
- .k-i-h5
- .k-i-h5
- .k-i-h6
- .k-i-list-order
.k-i-list-numbered - .k-i-list-unordered
.k-i-list-bulleted - .k-i-list-roman-upper
- .k-i-list-roman-lower
- .k-i-indent-увеличение
. k-i-indent - .k-i-indent-reduce
.k-i-outdent - .k-i-insert-up
.k-i-insert-top - .k-i-insert-middle
- .k-i-insert-down
.k-i-insert-bottom - .k-i-align-top
- .k-i-align-middle
- .k-i-align-bottom
- .k-i-align-left
- .k-i-align-center
- .k-i-align-right
- .k-i-align-justify
- .k-i-align-remove
- .k-i-text-wrap
- .k-i-rule-horizontal
- .k-i-table-position-left
- .k-i-table-position-center
- .k-i-table-position-right .
- .k-i-table-align-top-left
- .k-i-table-align-top-center
- .k-i-table-align-top-right .
- .k-i-table-align-middle-left
- .k-i-table-align-middle-center
- .k-i-table-align-middle-right .
- .k-i-table-align-bottom-left
- .k-i-table-align-bottom-center
- .k-i-table-align-bottom-right
- .k-i-table-align-remove
- .k-i-границ-все
- .k-i-границ-за пределами
- .k-я-границы-внутри
- .k-i-border-inside-horizontal .
- .k-i-border-inside-vertical
- .k-i-border-top
- .k-i-border-bottom
- .k-i-border-left
- .k-i-border-right
- .k-i-border-no .
- .k-я-границы-показать-скрыть
- .k-i-form
.k-i-border - .k-i-form-element
- .k-i-code-snippet .
- .k-i-select-all
- .k-i-button
- .k-i-select-box .
- .k-i-calendar-date .
- .k-i-group-box .
- .k-i-textarea .
- .k-i-textbox
- .k-я-текстовое поле-скрытый
- .k-i-пароль
- .k-i-paragraph-add
- .k-i-edit-tools
- .k-я-шаблон-менеджер
- .k-i-change-вручную
- .k-i-track-change
- .k-i-track-changes-enable .
- .k-i-track-changes-accept
- .k-i-track-changes-accept-all .
- .k-i-track-changes-отклонить
- .k-i-track-changes-reject-all .
- .k-i-document-manager .
- .k-i-custom-icon
- .k-я-словарь-добавить
- .k-i-image-light-dialog
.k-i-image-insert . - .k-i-image-edit
- .k-я-редактор изображений-карт
- .k-i-comment
- .k-я-комментарий-удалить
- .k-я-комментарии-удалить-все
- .k-i-silverlight
- .k-i-media-manager .
- .k-i-video-external
- .k-i-flash-менеджер
- .k-i-найти-и-заменить
.к-я-найти - .k-i-copy
.k-i-файлы - .k-i-cut
- .k-i-paste
- .k-i-paste-as-html .
- .k-i-paste-from-word .
- .k-i-paste-from-word-strip-file
- .k-i-paste-html .
- .k-i-paste-markdown
- .k-i-paste-plain-текст
- .k-i-apply-format
- .k-i-clear-css .
- .k-i-copy-format
- .k-i-strip-all -formating
- .k-i-strip-css-формат
- .k-i-strip-font-elements
- .k-i-strip-span-элементы
- .k-i-strip-word-formatting .
- .k-i-формат-код-блок
- .k-i-style-builder .
- .k-я-модуль-менеджер
- .k-i-hyperlink-light-dialog
.k-i-hyperlink-insert - .k-i-hyperlink-глобус
- .k-я-гиперссылка-глобус-удалить
- .k-i-hyperlink-email .
- .к-я-якорь
- .k-i-table-light-dialog
.k-i-table-insert - .k-i-таблица
.k-i-table-unmerge - .k-я-таблица-свойства
- .k-i-table-cell
- .k-я-свойства-таблицы-ячейки
- .k-я-таблица-столбец-вставка-слева
- .k-i-таблица-столбец-вставка-справа
- .k-i-table-row-insert-выше
- .k-i-table-row-insert-below
- .k-я-таблица-столбец-удалить
- .k-я-таблица-строка-удалить
- .k-я-таблица-ячейка-удалить
- .k-я-таблица-удалить
- .k-я-ячейки-слияние
- .k-i-cell-merge-горизонтально
- .k-i-cell-merge-вертикально
- .k-i-cell-split-Horizontally .
- .k-i-cell-split-vertical
- .k-i-pane-freeze
- .k-i-row-freeze
- .k-i-column-freeze
- .k-i-toolbar-float
- .k-i-проверка орфографии
- .k-i-validation-xhtml .
- .k-i-данные-валидации
- .k-i-toggle-полноэкранный режим
- .k-я-формула-FX
- .k-i-sum
- .k-i-символ
- .k-i-доллар
.k-i-currency - .k-i-процент
- .k-i-пользовательский-формат
- .k-i-десятичное-увеличение
- .k-i-десятичное-уменьшение
- .k-i-font-size .
- .k-i-image-absolute-position
- .k-i-strip-all-formatting
- .k-i-crossstab .
- .k-i-table-body
- .k-я-таблицы-столбцы-группы
- .k-i-table-уголок
- .k-i-таблицы-строки-группы
Файлы и папки
- .k-i-папка
- .k-i-folder-open
- .k-i-folder-add
- .k-i-folder-up
- .k-i-folder-more
.k-i-fields-more - .k-i-агрегатные поля
- .k-i-file
.k-i-file-vertical . - .k-i-file-add
- .k-i-файл-txt
.k-i-txt - .k-i-файл-csv
.k-i-csv - .k-i-file-excel
.k-i-file-xls
.k-i-excel
.k-i-xls . - .k-i-file-word
.k-i-file-doc
.k-i-word
.k-i-doc . - .k-i-file-mdb
.k-i-mdb . - .k-i-file-ppt
.k-i-ppt - .k-i-file-pdf
.k-i-pdf - .k-i-file-psd
.k-i-psd . - .k-i-файл-вспышка
.k-i-flash - .k-i-файл-config
.k-i-config - .k-i-файл-ascx
.k-i-ascx - .k-i-file-bac
.k-i-bac - .k-i-file-zip
.k-i-zip . - .k-i-film
- .k-i-css3
- .k-i-html5
- .k-i-html
.k-i-source-code
.k-i-view-source . - .k-i-css
- .k-i-js
- .k-i-exe
- .k-i-csproj .
- .k-i-vbproj
- .k-i-cs .
- .k-i-vb
- .k-i-sln .
- .k-i-cloud
- .k-i-file-горизонтальный
- .k-i-subreport
- .k-i-data
- .k-i-report-header-section .
- .k-i-report-footer-section .
- .k-я-группа-заголовок-раздел
- .k-i-group-footer-section
- .k-i-page-header-section .
- .k-i-page-footer-section
- .k-i-detail-section
- .k-i-toc-section
- .k-i-group-section
- .k-i-parameters
- .k-i-data-csv .
- .k-i-data-json .
- .k-я-данные-sql
- .k-i-data-web .
- .k-я-группа-коллекция
- .k-i-параметр-boolean
- .k-я-параметр-дата-время
- .k-i-параметр-float
- .k-i-параметр-целое число
- .k-i-строка-параметров
- .k-i-параметры-байтовый-массив
- .k-я-параметры-неизвестно
- .k-i-toc-section-level .
- .k-i-унаследовано
- .k-я-файл-видео
- .k-я-файл-аудио
- .k-i-файл-изображение
- .k-i-файл-презентация
- .k-i-файл-данные
- .k-я-файл-образ диска
- .k-i-файл-программирование
- .k-я-файл-ошибка
- .k-я-файлы-ошибка
- .k-i-data-rest
- .k-i-файл-машинописный текст
Изображений
- .k-i-photo-camera .
- .k-i-image
.k-i-photo . - .k-i-images
- .k-i-image-export
.k-i-photo-export - .k-i-zoom-фактический размер
- .k-i-zoom-best-fit
- .k-я-изображение-изменение размера
- .k-i-crop
- .k-i-зеркало
- .k-i-flip-horizontal
- .k-i-flip-vertical
- .k-i-rotate
- .k-i-rotate-right
- .k-i-rotate-left
- .k-i-brush .
- .k-i-palette
- .k-i-paint
.k-i-droplet
.k-i-background . - .k-i-line
.k-i-shape-line - .k-i-яркость-контраст
- .k-я-насыщенность
- .k-я-инвертировать цвета
- .k-i-transperancy
.k-i-opacity - .k-i-greyscale
- .k-i-blur
- .k-i-точилка
- .k-i-shape
- .k-i-round-corners
- .k-i-front-element
- .k-i-back-element
- .k-i-forward-element
- .k-i-backward-element
- .k-i-align-left-element
- .k-i-align-center-element
- .k-i-align-right-element
- .k-i-align-top-element
- .k-i-align-средний-элемент
- .k-i-align-bottom-element
- .k-i-align-stretch-element-horizontal .
- .k-i-align-stretch-element-vertical .
- .k-i-align-align-left-elements .
- .k-i-align-center-elements
- .k-i-align-right-elements
- .k-i-align-stretch-elements-horizontal
- .k-i-align-baseline-horizontal
- .k-i-align-top-elements
- .k-i-align-middle-elements
- .k-i-align-bottom-elements
- .k-i-align-stretch-elements-vertical
- .k-i-align-baseline-vertical
- .k-i-justify-start-horizontal
- .k-i-justify-center-horizontal
- .k-i-justify-end-horizontal
- .k-i-justify-between-horizontal
- .k-i-justify-around-horizontal
- .k-i-justify-start-vertical
- .k-i-justify-center-vertical
- .k-i-justify-end-vertical
- .k-i-justify-between-vertical
- .k-i-justify-around-vertical
- .k-i-thumbnail-up .
- .k-i-thumbnail-right
- .k-i-thumbnail-down
- .k-i-thumbnail-left
- .k-i-full-screen
.k-i-full-screen - .k-i-full-screen-exit
.k-i-full-screen-exit . - .k-i-reset-color
.k-i-paint-remove
.k-i-background-remove - .k-i-align-to-grid .
- .k-i-size-to-grid .
- .k-i-make-same-size .
- .k-i-make-same-width
- .k-i-make-same-height .
- .k-i-make-horizontal-spacing-equal
- .k-i-Увеличить расстояние по горизонтали
- .k-i-reduce-horizontal-spacing
- .k-i-remove-horizontal-spacing
- .k-i-make-vertical-spacing-equal
- .k-i-Увеличить-вертикальный-интервал
- .k-i-reduce-vertical-spacing
- .k-i-remove-vertical-spacing
- .k-i-eyedropper .
- .k-i-snap-сетка
- .k-i-snap-to-gridlines .
- .k-i-snap-to-snaplines .
- .k-i-sizes
Схема и навигация
- .k-i-arrow-45-up-right
.k-i-collapse-ne
.k-i-resize-ne - .k-i-arrow-45-down-right
.k-i-collapse-se
.k-i-resize-se - .k-i-arrow-45-down-left
.k-i-collapse-sw
.k-i-resize-sw . - .k-i-arrow-45-up-left
.k-i-collapse-nw
.k-i-resize-new - .k-i-arrow-60-up
.k-i-kpi-тренд-увеличение - .k-i-arrow-60-right .
- .k-i-arrow-60-down
.k-i-kpi-тренд-уменьшение - .k-i-arrow-60-left
- .k-i-arrow-end-вверх
- .k-i-arrow-end-right
- .k-i-arrow-end-down
- .k-i-arrow-end-left
- .k-i-arrow-double-60-up
- .k-i-arrow-seek-up
- .k-i-arrow-double-60-right
.k-i-forward-sm - .k-i-arrow-seek-right
- .k-i-arrow-double-60-down
- .k-i-arrow-seek-down
- .k-i-arrow-double-60-left
.k-i-rewind-sm - .k-i-стрелки-kpi
.k-i-kpi - .k-i-стрелки-без изменений
- .k-i-arrow-overflow-вниз
- .k-i-arrow-chevron-up
- .k-i-arrow-chevron-right
- .k-i-arrow-chevron-down
- .k-i-arrow-chevron-left
- .k-i-arrow-up
- .k-i-arrow-right
- .k-i-arrow-down
- .k-i-arrow-left
- .k-i-стрелка-дрель
- .k-i-arrow-parent
- .k-i-корень-стрелка
- .k-i-стрелки-изменение размера
- .k-i-стрелки-размеры
- .k-i-стрелки-своп
- .k-i-drag-and-drop
- .k-i -ategorize
- .k-i-grid
- .k-i-grid-layout
- .k-i-group
- .k-i-ungroup
- .k-i-handler-drag
- .k-i-layout
- .k-i-layout-1-by-4
- .k-i-layout-2-by-2
- .k-i-layout-side-by-side .
- .k-i-layout-stacked
- .k-i-columns
- .k-i-rows
- .k-i-reorder
- .k-i-menu
- .k-i-more-vertical
- .k-i-more-horizontal
- .k-i-home
- .k-i-overlap
Отображение
- .k-я-глобус-контур
- .k-i-глобус
- .k-i-marker-pin .
- .k-i-marker-pin-target
- .k-i-контактный
- .k-i-unpin
Медиа
- .k-i-play
- .k-i-pause
- .k-i-stop
- .k-i-rewind
- .k-i-вперед
- .k-i-volume-down
- .k-i-volume-вверх
- .k-i-volume-off
- .k-i-hd
- .k-i-субтитры
- .k-i-плейлист
- .k-i-audio
Социальный обмен
- .k-i-share
- .k-я-пользователь
- .k-i-inbox
- .k-i-blogger .
- .k-i-blogger-box .
- .k-я-вкусный
- .k-i-Delicious-box
- .k-i-digg
- .k-i-digg-box .
- .k-i-email
.k-i-envelop
.k-i-letter . - .k-i-email-box
.k-i-envelop-box
.k-i-letter-box - .k-i-facebook
- .k-i-facebook-box .
- .k-i-google
- .k-i-google-box
- .k-i-google-plus .
- .k-i-google-plus-box .
- .k-i-linkedin
- .k-i-linkedin-box
- .k-i-myspace
- .k-i-myspace-box
- .k-i-pinterest .
- .k-i-pinterest-box .
- .k-i-reddit .
- .k-i-reddit-box .
- .k-я-наткнулся на
- .k-i-stumble-on-box
- .k-i-tell-a-friend
- .k-я-расскажи-другу-ящик
- .k-i-tumblr .
- .k-i-tumblr-box .
- .k-i-twitter .
- .k-i-twitter-box .
- .k-i-yammer .
- .k-i-yammer-box .
- .k-я-поведение
- .k-i-beence-box
- .k-i-dribbble
- .k-i-dribbble-box
- .k-i-rss .
- .k-i-rss-box .
- .k-i-vimeo .
- .k-i-vimeo-box .
- .k-i-youtube
- .k-i-youtube-box .
Переключить
- .k-i-heart-outline
.k-i-fav-outline
.k-i-избранное-outline - .k-i-heart
.k-i-fav
.k-i-любимый - .k-i-star-outline
.k-i-bookmark-outline - .k-i-star
.k-i-bookmark . - .k-i-checkbox
.k-i-shape-rect - .k-i-checkbox-checked
- .k-i-tri-state-undeterminate
- .k-i-tri-state-null
- .k-i-circle
- .k-i-radiobutton
.k-i-shape-circle - .k-i-radiobutton-checked
Графики
- .k-i-graph
- .k-i-кластеризованный по столбцам
- .k-i-column-stacked
- .k-i-column-stacked100
- .k-i-диапазон-столбцов
- .k-i-bar-кластеризованный
- .k-i-bar-stacked
- .k-i-bar-stacked100
- .k-i-bar-диапазон
- .k-i-кластеризованная область
- .k-i-area-stacked
- .k-i-area-stacked100
- .k-i-area-диапазон
- .k-i-line-stacked
- .k-i-line-stacked100
- .k-i-line-markers
- .k-i-line-stacked-markers
- .k-i-line-stacked100-markers
- .k-i-pie
- .k-i-donut
- .k-i-scatter
- .k-i-scatter-smooth-lines-markers .
- .k-i-scatter-гладкие линии
- .k-i-scatter-прямые-маркеры
- .k-i-scatter-прямые
- .k-i-bubble
- .k-i-подсвечник
- .k-i-bar
- .k-i-radar
- .k-i-radar-markers .
- .k-i-radar-fill-заполненный
- .k-i-rose
- .k-i-choropleth .
Как добавить значок на свой веб-сайт с помощью HTML
Часть серии: Как создать веб-сайт с помощью HTMLЭта серия руководств проведет вас через создание и дальнейшую настройку этого веб-сайта с использованием HTML, стандартного языка разметки, используемого для отображения документов в веб-браузере.Предварительный опыт программирования не требуется, но мы рекомендуем вам начать с начала серии, если вы хотите воссоздать демонстрационный веб-сайт.
В конце этой серии статей у вас должен быть веб-сайт, готовый к развертыванию в облаке, и базовые знания HTML. Знание того, как писать HTML, обеспечит прочную основу для изучения дополнительных навыков интерфейсной веб-разработки, таких как CSS и JavaScript.
В этом руководстве мы рассмотрим шаги, связанные с добавлением значка на вашу веб-страницу с помощью HTML.Вы можете использовать любое изображение для своего значка, но имейте в виду, что простые высококонтрастные изображения часто работают лучше всего, учитывая небольшой размер значка. Вы также можете создать собственный значок на таких сайтах, как favicon.cc.
Значок - это небольшое изображение, которое находится на вкладке браузера слева от заголовка веб-страницы. На изображении ниже показано расположение значка.
Чтобы добавить значок на свой сайт, создайте в каталоге проекта папку с именем изображения
(если у вас его еще нет) и сохраните желаемое изображение значка в этой папке.Если у вас нет изображения, загрузите это изображение Сэмми Акулы, которое мы разместили на нашем демонстрационном веб-сайте. (Чтобы узнать больше о том, как добавлять изображения на веб-страницы с помощью HTML, посетите наш учебник HTML-изображения из ранее в этой серии руководств.