Фавикон красная стрелочка: Коллекция favicon.ico (фавикон) на Favicon.by

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

Содержание

форматы, поддержка, автоматизация / Хабр

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

В каком формате должен быть фавикон?


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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
 
<link rel="icon">
<link rel="icon" any">

Пора ли отправлять ICO на свалку?


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

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

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

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
 
<meta name="msapplication-square70x70logo" content="images/smalltile. png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:
<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:
<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:
<meta name="msapplication-starturl" content="./">

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

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

browserconfig.xml
<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1. xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo
 — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент

<frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

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

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

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150ImageAndText01"
      <image src="images/image1.png" alt="alt text"/>
      <text>Text Field 1</text>
    </binding>
  </visual>
</tile>

То, что написано в кавычках в атрибуте template  —  название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS


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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

Яндекс рекомендует использовать для этих целей формат ICO.

iOS


Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<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">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

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

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android


Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192. png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

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

Вызов в <head>:

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

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

Автоматизация


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

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

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

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

Сегодня поговорим о важном элементе — favicon. В статье поделимся советами и проанализируем креативные примеры.

Допустимые форматы и размеры

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

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

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

Список расширений:

  1. ICO. Самый популярный вариант. Главная особенность — хранение в файле нескольких размеров.
  2. PNG. Современный стандарт. Поддерживается всеми браузерами, в том числе и капризным Internet Explorer.
  3. GIF. Анимированный фавикон выглядит круто, но используется редко.
  4. SVG. Единственное решение для Safari под iOS и maCOS. Векторные картинки мало весят и хорошо масштабируются, но пока что не получили широкого распространения.
  5. JPEG. Проигрывает PNG по четкости. Никаких плюсов не даёт, использовать не рекомендуется.

С форматами разобрались — надо использовать PNG, SVG или GIF. Теперь перейдём к другому важному атрибуту.

Чаще всего фавиконы делают в размерах 16×16 или 32х32. Раньше можно было сделать значок в PNG или ICO и установить на сайт. Сейчас этого недостаточно. Надо учитывать особенности разных платформ.

Платформа Допустимые разрешения, px
Веб-браузеры 16×16, 32×32, 48×48
ОС Windows 144х144
Android 192×192, 512х512
iOS 180×180
macOS зависит от изображения

Без знаний и опыта легко запутаться в форматах, разрешениях и отличительных чертах Android, Windows Phone и iOS. В решении задачи поможет специальный генератор.

Пошаговая инструкция:

  1. Заходим на RealFaviconGenerator.
  2. Загружаем файл в разрешении 260х260.
  3. Проверяем отображение.
  4. Меняем настройки до оптимального результата.
  5. Нажимаем на кнопку генерации.
  6. Сохраняем архив.
  7. Интегрируем код в шаблон веб-страницы.

Инструмент даёт возможность экспериментировать с вариантами под разные платформы. Для браузеров под десктопы все стандартно. В Chrome под Android можно задать цвет фона и изменить размер в визуальном редакторе. Windows 8 и 10 с плиточным интерфейсом поддерживает аналогичные функции. Кстати, в последних редакциях Windows фавикон показывается крупным планом в «плитке» на панели «Пуск».

После настройки и установки обязательно проверьте корректность с помощью Favicon Checker.

На этом технические нюансы заканчиваются.

Выбираем картинку

Favicon отображается в адресной строке браузера и результатах поиска Яндекса. Гугл активно проводит эксперименты с показом иконки рядом с названием сайта на компьютерах. Пока непонятно, закрепится ли поведение на постоянной основе. Это сигнал для того, чтобы потратить время на разработку элемента. Тем более, что на мобильных устройствах favicon показывается всегда.

