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

Содержание

Свежие бесплатные высококачественные наборы иконок.

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

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

Снимая шляпу перед дизайнерами, переходим к рассмотрению иконок.

Тематика: электронная коммерция.

Иконки гарантии возврата денег (требуется регистрация)

100 % Money Back набор векторных иконок.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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


Исходник иконок

Тематика: Просто полезные иконки.

Бесплатный набор иконок указателей

Sketchup Иконки

Web кнопки (векторные)

Полезны тем, кто создает макеты сайтов.


«Top 3» набор иконок

500+ векторные изображения дорожных знаков

Иконки модератор

Тематика: Простые маленькие иконки.

Бесплатные иконки панели инструментов Iphone

Иконки, предназначенны специально для разработчиков iPhone, доступные для свободного любого коммерческого использования в соответствии с Creative Commons Attribution 2.5 Канада лицензии.


Путешествия и бизнес. Набор векторных изображений

Token

Стандартные иконки от Tempaly

Персонажи

35 очень оригинальных и эксцентричных персонажа.


Тематика: Красивые иконки.

Иконки от Филиппа Старка

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

Иконки снежного леопарда

Фото иконки

Бесплатные симпатичные иконки Furry Monster

Я собрал семью монстриков, доступных для свободного скачивания в виде значков. Каждлгл млнстра можно найти в формате PNG, ICO, ICNS для использования на Ваших Mac, PC или для использования в Ваших веб-проектов.


Космическая одиссея 2001

Векторные кухонные иконки

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


Иконки «современные стулья»

Google Talk Иконки

Камерный оркестр

Классическая камера

Камера Nikon

Lollipop

Тематика: Desktop & GUI наборы иконки.

Программа Alcohol

Общее применение

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


32 px набор иконок

Простой набор иконок, доступные только в разрешении 32 × 32px, только в iContainter формате.

Xedia

GiNUX

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Что такое favicon для сайта, как сделать фавикон и зачем нужна иконка сайта?

09.08.2021


Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

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

  • в закладках пользователя

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

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

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

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали в официальном Twitter компании.

Если у вашего сайта иконка не установлена, на вкладках и в поисковой выдаче будет отображаться стандартная иконка. У каждого браузера она своя, например, в Google Chrome отображается чёрно-белая планета:

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

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

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

  3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

  4. ​​Заставить пользователей больше доверять вам.

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

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

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

Такие профессиональные редакторы, как Adobe Photoshop, Adobe Illustrator или Figma, за счёт большей функциональности позволят создать уникальную иконку. Если вы не работаете с профессиональными редакторами или просто не гонитесь за уникальностью изображения, можете воспользоваться одним из способов, которые мы перечислим.

Как сделать favicon для сайта:

  1. Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат.

    Для этого подойдёт сервис pr-cy.ru, be1.ru.

  2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor.com
    Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
     

  3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на

    faviconka.ru и findicons.com.

Советы по созданию favicon

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

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

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

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

Как добавить favicon на сайт через код

  1. Загрузите файл с иконкой в корневой каталог сайта.

  2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.


<head>

     <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">

     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">

</head>

Атрибуты:

rel: 

  • icon — учитывается большинством браузеров,

  • shortcut icon — учитывается браузером Internet Explorer.

type: 

  • image/svg+xml — для формата SVG,

  • image/x-icon или image/vnd.microsoft.icon — для формата ICO,

  • image/gif — для формата GIF,

  • image/jpeg — для формата JPEG,

  • image/png — для формата PNG,

  • image/bmp — для формата BMP.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

Как добавить favicon на сайт в WordPress

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

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator

  1. Перейдите в админку WordPress.

  2. Перейдите в Плагин ― Добавить новый.

  3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

  4. Перейдите во Внешний вид ― Фавикон

  5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

  6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

  7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

  1. В админке WordPress перейдите во Внешний вид ― Настроить.

  2. Выберите Общие настройки ― Свойства сайта.

  3. В разделе Иконка сайта нажмите Выберите иконку сайта 

  4. Загрузите фавикон.

  5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

Фавикон: зачем нужен, как создать и поставить на сайт

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

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

Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

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

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

Помогает в навигации

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

Фавиконы можно увидеть:

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

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

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

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

Создание favicon

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

Визуальная составляющая

