Иконки html для сайта: Таблица пиктограмм и иконок HTML с кодами


18.05.2021 Facebook Twitter LinkedIn Google+ Разное


Содержание

Html css Icons - 61 free vector icons

  • Authors
  • Packs
  • Uicons New
  • More Tools

    Other products

    Freepik Free vectors, photos and PSD Freepik online editor Edit your Freepik templates Slidesgo Free templates for presentations Storyset Free editable illustrations

    Tools

    Icon pattern Create icon patterns for your wallpapers or social networks

    Google Workspace

    Icons for Slides & Docs +2. 5 million of free customizable icons for your Slides, Docs and Sheets
  • English
    • Español
    • English
    • Deutsch
    • Portuguès
    • Français
    • 한국어
    • Pусский
  • Become a contributor
  • Pricing
  • Register free
  • Login
Login Register
Filters

Type

Icon

Pack


License

All

Free

Premium


Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?


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

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows


Десктопные браузеры


Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android


Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

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

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72. png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192x192. png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192x192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)


iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

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

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS


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

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color="#e52037".

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows


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

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

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

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:
<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:
<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

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

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

  • Small — 70x70 (Рекомендуемый размер: 128x128)
  • Medium — 150x150 (Рекомендуемый размер: 270x270)
  • Wide — 310x150 (Рекомендуемый размер: 558x270)
  • Large — 310x310 (Рекомендуемый размер: 558x558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70x70. То же самое нужно проделать с остальными размерами.

Подготовка favicons


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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение


Последовательность подключения в разметке веб-сайта:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120. png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70. png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Размещение иконок на странице сайта. Делать проще, поддерживать легче / Хабр

Все должно быть изложено так просто, как только возможно, но не проще.
А. Эйнштейн

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

HTML

<div>
  <div>
      <i aria-hidden="true"></i>
      <span>menu</span>
    </div>
</div>

CSS
.bl_button__wrapp{
  width: 100%;
  margin: 5% auto;
  font-size: 30px;
  line-height: 34px;
  color: blue
}
.bl_button{
  position: relative;
  width: 150px;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #00f;
  cursor:pointer;
}

.fa-bars{
  position: absolute;
  left: 10px;
  font-size: 34px;
}
.bl_button__text{
  display: inline-block;
}

See the Pen bad button by Andry Zirka (@BlackStar1991) on CodePen.

Это стандартная форма описания кнопки. Я сам долгое время примерно так писал свой код. Данное написание особо практикуется теми, кто использует готовые иконочные шрифты на подобии FontAwesome
Небольшие трудности возникают если текст должен быть по центру, а иконка несколько смещена относительно текста. Но всё это прекрасно решаемо через свойство position:absolute; задаваемое иконке. Также бывают проблемы с позиционированием данной иконки при адаптивности кнопки, но это другая история.

Теперь я хотел бы описать свой метод оформления иконок в тексте страници (на примере всё того же FontAwesome).

HTML

<button>
  <span>menu</span>
</button>

<button>
  <span>Съешь ещё этих мягких французских булок.</span>
</button>

CSS
.button_menu{
  
  min-width: 280px;
  margin-top: 5%;
  margin-left: 4%;

  font-size: 4em;
  color: blue;
  border: 1px solid #00f;
  
  outline:none; /* Убираем если вас это смущает по дизайну*/
  background:none;  /* Убираем если вас это смущает по дизайну*/
}

. button_menu__text{
  position:relative;
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  padding: 10px 40px; 
}
.button_icon__menu:before{
  content: "\f0c9";
  font-family: FontAwesome;
  position: absolute;
  left: 0px;
  top: 14px;
}

See the Pen good button by Andry Zirka (@BlackStar1991) on CodePen.



Преимущества такого описания.

1) Кода стало меньше. (Это существенно облегчит вам жизнь на масштабных проектах).

2) Код стал семантически более верным. Если div(или любой другой тег) функционально у Вас выполняет назначение кнопки, то и делайте его через тег button *Иначе возможны проблемы, особенно с Apple устройствами для которых придется прописывать type=«button» для вашего не правильного тега.

