Преимущества для сайта иконки: Иконки преимущества — 6,426 бесплатных иконок

• С фавиконом сайт запоминается лучше

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

• Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

• Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at <a href="http://localhost:8383/favicon.ico">http://localhost:8383/favicon.ico</a>

Какую картинку выбрать для фавикона

• Тематическую

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

• Контрастную

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

• Упрощенную

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

• Оригинальную

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

Как создать favicon для сайта

Есть три самых распространенных способа:

1. Специальный плагин для Photoshop
   
   Позволяет работать этому популярному редактору изображений с форматом ico.
2. Специальные программы для изготовления фавиконов
   Они специально «заточены» для изготовления иконок для сайта.
3. Онлайн генератор favicon
   Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

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

1. Создайте картинку для фавикона с именем favicon.ico.
   
2. Готовый файл нужно сохранить в корневом каталоге сайта. 
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в HTML-код главной:

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

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

...
<link rel="shortcut icon" href="<img =""="" src="https://sitename.ru/favicon.png" >"="" type="image/x-icon">
...

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

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

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

Как установить разные favicon для отдельных страниц

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

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

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

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon_blog.ico" type="image/ico">

Размеры фавиконов для браузеров и устройств

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

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

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

Стандартно для фавикона делают файл favicon. ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="shortcut icon" href="/icons/favicon.ico">

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

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

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

Пример кода:

{
    "name": "%title%",
    "icons": [
        {
            "src": "\/android-chrome-36x36. png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4. 0"
        }
    ]
}

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

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

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

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. 

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

<link rel="mask-icon" href="mask.svg" color="red">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70. png">
<square150x150logo src="/mstile-150x150.png">
<square310x310logo src="/mstile-310x310.png">
<wide310x150logo src="/mstile-310x150.png">
<tilecolor>#da532c</tilecolor>
</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>
</msapplication>
</browserconfig>

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

Использование иконок в веб-дизайне: 4 основных преимущества

5 июля 2018 г. | Дизайн веб-сайта

Автор: Кевин Фуше, директор Pixel Fish

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

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

4 Преимущества использования иконок в веб-дизайне

1. Иконки — эффективное средство коммуникации
2. Значки придают индивидуальность
3. Иконки добавляют интерес
4. Иконки для навигации

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

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

4 Преимущества использования значков в веб-дизайне

1. Значки являются эффективным средством коммуникации

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

2. Иконки придают индивидуальность

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

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

3. Иконки добавляют интерес

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

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

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

4. Значки для навигации

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

Вот несколько вещей, о которых следует помнить…

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

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

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

Позвольте ведущему агентству веб-дизайна Сиднея вывести ваш бизнес на новый уровень с веб-сайтом для малого бизнеса Pixel Fish.

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

Дополнительная информация
Как создать прибыльный бизнес с помощью вашего веб-сайта
5 лучших платформ онлайн-обучения, которые помогут вам стать бизнес-лидером
10 советов, как стать идейным лидером в своей отрасли Бизнес и ваш сайт
Основные причины, по которым скорость вашего веб-сайта влияет на ваш бизнес
20 лучших советов по доступности веб-сайта для создания веб-сайта W3C
Как настроить домашний офис для видеоконференций
5 лучших веб-браузеров для редактирования веб-сайтов WordPress
Обзор платформы веб-сайта: Squarespace против WordPress
11 лучших функций темы Divi WordPress, которые вы должны знать

Плюсы и минусы иконок в веб-дизайне

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

Маршалл Тейлор

Ничего не найдено.

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

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

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

Для этого значкам нужны две вещи:

1. Широкое признание
2. Единое, широко признанное значение

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

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

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

Итак, давайте подробнее рассмотрим эти проблемы и выясним, как с ними работать.

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

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

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

Это может работать как на вас, так и против вас.

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

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

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

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

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

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

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

Бесплатная электронная книга: Веб-дизайн 101

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

Прочитать

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Прочитать

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

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

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

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

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

В Hollow Icons Обри Джонсон объясняет свою реакцию, когда его попросили оценить дизайн мобильного телефона коллеги.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн осмысленного контекста

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

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

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

Ответственно относитесь к значкам

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

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

2 июня 2016 г.

Веб -дизайн

Поделитесь этим

Рекомендуемые чтения

Веб -дизайн

Веб -дизайн

Веб -дизайн

Подписываетсь на Webflow Inspor и каждую неделю на ваш почтовый ящик доставляется код без кода.

Электронная почта

Вы можете отказаться от подписки в любое время, никаких обид. Политика конфиденциальности

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

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

Подробнее о CMS

Электронная торговля

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

Подробнее об электронной коммерции

Редактор

Редактируйте и обновляйте содержимое сайта прямо на странице.

Подробнее о Редакторе

Хостинг

Настройте молниеносный управляемый хостинг всего за несколько кликов.

No related posts.