Что учитывать при создании фавиконки:

  • Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
  • Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
  • Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

Логотип SendPulse и он же в виде фавиконки на вкладке

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

Логотип VC.ru и он же в виде фавиконки на вкладке

Требования «Яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

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

Раздел «Яндекс.Справки» о фавиконках

Требования Google к фавиконке

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

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

Раздел документации Google о фавиконках

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

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

Realfavicongenerator

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

Настройка получившихся иконок в Realfavicongenerator

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

Пакет нужно скачать в виде файлов и куска кода

Favic-o-matic

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

Результат создания фавиконок в Favic-o-Matic

Favicon.ico & App Icon Generator

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

Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

Faviconit

Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.

Готовый пакет фавиконок и код для сайта в Faviconit

Как добавить фавикон на сайт

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

Загружаем иконки на сайт

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

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

<head>

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

</head>

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

[Всего: 7   Средний:  4.9/5]

Установка иконки для сайта

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

Как вы могли уже заметить, когда страница сайта открыта в браузере, во вкладке отображается не только заголовок страницы, но также и маленькая иконка, которая располагается перед заголовком и помогает нам отличать страницы одного сайта от страниц других сайтов (см. рисунок №1). Это особенно удобно, когда в браузере одновременно открыто много различных страниц, принадлежащих разным сайтам. Кроме того, иконка веб-сайта отображается рядом с ссылкой при добавлении страницы сайта в закладки браузера, в истории браузера, а также в некоторых поисковиках, например, Яндексе, где иконки сайтов располагаются опять же перед заголовками страниц сайтов, выданных по текущему поисковому запросу. Так что же все-таки представляет из себя иконка сайта?

Иконка сайта (от англ. favorites icon) – это специальный значок сайта, который отображается в браузерах пользователей и позволяет более точно идентифицировать страницы данного сайта. Обычно иконка сайта представляет собой небольшой служебный файл favicon.ico в виде изображения размером 16х16 пикселей, которое располагается в корневой папке сайта.

Рис. №1. Пример содержимого корневой папки сайта

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

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

Для создания иконки сайта нужно воспользоваться либо специальной программой, либо одним из онлайн сервисов в Интернете, либо создать квадратное изображение размера 16х16 и более пикселей самостоятельно, сохранив его в виде файлика favicon.ico (как можно легко догадаться, имя файла представляет собой сокращение от словосочетания favorites icon). При этом хотелось бы сделать пару уточнений:

  • разрешается использовать иконки и больших размеров, а точнее 32х32, 48х48 и более пикселей, однако браузеры в основном все равно сжимают их до стандартного значения в 16х16 пикселей;
  • несмотря на то, что на сегодняшний день стандартным универсальным форматом для иконки, который поддерживают все основные браузеры, является формат ICO, большинство браузеров поддерживают также форматы PNG, JPEG и GIF.

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

Установка иконки на сайт

После того, как иконка будет готова ее необходимо поместить в корневую папку сайта. Именно там браузеры по умолчанию будут искать ее для дальнейшего отображения на экране. При этом иконка будет отображаться рядом с заголовками всех страниц сайта. Если же необходимо разместить иконку в другой папке или для какой-то страницы требуется установить свою иконку, следует воспользоваться тегом <link> (см. пример №2).

<!DOCTYPE html>
<html>
<head>
	<!-- Указываем кодировку страницы -->
	<meta charset="utf-8">	

	<!--  Зададим базовый адрес  -->
	<base href="https://site.name/">
	
	<!-- Иконка отобразится во вкладке возле данного заголовка страницы -->
	<title>Использование «link» для установки иконки сайта</title>

	<!-- Подключаем к странице иконку в формате ICO -->
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	
</head>
<body>
	Если необходимо подключить иконки других форматов, 
	следует использовать следующие конструкции:
    	
	<link rel="icon" href="favicon.jpeg" type="image/jpeg">
		
	<link rel="icon" href="favicon.png" type="image/png">
		
	<link rel="icon" href="favicon.gif" type="image/gif">
   
</body>
</html>

Пример №2 Использование элемента «link» для подключения иконки сайта

Как видно из примера, в теге <link> необходимо прописать абсолютный или относительный путь к файлу иконки, в качестве значения атрибута rel указать «icon», а в атрибуте type сообщить mime-тип подключаемого изображения.