Преимущества значка:

  1. Вызывает доверие. Посетители оценивают логотип, дизайн и часто смотрят на изображение в браузере. Если оно сделано нестандартно — проект получает плюс один балл в глазах аудитории.
  2. Повышает узнаваемость. Иногда юзеры сохраняют полезный контент в закладки и через время при поиске находят её именно по узнаваемому фавикону.
  3. Увеличивает кликабельность. Необычная картинка привлекает внимание в результатах поисковиков.
  4. Даёт преимущество над конкурентами. Если потенциальный клиент ищет услугу или выбирает товар, каждый необычный элемент влияет на его опыт и будущую конверсию.

Многие проекты игнорируют favicon или просто берут логотип и подгоняют его под размер. Этот вариант сработает только для картинок в виде символа. К примеру, если взять лого корпорации Microsoft в стандартном формате и уменьшить до 32х32 пикселей, результат будет ужасным. Именно поэтому компания сделала иконку в виде 4 плиток разных цветов. Она гармонично смотрится в миниатюрном квадрате.

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

Советы по выбору иконки:

  1. Тематичность. Фавикон должен ассоциироваться с брендом. Идеальный вариант — урезанная версия логотипа или первая буква названия фирмы.
  2. Контрастность. Используйте яркие цвета. Если выбрать нежные тона, элемент будет сложно разглядеть из-за маленького размера. Оптимально подойдет красный, оранжевый, темно-синий.
  3. Чёткость. Изображение в плохом качестве выглядит неуместно. Лучше отрисовать картинку в векторе и подогнать под квадратный формат.
  4. Простота. Слоган или широкий логотип испортят впечатление. Сделайте упрощенную версию с элементами фирменного стиля бренда.
  5. Креативность. Не используйте варианты из стандартных наборов. Поставьте задачу дизайнерам, они воплотят в жизнь необычную концепцию.

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

Используем анимацию с умом

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

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

Учитываем разные платформы

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

В структуре главной страницы проекта о пластиковых окнах из примера выше задан один размер 48х48 пикселей. Несложно представить, как обстоит ситуация с отображением на Android, iOS, macOS и Windows Phone.

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

3 креативных примера фавикона

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

Mixcloud

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

Юзер может даже не открывать вкладку Mixcloud, чтобы узнать, сколько осталось до конца подкаста. Эта мелочь экономит время и создает положительные ассоциации.

Trello

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

Пользы от такой фишки нет, но аудитории наверняка нравится эстетика и креатив.

Google Календарь

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

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

Креативный favicon можно сделать для любого сайта. Обращайтесь в студию IDBI за помощью в этом вопросе.

Как сделать фавикон для сайта онлайн или из своей картинки: подробная инструкция

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

Как создать фавикон: лучшие сервисы

Я подготовил для вас небольшой список с достаточно популярными и простыми в освоении ресурсами по созданию фавиконок. Ну а чтобы не возникло вопросов о том, как с ними работать – составил небольшие инструкции. Кстати, о том, как добавить созданный фавикон на сайт можете прочитать в моей статье — как добавить фавикон на сайт WordPress: готовые фавиконы для сайта.

X-Icon Editor

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

Итак, для начала перейдите на сайт – x-icon.

Затем, выберите один из двух вариантов работы:

  • Создать фавикон самому, попиксельно, используя редактор;
  • Подгрузить заранее созданную в фотошопе картинку и работать непосредственно с ней.

Небольшая инструкция для тех, кто выбрал второй вариант:

  1. Нажмите «Import»:

  1. Загрузите картинку нажав «Upload», выделите необходимую область и размеры. Нажмите «Ok»:

  1. В случае необходимости воспользуйтесь редактором и подкорректируйте загруженную картинку по своему усмотрению;
  2. Когда все будет готово — нажмите «Preview» и посмотрите, как ваш фавикон отображаться в браузере;
  3. Если все устраивает, вернитесь на вкладку с редактором и нажмите «Export». В появившимся окошке нажмите «Export your icon» и фавикон будет автоматически скачан на ПК:

Готово. Вам остается только добавить его на сайт.

BWS

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

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

Pr-cy

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

Favicon.by

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

  • Сделать фавикон онлайн используя редактор;

Главная фишка сервиса — вам сразу же будет виден результат вашей работы:

Обновление результата происходит мгновенно и автоматически.

Когда закончите творить, просто нажмите «Скачать фавиконку» справа от строчки с результатом. Загрузка начнется автоматически.

  • Сделать фавикон из своей картинки;

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

  • А теперь самое интересное – импортировать фавиконку с чужого сайта.

Введите url сайта с понравившейся иконкой и нажмите «Импортировать»:

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

Заключение

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

Что такое фавикон, зачем он нужен на сайте?

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

Зачем нужен фавикон

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

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

favicon1.png

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

favicon2.png

favicon2.png
  • помогать пользователям ориентироваться в закладках и вкладках. Быстрее визуально найти нужный ресурс по значку, чем читать название или описание.

favicon3.png

favicon3.png

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

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

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

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

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

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

как создать и установить на собственном сайте

Фавикон – это маленький значок, который высвечивается во вкладке браузера. Впервые он появился в 1999 году у браузера Internet Explorer. Для того, что бы такой фавикон появился рядом с названием сайта необходимо было загрузить его в виде файла с именем favicon.ico в корневую папку.

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

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

Причем, предлагается загрузить изображение размером 512х512 px. Сделать это можно в опции Внешний вид – Настроить – Свойства сайта.

Просто заходите в Яндекс или Google картинки, задаете параметры фильтра и получаете готовый фавикон.

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

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

Требования Поисковика Яндекс

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

Если фавикон будет не найден, вас обязательно об этом известят в кабинете вебмастера.

Что бы понять свои ошибки. пройдите по ссылке – Как исправить и внимательно прочитайте требования к фавикону.

Обратите внимание на расширение изображения. Расширение ico теперь не принимается. И обязательно поправьте размеры иконки. Тото, который нам предложил загрузить WordPress не проходит. Необходим 16х16, 32х32, 120х120. Связано это с тем, что теперь ваш сайт ищут на мобильных устройствах. А они отображают только выше перечисленные размеры.

Кстати, не обращайте внимание на ограничения размера WP. Он воспринимает нормально и 120х120 и 32х32

Как создать уникальный фавикон

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

Давайте приступим к его созданию. Способов очень много. Я покажу Вам самый простой, благодаря которому  Вы создадите его сами.
Выходим на  http://www.favicon.cc/. Это очень простой и удобный ресурс создания фавиконов.

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

Чем удобен ресурс. Вы сразу же видите его генерацию  на ярлыке вкладки браузера.

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

Теперь переходим на страницу загрузки архива плагина All in one Favicon. Это универсальный плагин, благодаря которому,  вы можете загрузить на свой блог, созданные вами в различных форматах  (например – GIF или PNG), рисунки в размере 16Х16.

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


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

Вот и все! Ваш ресурс теперь имеет уникальный логотип!

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

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

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

Иконки со стрелками

Бесплатные иконки SVG со сверхбыстрым поиском и бесплатной колой. Создан для развлечения с помощью Icons8.