3) span размещенный внутри button всегда выравнивается по центру. (*Можно сменить ему display: если вам важны внутренне отступы).

4) Как вы могли заметить, вся суть моего оформления в том что я выношу изображение иконки через псевдо класс :before (:after) и позиционирую его абсолютно. При этом у его родителя span установлен position:relative; (! Важно, чтобы для иконки присваивался отдельный класс).

5) Иконка будет всегда на своем месте относительно span, даже если у вас предусмотрена смена языка, и скажем, в другом языке данное слово могло бы визуально перекрыть иконку.

6) Иконки, оформленные таким образом легко менять, особенно если вы используете препроцессоры (SASS, SCSS, LESS...), просто добавь нужный класс к нужному элементу.

Недостатки такого описания: (а куда же без них).

1) При использовании тега button довольно часто приходится сбрасывать или переопределять стили, иначе выглядит не очень.

outline:none; 
 background:none; 
 border:none; 

2) Для каждого родительского (span) допустимо одновременно отображать только две иконки, собственно на псевдокласс :before и :after.

3) Если вы, как и я, довольно часто в своих работах используете FontAwesome, вам чаще придется посещать их официальный сайт, что бы выучить Unicode каждой иконки

Это несколько сложнее чем просто прописать классы fa fa-bars. Здесь есть и полный список иконок

4) Поскольку я в написании своего CSS стараюсь придерживаться методологии, то у меня для родительского элемента может быть и довольно много классов

<button>
  <span>menu</span>
</button>

Но если вас не пугает 4-5 классов для элемента, тогда Welcome.

HTML: Фавикон (favicon) - создание, добавление, польза

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

Фавикон (favicon - это сокращение от Favorite icon, в переводе с анг. означает любимый значок) - иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:


<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

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