Смена иконки сайта

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

Если же иконка расположена в папке, отличной от корневой, то следует поместить в данную папку новую иконку, а старую удалить (хотя, если форматы иконок будут отличаться, то старую иконку можно и не удалять). Далее, если формат новой иконки будет отличаться от формата старой, нужно будет обязательно прописать в теге <link> новые значения атрибутов href и type, т.к. при смене формата изображения изменится как расширение файла (а значит и путь к нему), так и его mime-тип.

Быстрый переход к другим страницам

подобие, аналогия и произвольный выбор

В ходе одного из недавних тестирований, проведенных специалистами исследовательской компании Nielsen Norman Group (NNg), обнаружилось, что наряду с тем, что дизайн множества иконок улучшился, существует также немалое количество подобных значков, вызывающих проблемы юзабилити и не распознаваемых большинством пользователей. Хотя каждый конкретный визуальный дизайн каждого значка отличается от другого — в том числе и связанными с ним проблемами, — существует несколько основных категорий иконок, которые можно использовать для лучшего понимания того, что именно делает некоторые из этих элементов пользовательского интерфейса более доступными для понимания.

Иконки, базирующиеся на подобии (схожести)

К этой категории относятся иконки, изображающие физический объект, который графический значок должен наглядно представлять восприятию пользователя. Используемое для представления (репрезентации) файла электронной почты изображение конверта будет являться иконкой подобия (Reference Icon).

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

Читайте также: Интуитивные иконки: пособие по юзабилити

Иконки, основанные на аналогиях (напоминаниях)

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

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

Здесь возникает вопрос, установят ли пользователи смысловую связь между эталонным (общепринятым, конвенциональным) значением изображения, используемого в качестве иконки, и его значением в рамках компьютерной экосистемы? Являются ли эти два понятия достаточно тесно связанными в ментальных моделях пользователей, чтобы люди подумали об опции системы, увидев изображение, символизирующее данную ее особенность?

Читайте также: Без имени Лучший значок – text label

Произвольные иконки

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

Треугольный дорожный знак предупреждения об опасности может быть использован в качестве компьютерной иконки для предупредительного сообщения. Очевидно, что пользователям труднее всего понимать именно произвольные иконки (Arbitrary Icons), особенно в том случае, если они не настолько широко используются, чтобы конвенциональное значение стало «второй натурой» значка.

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

Пример: значок часов в качестве иконки подобия, и он же как иконка аналогии 

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

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

Читайте также: Что такое аффорданс, или Самый недооцененный термин веб-дизайна

Пример: значок дискеты в качестве иконки для команды «Сохранить»

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

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

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

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

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

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

Читайте также: Материальный дизайн: другой, но не лучший

Юзабилити иконок в интернациональном масштабе

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

В подобной ситуации в тупик может попасть и сам общепризнанный «гуру науки юзабилити», основатель Nielsen Norman Group Якоб Нильсен: «Подобным же образом почтовые ящики выглядят по-разному во всем мире, как по форме, так и по цвету (синий, красный, желтый и зеленый — это лишь несколько цветов, которые я видел в своих путешествиях). Я помню, что когда впервые отправил открытку в Бельгии, то не был уверен, воспользовался ли я “официальной” почтой, потому что бельгийские почтовые ящики выглядят совершенно по-другому, чем все остальные, когда-либо виденные мной. И ведь это был физический объект. Небольшая двумерная картинка, скорее всего, будет еще более непонятной».

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

Различие национальных конвенций может снизить юзабилити интерфейсов, нацеленных на использование иконок, работающих на принципе аналогий. Например, изображение обеденного стола (dining table) можно использовать в качестве «напоминающей» иконки, чтобы представить таблицу номеров (table of numbers).

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

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

Читайте также: Как оптимизировать юзабилити иконок интерфейса?

Простые иконки, сложные иконки

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

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

Высоких вам конверсий! 

По материалам: nngroup.com

30-05-2017

Как установить иконки групп?

Как установить иконки групп?

Ответ мастера:

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

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

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