Бесплатные иконки / Стрелки Иконки со стрелками Следующие значки Иконки со стрелками вниз Иконки со стрелками вниз Иконки со стрелками вниз Иконки со стрелками вправо Иконки со стрелками вверх Загрузить значки со стрелками Иконки со стрелкой вверх Иконки со стрелками вверх Иконки со стрелкой вправо Иконки со стрелками вниз Иконки со стрелками влево Иконки со стрелками назад Иконки со стрелкой влево Иконки со стрелками вверх Иконки со стрелками мыши Текстовые значки со стрелками Зеленые стрелки значки Иконки со стрелками вправо Левая иконка Круглые стрелки значки Иконки с двойными стрелками Круглые стрелки значки Значки страниц со стрелками Красные стрелки значки Иконки изогнутые стрелки Следующие значки со стрелками Стрелки стрелки значки Стрелки Предыдущие значки Иконки со стрелкой влево Иконки со стрелками вперед Синие стрелки значки Круглые стрелки значки Компьютерные иконки стрелки Стрелки вправо значки Руки стрелки значки Боковые стрелки значки Значки со стрелками навигации Значки кнопок со стрелками Стрелки линии значки Веб-стрелки значки Развернуть значки со стрелками Щелкните значки со стрелками Иконки со стрелками возврата Иконки со стрелками на север Стрелки головы значки Значки стрелок курсора Значки стрелок местоположения Значки папок со стрелками Видео стрелки иконки Лук стрелки значки Увеличить значки стрелок Кривая стрелки значки Значки стрелок меню Желтые стрелки значки Сортировка иконок со стрелками Стрелки руки значки Иконки со стрелками Значки стрелок указателя Стрелки подписывают значки Облако стрелки значки Иконки со стрелками Выберите значки со стрелками Иконки со стрелками Иконки со стрелками Стрелки выравнивают значки Стрелки вверх значки Иконки со стрелками Квадратные стрелки значки Иконки со стрелками Значки со стрелками треугольника Компас стрелки значки Изменить значки стрелок Удалить значки со стрелками Иконки со стрелками Пунктирные стрелки значки Иконки со стрелками Две стрелки иконки ПК стрелки значки Значки стрелок переключения Иконки стрелок Стрелки веб-иконки
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Следующие значки

  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок
  • Следующий значок

Иконки со стрелками вниз

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками вниз

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками вниз

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками вправо

  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо

Иконки со стрелками вверх

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Загрузить значки со стрелками

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками вверх

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками вверх

  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Значок со стрелкой вверх
  • Шеврон Иконка

Иконки со стрелкой вправо

  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо

Иконки со стрелками вниз

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

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

  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево

Иконки со стрелками назад

  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад
  • Значок стрелки назад

Иконки со стрелкой влево

  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево

Иконки со стрелками вверх

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелками мыши

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Текстовые значки со стрелками

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки с зелеными стрелками

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки со стрелкой вправо

  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо
  • Иконка вниз вправо

Иконки слева

  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево
  • Значок вверх влево

Иконки со стрелками в круге

  • Значок в кружке вниз
  • Значок в кружке вниз
  • Значок в кружке вниз
  • Иконка в кружке вниз справа
  • Значок Вниз
  • Иконка в кружке вниз справа
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки с двойными стрелками

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

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

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Иконки страниц со стрелками

  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word
  • Значок Microsoft Word

Красные стрелки

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

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

  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок вверх 3
  • Значок Вниз

Иконки со стрелками вперед

  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз
  • Значок Вниз