Google ChromeInternet ExplorerFirefoxOperaSafari
<link rel="shortcut icon"
href="httр://mysite.ru/myicon.ico">
ДаДаДаДаДа
<link rel="icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 9)ДаДаДа
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/x-icon" href="httр://mysite. ru/image.ico">ДаДа (с IE 9)ДаДаДа

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

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-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "/icon-192x192.png", "sizes": "192x192", "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-144x144.png",

            "sizes": "144x144",

            "type": "image/png"

        },

        {

            "src": "/icon-192x192. png",

            "sizes": "192x192",

            "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-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version="1. 0" encoding="utf-8"?>

<browserconfig>

    <msapplication>

        <tile>

            <square150x150logo src="/mstile-150x150.png"/>

            <square310x310logo src="/mstile-310x310.png"/>

            <TileColor>#da532c</TileColor>

        </tile>

    </msapplication>

</browserconfig>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48×48

96×96

144×144

192×192

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

256×256

384×384

512×512

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

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

<link rel="icon" type="image/png" href="icon-48.png">

<link rel="icon" type="image/png" href="icon-96.png">

<link rel="icon" type="image/png" href="icon-144.png">

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

<link rel="icon" type="image/png" href="icon-256.png">

<link rel="icon" type="image/png" href="icon-384. png">

<link rel="icon" type="image/png" href="icon-512.png">

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

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

120×120: iPhone

152×152: iPad

167×167: iPad Retina

180×180: iPhone Retina

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

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

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

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

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

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

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

57×57

60×60

72×72

76×76

114×114

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

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

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

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

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

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

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

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

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

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

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

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

Плитки Microsoft Windows

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

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

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

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

Плитки Microsoft Windows

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

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

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

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

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

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

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

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

<meta name="msapplication-TileColor" content="#ff0000">

<meta name="msapplication-TileImage" content="/ms-tile-144.png">

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

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

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

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/ms-tile-126.png"/> <square150x150logo src="/ms-tile-270.png"/> <wide310x150logo src="/ms-tile-558x270.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-558x270.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": "192x192", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }

{

    "name": "",

    "short_name": "",

    "icons": [

        {

            "src": "/icon-192.png",

            "sizes": "192x192",

            "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-150x150.png"/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

  <msapplication>

    <tile>

      <square150x150logo src="/mstile-150x150.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-32x32.png"> <link rel="icon" type="image/png" href="/icon-16x16.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-32x32.png">

<link rel="icon" type="image/png" href="/icon-16x16.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 с помощью кода, без использования картинок. При этом сделать иконки можно очень быстро и крайне просто, в частности мы рассмотрим один из занимательных способов использования иконок для сайта, а именно — будем использовать иконки Юникода в HTML.

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

НУЖНЫ ЛИ НАМ ИКОНКИ ДЛЯ САЙТА?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

ВАРИАНТЫ ИСПОЛЬЗОВАНИЯ ИКОНОК НА САЙТЕ

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

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

Второй путь состоит в «рисовании» иконок через CSS. Это довольно оригинальный способ «на любителя». Подходит он только в некоторых конкретных случаях, например для рисования стрелок. Скажем, у нас есть элементы списка HTML и для каждого элемента необходима простая треугольная стрелочка. Некоторые «рисуют» ее средствами CSS. На мой взгляд этот вариант все же неоправданно избыточен, поскольку CSS используется не совсем по назначению.

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

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

Ну и количество иконок не может не впечатлять: 585 иконок в наборе на момент написания статьи.

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

<ul> <li><a href="#">Item 1</a></li> </ul>

<ul>

<li><a href="#">Item 1</a></li>

</ul>

Теперь в стилях уберем стандартные маркеры для элементов списка:

Скачаем и подключим иконочный шрифт Font Awesome. Из полученного после скачивания архива нас интересует папка fonts, в которой находится иконочный шрифт. Ее мы положим рядом с папкой css. Ну а в папку css положим файл стилей шрифта и подключим его в HTML:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

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

Иконка найдена, вставим ее перед каждым элементом:

<ul> <li><i></i><a href="#">Item 1</a></li> </ul>

<ul>

<li><i></i><a href="#">Item 1</a></li>

</ul>

И немного оформим:

ul li i.fa{ margin-right: 10px; font-size: 15px; color: #ff0000; }

ul li i.fa{

margin-right: 10px;

font-size: 15px;

color: #ff0000;

}

В итоге мы получим симпатичную иконку для сайта.

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

Однако у иконочных шрифтов есть совсем небольшой минус — их необходимо подключать к сайту, а это дополнительные килобайты данных, иногда даже сотни килобайт. Это, конечно, немного. Но если нам нужно использовать, скажем, одну-две иконки, то подключать ради них целый шрифт… эта идея немногим может понравиться. Что же делать, спросите вы? Неужели придется вернуть к первому варианту с картинкой? Нет, не обязательно. Мы можем добавить иконку на сайт без картинки и без дополнительных шрифтов. И для этого мы обратимся к иконкам Юникода в HTML.

ИКОНКИ ЮНИКОДА

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

Давайте найдем там галочку, возьмем ее код и добавим для наших элементов. Сделать это можно двумя путями (для каждого символа предлагается 2 кода):

Учебное пособие по иконам



Как добавить значки

Чтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML.

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

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


Font Awesome 5 иконок

Чтобы использовать значки Free Font Awesome 5, перейдите по ссылке fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

Узнайте больше о том, как начать работу с Font Awesome, в нашем Font Awesome 5 глава.

Примечание: Скачивание или установка не требуется!

Пример




yourcode .js ">






Попробуй сам "

Font Awesome 4 иконки

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

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Bootstrap 3 иконки

Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Примечание: Глификоны не поддерживаются в Bootstrap 4.

Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.


Google Иконки

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

Примечание: Скачивание или установка не требуется!

Пример





облако
избранное
вложение
компьютер
трафик


Попробуй сам "

Чтобы просмотреть полный список ВСЕХ значков (font awesome, bootstrap и google), посетите Ссылка на значок.



Как добавить значок логотипа в строку заголовка с помощью HTML?

Как добавить значок логотипа в строку заголовка с помощью HTML?

Большинство веб-сайтов добавляют значок или логотип в виде изображения в строку заголовка. Значок-логотип также называется значком. Добавление значков также считается полезным для SEO веб-сайтов. Фавикон - это комбинация значка избранного.

Атрибут ссылки используется для добавления значка.

Синтаксис:

  

Пример:

< html >

< головка >

< meta charset = "utf-8" />

< титул >

GeeksforGeeks значок

титул >

< ссылка отн. = «значок» href =

тип = "изображение / x-значок" >

голова >

< корпус >

< h2 style = "цвет: зеленый;" >

GeeksforGeeks

h2 >

< p >

Значок GeeksforGeeks добавлен в строку заголовка

p >

корпус >

html >

Выход:

значков дизайна материалов, значков материалов, значков контактной карты

Инструменты веб-разработки

  • Дом
  • Материал UI Цвета
  • Плоские цвета пользовательского интерфейса
  • Свободные цвета
  • Социальные цвета
  • Цвета Метро
  • цветов HTML
  • Палитра цветов
  • Значки материалов пользовательского интерфейса
  • символов Юникода
  • Блог
  • Обратная связь
  • О Material Design
  • Как использовать
  • Страница 404 * С музыкой *
  • О нас
Создано
Hem И суровый @ 7Span
    • Цвета материального дизайна
    • Плоские цвета пользовательского интерфейса
    • Свободные цвета
    • Социальные цвета
    • Цвета Метро
    • цветов HTML
    • Палитра цветов
    • Значки материалов пользовательского интерфейса
    • символов Юникода
    • Обратная связь
    • Показать количество кликов
    • Показать идентификаторы цвета
    • Показать заголовок
    • Показать 30 лучших цветов
    • Палитра полной ширины

WhatsApp CRM

    • 3d вращение

      • черный
      • серый
      • белый
      • SVG
      • 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192
      • 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192
      • 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192
      • 24X2448X48
    • доступность

      • черный
      • серый
      • белый
      • SVG
      • 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192
      • 18X1824X2427X2736X3648X4854X5472X7296X96108X108144X144192X192 24X2448X48
    • доступны
      • черный белый
      SVG
      • 18X1824X2436X3648X4854X5472X7296X96108X108144X144192X192 18X1824X2436X3648X4854X5472X72 96X96108X108144X144192X192
      • 24X2448X48

    Компонент значка - документация UIkit

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

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


    Чтобы применить этот компонент, добавьте любой .uk-icon- * класс к элементу или . Et voilà, у вас есть векторный значок, который наследует размер и цвет, как и ваш текст.

    Примеры

    • Использует .uk-icon-cog class
    • Использует .uk-icon-user class
    • Использует .uk-icon-home класс
    • Значок в ссылке
    Кнопка со значком

    Разметка

      
     
    
    
       ...   

    Группа кнопок

    В этом примере показана группа кнопок из компонента Button со значками внутри каждой кнопки.

    Пример

    Раскрывающаяся кнопка

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

    Пример

    Цитаты

    В этом примере показана цитата из базового компонента с большим значком цитаты.Он также использует класс .uk-align-left из компонента Utility.

    Пример

    Элемент

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


    Добавьте .uk-icon-small , .uk-icon-medium или .uk-icon-large к значку, чтобы сделать его больше.

    • Это размер по умолчанию.
    • В этом значке используется класс .uk-icon-small .
    • В этом значке используется класс .uk-icon-medium .
    • В этом значке используется .uk-icon-large класс.

    Добавьте класс .uk-icon-spin для создания анимированных вращающихся значков.

    • Значок счетчика для загрузки содержимого ...
    • Значок обновления для обновления содержимого ...

    Используйте модификатор .uk-icon-hover class, чтобы использовать привязку в качестве значка, применяя эффект наведения и удаляя подчеркивание ссылки.

    Пример

    Разметка

         

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

    Пример

    Разметка

         

    Чтобы добавить фиксированную ширину к значку и центрировать его, добавьте .uk-icon-justify класс. Это полезно при использовании разных значков в списке.

    Пример

    • Значок по ширине
    • Значок по ширине
    • Значок по ширине
    • Значок по ширине

    Разметка

         

    Вот обзор всех доступных .uk-icon- * классы, предоставленные Font Awesome.

    Иконки веб-приложений

    • отрегулировать
    • анкер
    • архив
    • диаграмма с областями
    • стрелки
    • стрелки-h
    • стрелки-v
    • звездочка
    • при
    • автомобиль (псевдоним)
    • весы
    • бан
    • банк (псевдоним)
    • гистограмма
    • bar-chart-o (псевдоним)
    • штрих-код
    • прутков
    • батарея разряжена (псевдоним)
    • аккумулятор-0
    • аккумулятор четверть (псевдоним)
    • аккумулятор-1
    • аккумуляторная половина (псевдоним)
    • аккумулятор-2
    • батарея-три четверти (псевдоним)
    • АКБ-3
    • батарея полная (псевдоним)
    • АКБ-4
    • кровать
    • пиво
    • звонок
    • звонок-о
    • косая черта
    • колокол-слэш-о
    • велосипед
    • бинокль
    • торт ко дню рождения
    • bluetooth
    • bluetooth-b
    • болт
    • бомба
    • книга
    • закладка
    • закладка-o
    • портфель
    • ошибка
    • корпус
    • корпус
    • мегафон
    • яблочко
    • автобус
    • cab (псевдоним)
    • калькулятор
    • календарь
    • календарь-чек-о
    • календарь-минус-о
    • календарь-о
    • календарь плюс о
    • Calendar-Times-o
    • камера
    • камера-ретро
    • легковой
    • каретка-квадрат-o-вниз
    • каретка-квадрат-o-левая
    • каретка-квадрат-o-правая
    • каретка-квадрат-вверх
    • тележка-стрелка-вниз
    • тележка плюс
    • куб.см
    • сертификат
    • чек
    • контрольный круг
    • контрольный круг-о
    • клетка
    • чек-квадрат
    • детский
    • круг
    • по кругу
    • по кругу
    • тонкий круг
    • часы-о
    • клон
    • закрыть (псевдоним)
    • облако
    • облако-скачать
    • загрузка в облако
    • код
    • код вилки
    • кофе
    • зубец
    • шестерни
    • комментарий
    • комментарий-o
    • комментируют
    • комментарий-о
    • комментариев
    • комментариев-o
    • компас
    • авторское право
    • Creative-Commons
    • кредитная карта
    • кредитная карта-альт
    • урожай
    • перекрестие
    • куб
    • кубиков
    • столовые приборы
    • приборная панель (псевдоним)
    • база данных
    • настольный
    • алмаз
    • точка-круг-o
    • загрузить
    • редактировать (псевдоним)
    • многоточие
    • эллипсис-v
    • конверт
    • конверт-о
    • конверт квадрат
    • ластик
    • обмен
    • восклицательный
    • восклицательный круг
    • восклицательный треугольник
    • внешняя ссылка
    • квадрат внешней ссылки
    • ушко
    • косая черта
    • пипетка
    • факс
    • внутренняя
    • Истребитель
    • файл-архив-o
    • файл-аудио-o
    • код-файла-o
    • файл-excel-o
    • файл-изображение-o
    • файл-фильм-о (псевдоним)
    • файл-pdf-o
    • файл-фото-o (псевдоним)
    • файл-картинка-о (псевдоним)
    • файл-powerpoint-o
    • file-sound-o (псевдоним)
    • файл-видео-o
    • файл-слово-о
    • file-zip-o (псевдоним)
    • пленка
    • фильтр
    • пожар
    • огнетушитель
    • флаг
    • флаг в клетку
    • флаг-о
    • flash (псевдоним)
    • колба
    • папка
    • папка
    • открытая папка
    • открытая папка
    • хмурый-о
    • футбол-о
    • геймпад
    • молоток
    • шестерня (псевдоним)
    • шестерни (псевдоним)
    • бесполый (псевдоним)
    • подарок
    • стекло
    • глобус
    • колпачок выпускной
    • группа (псевдоним)
    • ручная ящерица-о
    • ручной стоп-о (псевдоним)
    • ручная бумага-о
    • ручной мир-о
    • ручная указка-o
    • hand-grab-o (псевдоним)
    .
Comments