Еще один вариант, чтобы получить ссылку, это загрузить картинку на сторонний фотохостинг, например, Keep4u.ru или radikal.ru. Для этого, нажмите «Обзор» на странице хостинга и укажите путь к тому файлу, который сохранен на вашем ПК, потом нажмите «Загрузить». После того скопируйте ссылку и вставьте ее в требуемое поле на вашем сайте.

Для того чтобы изменить изображение для учетных записей администратора или пользователей, в меню «Пуск» выберите «Панель управления». Потом найдите там «Учетные записи пользователей» и нажмите по значку. Теперь выберите ту запись, которую хотите изменить. Кликните на строку-ссылку «Изменение изображения» и выберите ту иконку, которая вам больше всего понравится. Нажмите «Изменить рисунок», теперь закройте окно. Ваша иконка будет отображаться в меню «Пуск» и на странице приветствия при входе в систему.

или иконки — Translation into English — examples Russian

These examples may contain rude words based on your search.

These examples may contain colloquial words based on your search.

Тизеры — это специальные баннеры или иконки, созданные в едином стиле с дизайном конкретного сайта.

Teasers are the special banners or icons, that were created in the united style with the design of the site.

Для одного и того же случая обычно делают однотипные или иконки схожие по стилю.

The same icons or similar in style ones are made usually for the same cases.

Поиск в GUI варианте логически и физически связан с экраном заказа и вызывается из него нажатием клавиши «Ctrl-F» или иконки с изображением бинокля.

Booking search in GUI mode is closely tied to the main booking screen and is called from it by using «Ctrl-F» combination or by pressing the icon. The booking search dialog window opens on the screen, letting you enter search parameters.

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

You may not use Stardoll’s dolls, clothes, information, data, names, pictures, logotypes or icons from Stardoll’s website (we call these «Stardoll’s Material») if it is not clear from the website that this is permitted.

Suggest an example

Other results

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

It features a text user interface, not making use of any mouse, icons, or graphics.

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

Of course, there also all other social bookmark services, deposit or individual icons.

Для открытия документа нажмите на его название или на иконку возле него.

Click the title of any document, or the little icon beside it, to open it.

Если плеер не предоставляет доступа к свойствам фильтра то настройку можно произваодить из меню Пуск ‘AC3Filter Config’ или по иконке в Панели Управления.

If player does not allow to reach filter settings it is possible to configure it from Start menu with ‘AC3Filter Config’ icon or Control Panel icon.

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

To allow you to organize and visualize groups of passwords, you can assign an icon to any account or folder. There are more than 120 assorted icons available in the software.

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

Images are mounted and unmounted through context menu of virtual disk crated. Operating system recognizes this disk as physical CD/DVD-ROM.

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

To the countries which do not grant easy accessibility to their indicators yet, it is recommended to make the webpage with an indicator or set of indicators easily accessible from the main/home agency’s webpage, through a menu bar or a dedicated icon.

Подписаться с помощью веб-браузера, нажав на иконку RSS или с помощью специального чтения каналов, как «Google header» и получатьпоследние обьекты как только они появляются.

Subscribe using your web browser by clicking on the RSS icon or by using a dedicated feed reader like ‘Google Reader’ and receive the latest property listings as they happen.

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

If you entered all the transponder parameters correctly, indicated LNB-parameters correctly then you can successfully lock the transponder (blue or green status-icon).

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

You can add pop-ups with live links and custom icons, or pull in content from any web service, like Flickr, or add articles and blog posts with links out to the full content.

До Windows 8 программы идентифицировались статическими иконками.

Before Windows 8, computer programs were identified by their static computer icons.

Двойной щелчок по иконке — причина.

Double click on an icon, that’s a cause.

Голубая иконка — транспондер залочен, данные не принимаются.

The blue icon — the transponder is locked and information is not being received.

Это простые иконки — вы кликаете на них.

They’re just icons; you click on them.

Иконки поставляются в исходный файл Photoshop.

The icons are delivered in the original Photoshop file.

Настройки открываются двойным щелчком по иконке Быстрой маски.

Open the Options by double clicking on the Quick Mask button.

14 небольших мини-наборов иконок для ваших веб-проектов

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

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