Значок стрелки PNG изображения | Векторные и PSD файлы

  • значок стрелки вправо вектор

    1024 * 1024

  • значок стрелки вправо

    1024 * 1024

  • значок стрелки вверх вектор

    1024 * 1024

  • значок стрелки вниз вектор

    1024 * 1024

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

    800 * 800

  • значок стрелки вверх

    1024 * 1024

  • вектор значок стрелки вправо

    1024 * 1024

  • вектор значок стрелки вправо

    1024 * 1024

  • значок стрелки в плоском стиле символ стрелки веб-дизайн

    800 * 800

  • набор рисованной каракули значок стрелки кисть для декоративных любых носителей

    5000 * 5000

  • значок стрелки в плоском стиле символ стрелки веб-дизайн

    800 * 800

  • значок руки нарисованные стрелки

    1200 * 1200 900 05

  • значок стрелки в плоском стиле

    800 * 800

  • вектор значок стрелки вниз

    1024 * 1024

  • значок стрелки вниз

    1024 * 1024

  • набор значков стрелки включает символ стрелки квадратный поворот

    5000 * 5000

  • микро стерео простой градиент значок стрелки материал доступен для коммерческого использования

    1024 * 1369

  • вектор значок двойной стрелки

    1024 * 1024

  • значок правой стрелки

    2000 * 2000

  • значок стрелки в плоском стиле

    800 * 800

  • значок стрелки влево вектор

    1024 * 1024

  • значок стрелки вниз вектор

    1024 * 1024

  • ai плавающий красочный сочетание значков стрелки

    1024 * 1370

  • векторных значков стрелки вниз

    1024 * 1024

  • вектор двойной значок стрелки

    1024 * 1024

  • вектор стрелки значок стрелки вектор значок стрелки стрелки векторная коллекция

    4623 * 4623

  • белый значок стрелки вверх

    800 * 800

  • значок стрелки в плоский стиль символ стрелки веб-дизайн

    800 * 800

  • значок стрелки вправо

    1024 * 1024

  • значок стрелки вниз

    1024 * 1024

  • вектор значок стрелки назад

    1007 * 1007

  • значок стрелки в плоском стиле символ стрелки веб-дизайн

    800 * 800

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

    1024 * 1024

  • Бесплатные векторные иконки линии (SVG, PNG, PSD, CSH, EPS, Icon Font и др.)

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

    lnr-home lnr-apartment lnr-карандаш lnr-magic-wand lnr-drop lnr-lighter lnr-poop lnr-sun lnr-moon lnr-cloud lnr-cloud-upload lnr-cloud-download lnr-cloud-sync lnr- cloud-check lnr-database lnr-lock lnr-cog lnr-trash lnr-dice lnr-heart lnr-star lnr-star-half lnr-star-empty lnr-flag lnr-envelope lnr-paperclip lnr-inbox lnr-eye lnr -printer lnr-file-empty lnr-file-add lnr-enter lnr-exit lnr-окончание-шляпа lnr-license lnr-music-note lnr-film-play lnr-camera-video lnr-camera lnr-picture lnr-book lnr-bookmark lnr-user lnr-users lnr-shirt lnr-store lnr-cart lnr-tag lnr-phone-handset lnr-phone lnr-pushpin lnr-map-marker lnr-map lnr-location lnr-calendar-full lnr- клавиатура lnr-проверка орфографии lnr-screen lnr-смартфон lnr-tablet lnr-laptop lnr-laptop-phone lnr-power-switch lnr-bubble lnr-heart-pulse lnr-construction lnr-pie-chart lnr-chart-bars lnr -подарок lnr-d iamond lnr-linearicons lnr-ужин lnr-coffee-cup lnr-leaf lnr-paw lnr-rocket lnr-портфель lnr-bus lnr-car lnr-train lnr-bike lnr-инвалидная коляска lnr-select lnr-earth lnr-smile lnr- грустный lnr-нейтральный lnr-усы lnr-alarm lnr-bullhorn lnr-volume-high lnr-volume-medium lnr-volume-low lnr-volume lnr-mic lnr-hourglass lnr-undo lnr-redo lnr-sync lnr-history lnr -clock lnr-download lnr-upload lnr-enter-down lnr-exit-up lnr-bug lnr-code lnr-link lnr-unlink lnr-thumbs-up lnr-thumbs-down lnr-magnifier lnr-cross lnr-menu lnr -list lnr-chevron-up lnr-chevron-down lnr-chevron-left lnr-chevron-right lnr-arrow-up lnr-arrow-down lnr-arrow-left lnr-arrow-right lnr-move lnr-warning lnr- вопрос-круг lnr-menu-circle lnr-checkmark-circle lnr-cross-circle lnr-plus-circle lnr-circle-minus lnr-arrow-up-circle lnr-arrow-down-circle lnr-arrow-left-circle lnr -стрелка-вправо-кружок lnr-c Hevron-up-circle lnr-chevron-down-circle lnr-chevron-left-circle lnr-chevron-right-circle lnr-crop lnr-frame-expand lnr-frame-contract lnr-Layers lnr-funnel lnr-text-format lnr-text-format-remove lnr-text-size lnr-bold lnr-italic lnr-underline lnr-strikethrough lnr-highlight lnr-text-align-left lnr-text-align-center lnr-text-align-right lnr- выравнивание текста-выравнивание lnr-межстрочный интервал lnr-indent-увеличение lnr-indent-уменьшение lnr-.
    • Comments
    Leave Comment