Мы собрали здесь различные мини-наборы значков с различным дизайном, такие как флаги (для многоязычных веб-сайтов), общие значки (печать, сохранение, загрузка) и многое другое.Большинство этих небольших значков представлены в формате .ico, векторном EPS и даже в формате Flash SWF. Кроме того, их можно использовать на личных и общественных веб-сайтах, в бесплатных и открытых программных приложениях, но убедитесь, что вы проверяете их лицензии индивидуально. Некоторые из этих наборов включают значки для малого бизнеса, маленькие звездочки, маленькие пиксельные значки, маленькие значки меню и многое другое.

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

Мини-иконки от FamFamFam

FamFamFam — это ваш сайт, если вам нужен мини-значок.Это веб-сайт Марка Джеймса, веб-разработчика из Бирмингема, Великобритания. Этот конкретный набор содержит 114 маленьких иконок в формате GIF, которые можно бесплатно использовать как для коммерческих, так и для личных проектов.

Монохромные иконки от Tutorial9

На Tutorial9 вы можете найти этот набор из 108 красивых и минималистичных моно-иконок. Если вам нужен красочный значок, не беспокойтесь, его можно легко настроить. Этот набор небольших значков можно использовать бесплатно в личных и коммерческих проектах без указания авторства.

Иконки флагов от FamFamFam

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

Иконки SweetiePlus от Sublink Interactive

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

Иконы фуги П.Юсукэкамияманэ

Этот набор от p.yusukekamiyamane содержит так много мини-иконок, что будет сложно не найти ту, которую вы ищете. В нем огромное количество 3570 иконок в формате PNG (16 × 16 пикселей) + 352 бонусных иконки.

Иконки от app-bits.com

Это набор действительно красивых мини-иконок от app-bit.Их можно использовать бесплатно, если вы их не изменяете и не перепродаете. Иконки бывают PNG размером 26 пикселей и Retina 52 пикселей, и вы можете использовать их для коммерческих или личных проектов.

Иконки от Picol.org

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

Иконки электронной коммерции

Это набор мини-иконок, которые можно использовать в веб-дизайне, мобильных приложениях и других проектах.Они доступны в форматах AI, EPS, PDF, PNG.

Иконки от Androidicons.com

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

Иконки от Defaulticon.com

На defaulticon.com невозможно не найти мини-значок, который вы ищете.Этот сайт представляет собой хранилище минималистичных черных иконок, которые можно использовать для дизайна пользовательского интерфейса. Всего доступно 653 мини-значка, от стрелок до различных форм, маленьких значков принтеров, маленьких значков фотоаппаратов, миниатюрных мужских / женских значков, значков мороженого, мини-медицинских значков, таких как первая помощь и другие, мини-значков файлов (добавить , загружать, изменять размер и т. д.), небольшие значки файлов и многое другое.

Экологические иконки от Filborg

В

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

Иконки от iconsweets.com

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

Иконки от softface.com

Этот набор — еще один монохромный образец иконок.Несмотря на то, что они черно-белые, их можно легко настроить. Весь набор содержит 304 иконки в 32-битном формате PNG. Все они оптимизированы для размера 16 × 16 пикселей и доступны в размерах 16 × 16, 32 × 32 и 48 × 48 пикселей. Он включает файлы .ico и векторные иконки в форматах EPS и Flash SWF. В набор также входят прозрачные PNG-версии. Этот мини-набор значков содержит множество стрелок навигации, значков в виде сердечек, значков кнопок закрытия, значков мини-смайликов и многого другого.

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

Создавайте более мелкую и качественную веб-графику с помощью шрифтов с пиктограммами

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

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

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

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

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

Я использую приложение OS X Glyphs для упаковки наборов значков, но, как недавно отметил разработчик Джереми Кейт в своем блоге, существует ряд отличных (и бесплатных) онлайн-сервисов, которые могут превратить ваши значки в шрифт. пакеты. Предполагая, что вам не нужны все функции редактирования шрифтов, которые есть в настольных приложениях, таких как Glyphs, веб-сервисы, такие как IcoMoon, будут работать отлично.

Чтобы создать свою собственную коллекцию, в IcoMoon есть десятки шрифтов-иконок на выбор (некоторые бесплатные, некоторые нет), а также возможность конвертировать вашу собственную графику. После того, как вы соберете свой набор, приложение выдаст всю коллекцию в виде единого файла шрифта, готового к использованию на вашем сайте. Вы даже можете получить результирующий шрифт в кодировке base-64, чтобы избежать лишних HTTP-запросов.

Для получения дополнительной информации о том, как и зачем использовать иконочные шрифты, ознакомьтесь с прекрасным обзором в блоге Pictos, «Иконочные шрифты Криса Койера прекрасны», иконочным шрифтом разработчика Трента Уолтона и серией статей Дженн Лукас о иконочных шрифтах.

Как создавать мини-иконки

Многие люди спрашивали меня, как создать мой популярный пакет Mini Pixel Icon. На самом деле это относительно просто. Все, что вам нужно, это лишь некоторые базовые навыки работы с Photoshop. Здесь я покажу вам, как использовать инструмент «Карандаш» для создания пиксельных значков, а затем повторно использовать их для создания полной коллекции. Это техника, которую я использовал для создания более 320 иконок за день.

Скачать файл Photoshop

1. Создать новый документ

В Photoshop создайте новый документ размером 14 x 14 пикселей с прозрачным фоном.

2. Нарисовать контур фигуры

Инструментом «Карандаш» выберите кисть размером 1 пиксель на палитре. Выберите темно-серый цвет и начните рисовать контур значка страницы. Чтобы нарисовать прямую линию, сначала щелкните начальную точку, затем, удерживая клавишу Shift, щелкните конечную точку.

Советы: В любое время, если вы хотите стереть пиксели, используйте инструмент «Ластик», выберите режим «Карандаш» и размер кисти 1 пиксель.

3. Базовый уклон

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

4. Свет и тень

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

5. Сгруппировать все слои

В палитре «Слои» выберите все слои и нажмите Cmd + G, чтобы сгруппировать все слои в папке.

6. Нарисуйте карандашом

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

Советы. Если вы хотите, чтобы цвет во всем наборе значков был одинаковым, сохраните цвета, которые вы использовали, в цветовых образцах.

7. Повторное использование

Здесь показано, как я повторно использовал группы слоев для создания всей коллекции:

8. Экспорт для Интернета

После того, как вы закончите набор, переключите (невидимые / видимые) группы слоев и сохраните их для Интернета (Cmd + Alt + Shift + S).

Лень делать это руководство? Вы можете скачать мой бесплатный мини-набор иконок.

Как и почему значки улучшают ваш веб-дизайн

Это гостевой пост нашего друга Николай Мертц

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

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

Иконки поддерживают ваш контент

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

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

  1. Иконки могут кратко изложить контент

  2. Иконки могут привлечь внимание

  3. Иконки могут улучшить читаемость

Давайте углубимся в каждую точка.

1. С помощью значков можно вкратце изложить содержание.

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

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

2. Иконки привлекают внимание

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

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

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

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

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

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

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

3. Значки могут улучшить читаемость

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

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

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

Очень немногие значки могут стоять отдельно

Неопытным пользователям сети может быть очень трудно понять и различать разные значки.Питер Стин Хёгенхауг провел исследование, в котором участникам теста показали несколько значков. Большинство участников не могли различить значки и даже испытывали трудности с их пониманием.

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

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

Сравнение Facebook с иконками и без них

Чтобы прояснить мои мысли, я хотел бы показать вам, как изменился бы Facebook, если бы все значки были удалены. Как вы думаете, без иконок это выглядит более-менее понятно, интересно, привлекательно?

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

Заключение

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

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

Серьезно, не используйте Icon Fonts

Иконки везде. Эти «маленькие чудотворцы» (как их описал Джон Хикс) помогают нам усиливать смысл интерфейсов, которые мы проектируем и строим.Их популярность в веб-дизайне никогда не была такой высокой; Краткость и универсальность пиктограмм, в частности, делают их идеальным выбором для больших и маленьких дисплеев.

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

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

Но теперь нам нужно остановиться. Пришло время передать иконочные шрифты в Hack Heaven, где они могут порезвиться с макетами на основе таблиц, пуленепробиваемыми закругленными углами и масштабируемыми заменами Flash Inman. Вот почему…

Устройства чтения с экрана действительно читают эту информацию

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

Они — кошмар, если ты страдаешь дислексией

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

Они вторгаются на газон Emoji

В большинстве случаев мы полагаемся на автоматизированные инструменты, чтобы выбрать, какие символы Unicode назначены для какого значка.Но Unicode также является местом, где живут наши любимые смайлики. Если вы не будете осторожны, они могут сбивать с толку (хотя и забавно). Мой любимый пример: ошибка Etsy «четыре звезды и лошадь». Совсем недавно наш собственный Джейсон Григсби натолкнулся на случайные удары кулаками на сайте ESPN.

Они часто терпят неудачу

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

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

Что еще хуже, многие пользователи никогда не увидят эти шрифты. Opera Mini, которая часто соперничает с iOS Safari по глобальной статистике использования с сотнями миллионов пользователей по всему миру, в большинстве случаев не поддерживает @ font-face .Opera рекомендует избегать шрифтов со значками, если вы хотите поддерживать Opera Mini.

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

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

Вы, вероятно, делаете это неправильно

«Но Тайлер», — слышу вы.«Вы полностью проигнорировали шрифты Bulletproof Icon Fonts от Filament Group, вместе с тестами функций и разумными запасными решениями, основанными на содержании».

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

Но вы, вероятно, не поймете.

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

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

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

Лучше уже есть

SVG — это потрясающий для иконок! Это формат векторных изображений с дополнительной поддержкой CSS, JavaScript, возможностью повторного использования, специальных возможностей и многим другим. Это был , сделанный для такого рода вещей .

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

«SVG нельзя объединять в спрайты».

Они вполне могут. Есть даже действительно отличные инструменты, такие как svg-sprite и IcoMoon, которые могут помочь автоматизировать этот процесс.

«SVG больше по размеру файла».

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

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

«По сравнению с этим разметка значка слишком подробна».

Сравним:

  




  <использовать xlink: href = "путь / к / значкам.svg # search "/>

  

Разметка SVG чуть более подробна и более описательна и семантична, чем какой-либо пустой, скрытый ARIA элемент .

«Браузеры хуже поддерживают SVG.»

На момент написания этой статьи глобальная поддержка SVG на 96%… 4% на выше, чем на , чем тот же показатель для @ font-face . Кроме того, SVG намного более доступны, а их резервные варианты намного проще.

«Выбранный нами фреймворк уже имеет иконочный шрифт».

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

Не будь «столовым парнем»

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

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

Table Guy и я поддерживали связь. Сегодня он открыто признает, что ошибался насчет CSS. Ему неловко оттого, что он был так женат на технике, которая в ретроспективе была явно незаконно присвоена.

Если вы не перестанете использовать иконочные шрифты для людей с программами чтения с экрана, людей с дислексией, людей с браузерами, которые не поддерживают @ font-face , людей, которые случайно не загрузили иконочный шрифт один раз для некоторых причина, или дизайнеры, которые просто хотят, чтобы их значки выглядели правильно на экране…

Тогда сделай сам.Не будь застольным парнем.

Сделайте панель закладок браузера только для отображения значков сайта

Пользователи

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

Если вы используете панель закладок в Google Chrome или Firefox, иногда места не хватает. Когда вы добавляете сайт в закладки, он включает в себя значок сайта и текстовое описание сайта. Это сокращается, когда значок добавляется на панель закладок, но не полностью.

Заставить браузер отображать только значки веб-сайтов

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

Редактировать значки на панели закладок Chrome

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

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

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

Закладки для Firefox

То же самое можно сделать и с Firefox.Просто щелкните значок закладки правой кнопкой мыши и выберите «Свойства». Затем в поле «Имя» очистите поле «Имя» и нажмите «Сохранить».

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

Отображение только значка работает для известных сайтов, таких как YouTube, Google и Facebook, но для некоторых сайтов вам понадобится хотя бы несколько инициалов или краткое описание, чтобы их можно было различить.

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

Mini Icons — Бесплатные мини-иконки

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

При правильном использовании они могут ускорить выполнение вашими посетителями или пользователями задач, которые им необходимо выполнить. Но не на каждом веб-дизайне есть место для обычных полноразмерных иконок (часто от 32 × 32 до 48 × 48, а иногда и больше).

Вот где могут пригодиться мини-иконки. Поскольку самые маленькие версии этих значков иногда имеют размер 8 × 8 пикселей, а самые большие, как правило, 16 × 16 пикселей (хотя иногда они немного больше), они могут вписаться практически в любой дизайн.

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

Иконки Mini Pixel IconDock

Эти наборы значков из Icon Dock разделены на разные категории, включая типы файлов, веб-дизайн, блог и CMS, а также электронную торговлю.

Bwpx.icns

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

Иконки фуги

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

Глифиш

Разработанные и тщательно оптимизированные для использования на панелях инструментов и панелях вкладок в приложениях для iPhone и iPad, они также идеально подходят для приложений Android, веб-сайтов, футболок, татуировок и многого другого.

Diagona Icons

Эта коллекция включает 400 иконок, как 10 × 10, так и 16 × 16.

Sweetie BasePack

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

Пакет мини-значков социальных сетей

В этой коллекции есть значки размером 16 × 16 пикселей для всех популярных социальных сетей, включая YouTube, Flickr, Digg, Facebook, Reddit, Tumblr и другие.

Иконы шелковые

Silk, пожалуй, самая известная мини-икона. Коллекция включает более 700 значков размером 16 × 16 пикселей, причем практически любой значок, который вы, возможно, захотите использовать.

Хо-хо-хо!

Эта коллекция включает более 110 иконок размером 10 × 10 пикселей, все в красивой шкале серого.

Вага

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

Набор круглых значков

Этот набор включает более 100 значков размером 16 × 16 пикселей, все круглые с белой рамкой.

Sanscons

Этот набор значков пикселей имеет размер от 8 × 8 до 12 × 12, одни из самых маленьких, представленных здесь.

Набор иконок для веб-журнала Kleines

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

Web Mini — Часть 1

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

Web 2.0 Basic Mini

Этот набор включает более 500 иконок (170+ в трех цветах), специально разработанных для работы с дизайнами в стиле Web 2.0. (Также доступен больший набор идентичных значков.)

30 бесплатных значков веб-сайтов, значков блогов, значков символов

В этот набор входят значки кофейного цвета двух размеров: 16 × 16 и 10 × 10 (по 15 штук).

Иконки социальных закладок

Сюда включены многие популярные значки социальных закладок и обмена, в том числе Delicious, Digg, Fark, Technorati и StumbleUpon, идеально подходящие для создания букмарклетов для вашего сайта.

F0101 Набор иконок

Этот набор, разработанный Верле Питерс, включает 15 простых жирных значков социальных сетей, которые соответствуют теме F0101 от WooThemes.

Iconic

Этот простой минималистичный набор иконок представлен в трех форматах: растровом, векторном и шрифтовом.

mIcons — Kostenlose Icons

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

Набор иконок мини-календаря

Эти крошечные значки календаря бывают разных цветов и имеют размер 20 × 25 пикселей.

Farm-Fresh Icons

Эти значки «Farm-Fresh» от FatCow содержат 1000 значков с размерами как 16 × 16, так и 32 × 32 пикселей.Они выпускаются по лицензии Creative Commons и включают в себя множество форматов.

Набор светодиодных иконок

Этот набор включает более 500 иконок, все они созданы на основе FamFamFam, и имеют размер 16 × 16 пикселей.

Компьютер Micro Stock

Эти простые черно-белые значки размером 10 × 10 пикселей содержат некоторые часто используемые значки, в том числе «Домой», «Пустой документ», «Папка», «Стрелка» и «Пузырь с речью».

Соната

Sonata — это набор значков премиум-класса из 138 значков, который включает файлы PSD, а также версии с тенями и без них.

Значок по умолчанию

Эти монохромные значки элегантны и просты, они отлично смотрятся как на темном, так и на светлом фоне.

Мюнхен

Эти оранжевые значки включают в себя более 100 изображений в наборе, как общих, так и специальных.

Берлин

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

Эссен

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

Дортмунд

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

Всплывающие значки

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

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

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

Блоки, 16 пикселей, оттенки серого

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

Набор пикселей SimplyBold

Эта коллекция из более чем 140 иконок основана на оригинальном наборе иконок SimplyBold, но в пиксельном стиле.

Мини-иконки

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

urlgreyhot Mini Icons

Это коллекция значков размером 12 × 12 и 16 × 16 пикселей, включая миниатюрные веб-значки, системные значки и маркеры, среди прочего.

Составлено Кэмероном Чепменом специально для WDD.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Авторское право © 2024 Es picture - Картинки
top