На сайте иконка: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Сайт 

Содержание

Как иконки на сайте влияют на конверсию

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

Предки иконок на сайте: пиктограмма и идеограмма – в чем разница?

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

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

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

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

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

Как работают иконки на сайте и зачем они нужны

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

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

Основные функции иконок на сайте:

  1. Привлекают внимание – яркие тематические иконки цепляют взгляд пользователей и акцентируют внимание на контенте.
  2. Помогают понять смысл – изображения легче воспринимаются пользователем, нежели голый текст.
  3. Ориентируют в интерфейсе – правильно размещенные иконки могут служить ориентирами, помогая пользователям быстрее находить нужные им функции и разделы на сайте или в приложении.
  4. Экономят визуальное пространство – позволяют передать информацию с помощью компактных изображений, тем самым освобождают место на экране и делают дизайн более чистым и удобочитаемым.
  5. Устанавливают связь с пользователем – иконки могут быть эмоционально заряжены через стилистику и создавать положительное впечатление о бренде.

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

5 основных принципов создания иконок

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

  1. Единый стиль

    Существует множество стилей иконок: тонкие линии, залитые, 3D-иконки, скругленные и острые формы. Чтобы иконки выглядели гармонично, следует использовать их из одного набора или в одном стиле. Набор иконок называется «иконпаком» или «сетом».

  2. Информативность

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

    Поэтому при создании иконок дизайнеры часто используют привычные ассоциации.

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

  3. Простота

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

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

  4. Соответствие бренду

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

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

    Вот такой иконопак подойдет для стогих сфер бизнеса:

  5. Размер

    Обычно наборы иконок создаются одного размера. Популярные размеры включают 16×16, 24×24, 32×32, 48×48 и 256×256 пикселей.

    Однако вы также можете использовать размеры, удобные для вашего проекта. Главное, чтобы внутри одного набора иконки не отличались друг от друга. Если вам нужны разные размеры, лучше создать отдельные наборы иконок. Например, иметь наборы иконок размером 16×16, 24×24 и 40×40 – нормально и даже хорошо.

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

Когда стоит отказаться от использования иконок в дизайне сайта

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

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

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

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

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

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

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

Использование реальных фотографий вместо иконок

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

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

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

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

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

Так надо ли отказываться от иконок на сайте?

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

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

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

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

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

#дизайн #картинки на сайте #маркетинг #поведенческие факторы #фишки для сайта #создание сайта #структура сайта

css — На сайте много svg-иконок, как лучше с ними взаимодействовать?

Когда вы используете команду <use> SVG попадает, в так называемый Shadow DOM.


SVG вроде, как есть и нет его в тоже время. Так как на него хранится из основного DOM только ссылка. Поэтому нужно, чтобы свойства fill, stroke, stroke-width принудительно наследовались.

path {
fill:inherit;
stroke:inherit;
}

В примере ниже я присвоил каждому <use> клону иконки свой класс и теперь их можно стилизовать вместе и по отдельности при наведении :hover

svg {
  width: 40px;
  height: 40px;
}

path {
fill:inherit;
stroke:inherit;

}

  use.home, use.toggle {
  fill: black;
}

use.home:hover {
fill:red;
}

 use.toggle:hover {
  fill: green;
}
<svg display="none" xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 14 14">
    <mask mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0. 000152588h23.717V13.272H0V0.000152588Z"/>
    </mask>
    <g mask="url(#mask0)" >
      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.92999 9.71699H7.78499V6.91199H5.92999V9.71699ZM8.28499 10.717H5.42999C5.15299 10.717 4.92999 10.493 4.92999 10.217V6.41199C4.92999 6.13599 5.15299 5.91199 5.42999 5.91199H8.28499C8.56199 5.91199 8.78499 6.13599 8.78499 6.41199V10.217C8.78499 10.493 8.56199 10.717 8.28499 10.717Z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5859 13.272h4.13092C2.85492 13.272 2.63092 13.048 2.63092 12.772V6.31601C2.63092 6.04001 2.85492 5.81601 3.13092 5.81601C3.40692 5.81601 3.63092 6.04001 3.63092 6.31601V12.272h20.0859V6.31601C10.0859 6.04001 10.3099 5.81601 10.5859 5.81601C10.8619 5.81601 11.0859 6.04001 11.0859 6.31601V12.772C11.0859 13.048 10.8619 13.272 10.5859 13.272Z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2168 7.3584C13.0888 7.3584 12.9608 7.3094 12.8628 7.2124L6.
 
 
 85882 1.2074L0.853817 7.2124C0.657817 7.4074 0.341817 7.4074 0.146817 7.2124C-0.0491831 7.0164 -0.0491831 6.7004 0.146817 6.5044L6.50482 0.146403C6.69982 -0.0485974 7.01682 -0.0485974 7.21182 0.146403L13.5708 6.5044C13.7658 6.7004 13.7658 7.0164 13.5708 7.2124C13.4728 7.3094 13.3448 7.3584 13.2168 7.3584Z" />
    </g>
  </symbol>
  
  <symbol viewBox="0 0 28 22">
  <path opacity="0.5" d="M0 15.7143h38V12.5714H0V15.7143ZM0 22h38V18.8571H0V22ZM0 9.42857h38V6.28571H0V9.42857ZM0 0V3.14286h38V0H0Z" fill="black"/>
  </symbol>
</svg>

<svg>
  <use href="#home" ></use>
</svg>
<svg>
  <use href="#toggle" ></use>
</svg>

Ну и ещё вопросец: почему не применяется стиль при наведении?

Всё по той же причине, что и в первом примере. Надо сначала прописать принудительное наследование inherit

svg {
  width: 30vw;
  height: 30vh;
}

path {
fill:inherit;
stroke:inherit;
}

use. tog {
stroke:black;
}

use.tog:hover {
stroke:green;
cursor:pointer;
}
/* Работает только в Firefox
 .first-line:hover{
stroke:green;
cursor:pointer;
}
.second-line:hover {
stroke:blue;
cursor:pointer;
}
 .third-line:hover {
stroke:gold;
cursor:pointer;
}*/
<svg  xmlns="http://www.w3.org/2000/svg">
  <symbol>
     <path d="M0 5 H 90" stroke-width="2" />
     <path d="M0 10 H 90" stroke-width="2" />
     <path d="M0 15 H 90" stroke-width="2" />
  </symbol>
</svg>

<svg  viewBox="0 0 16 24">

<use xlink:href="#toggle" href="#toggle" ></use>
</svg>

Сейчас идет переходной период, некоторые браузеры перешли на короткую запись только

href Другие браузеры не перешли (IOS Safari) и поэтому понимают только xlink:href="" С другой стороны, когда будет принят стандарт SVG2 длинная запись будет запрещена

Поэтому уже сейчас часто вижу комбинированную запись:

<use xlink:href="#toggle" href="#toggle" ></use>

Если вы хотите, чтобы у вас работала анимация, то сразу пропишите её внутри svg файла, до клонирования SVG командой USE

Несколько практических советов:

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

  1. Во первых удалите все стили внутри иконки, так как у SVG довольно сложная схема иерархии стилей. Например если внутри иконки прописан атрибут представления <path ...style="fill:black" />, то вы не сможете его изменить внешними стилями CSS
    Конечно можно применить !important css но это очень опасный метод.
  2. Необходимо посмотреть код используемой иконки. Если есть внутри clip-Path mask, pattern, filter, gradient то это прямой путь к проблемам стилизации.
  3. Элементы SVG нарисованы двойными контурами. То есть иконку рисовали не подходящими инструментами (карандаш, кисть) Такую иконку тоже будет проблематично стилизовать. Будет закрашиваться не объем, а узкое расстояние между контурами.
  4. Иконка в формате base64 стилизуется только с помощью фильтров.
  5. Главный признак, чем больше код (>1kb) тем более вероятно, что иконка нарисована не профессионалом и с ней неизбежно будут проблемы.
  6. Иконки взятые из разных мест имеют разные viewBox, разную структуру внутреннего кода <defs>, <symbol>, <g> подгоняя их под один размер опять возникают проблемы с позиционированием.

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

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

  1. Гугловские иконки

  2. materialui.co/icons

  3. https://materialdesignicons.com/

  4. https://iconify.design/icon-sets/uil/

  5. https://iconmonstr.com/

Как добавить и удалить логотип и значок сайта в редакторе сайтов

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

Задачи

После завершения этого занятия участники смогут:

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

Предварительные навыки

Участники получат максимальную отдачу от этого урока, если они знакомы с:

  • Локальными установками WordPress
  • Установка темы
  • Знакомство с редактором сайта и редактором шаблонов
  • Простой дизайн сайта с полным редактированием сайта

Вопросы о готовности

  • Можете ли вы установить WordPress?
  • Можно ли установить тему WordPress?
  • Знакомы ли вы с редактором сайта?

Необходимые материалы

  • Локальная установка WordPress под управлением WordPress 5. 9 или более поздней версии
  • Twenty Twenty Two или любая тема блока
  • Графика для логотипа вашего сайта
  • Графика для иконки вашего сайта

Примечания для докладчика

  • Перед этим уроком будет полезно создать локальный сайт с установленной темой Twenty Twenty-Two. Если вы используете другую тему блока, вам может потребоваться адаптировать схему урока.
  • Участникам может потребоваться загрузить и установить WordPress 5.9 или более позднюю версию, а также тему Twenty Twenty-Two перед началом
  • Смело меняйте графику для сайта

План урока

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

Оценка

Зачем нужен логотип сайта? (выберите все правильные ответы)

  1. Чтобы выглядеть круто
  2. Чтобы помочь людям узнать ваш бренд
  3. Чтобы завоевать доверие аудитории
  4. Быть доступным

Ответ: #2 и #3

Где обычно появляется логотип сайта ? (выберите все правильные ответы)

  1. В нижнем колонтитуле сайта
  2. Домашний экран смартфона
  3. В шапке вашего сайта

Ответ:  #3

Где появляется значок сайта (выберите все правильные ответы)

  1. Строка меню браузера
  2. Главный экран смартфона
  3. Нижний колонтитул сайта

Ответ: № 1 и № 2

В качестве значка сайта можно использовать только свой логотип.

  1. Правда
  2. Ложь

Ответ: #2

Дополнительные ресурсы

  • Документы поддержки: тема Twenty Twenty-Two
  • Документы поддержки: Редактор сайта
  • Документы поддержки: как обновить значок сайта
  • Изучите курс WordPress: простой дизайн сайта с полным редактированием сайта

Пример урока

Что такое логотип и зачем он нужен?

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

Проверьте, есть ли в вашей теме WordPress ограничения на размер логотипа. Хорошо иметь логотип для светлого фона и еще один для темного фона.

Как добавить и удалить логотип сайта без Настройщика

Перед полным редактированием сайта (FSE), если вы хотите внести изменения в свою тему, вы можете сделать это с помощью Настройщика. С FSE внесение изменений в вашу тему теперь выполняется в редакторе сайта.

Добавление логотипа сайта
  1. Откройте локальный тестовый сайт
  2. Выберите Внешний вид > Редактор.
Внешний вид — Редактор
  1. По умолчанию это экран редактора сайта, где вы можете вносить изменения в различные страницы и элементы своего сайта. Вы также видите, как любые внесенные вами изменения будут выглядеть на внешнем интерфейсе (на компьютере, планшете и мобильном устройстве).
  2. Подтвердите, что они на правильной странице. При использовании Twenty Twenty-Two они увидят заголовок с изображением птицы.
Экран редактора сайта
  1. Покажите им, что они могут:
    1. Нажмите на элемент блока
    2. Перейти к списку, чтобы увидеть элементы на их странице
Главная страница — вид заголовка Редактор сайта
  1. При наведении курсора на блок с логотипом сайта должно появиться «Добавить логотип сайта». Нажмите на блок с логотипом сайта, чтобы открыть «Медиатеку».
Добавить логотип сайта
  1. Выберите изображение, которое хотите использовать. Если файл еще не существует, нажмите «Загрузить», чтобы просмотреть свой компьютер и добавить его в свою библиотеку. При добавлении любых медиафайлов в свою библиотеку обязательно добавляйте замещающий текст (alt-text). Альтернативный текст используется программами чтения с экрана для посетителей сайта с потерей зрения. Узнайте все об альтернативном тексте и о том, как описать назначение изображения.
  2. По умолчанию ваш логотип будет обрезан, если он не квадратный и не ведет на вашу домашнюю страницу. Вы можете изменить стиль и настройки, нажав на одну из доступных опций в «Стили» или на панели «Настройки» в выбранных настройках Блока.
Настройки блока логотипа сайта — стили и настройки
  1. Чтобы увидеть, как значок выглядит на разных устройствах, щелкните ссылку «Предварительный просмотр» в верхней части экрана и выберите нужный вариант.
Кнопка предварительного просмотра
  1. Если вам нравится, как это выглядит, нажмите кнопку «Сохранить» в верхней части экрана.
Удаление логотипа сайта
  1. Нажмите на блок логотипа сайта, а затем нажмите кнопку «Заменить».
Заменить кнопку с логотипом сайта
  1. Возможно, вам придется нажать на три вертикальные точки в верхней части экрана, чтобы кнопка «Заменить» появилась в ваших вариантах.
Дополнительные инструменты и опции
  1. Теперь у вас есть три опции.
    1. Заменить логотип сайта на изображение из «Медиатеки».
    2. «Загрузить» новый со своего компьютера.
    3. «Сбросить» блок логотипа сайта. Сброс блока логотипа сайта удаляет значок, и теперь блок отображается как пустой.
Параметры замены блока логотипа сайта

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

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

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

Добавление значка сайта
  1. Выберите блок логотипа сайта для доступа к панели «Настройки».
    1. Если вы хотите использовать свой логотип, переключатель «Использовать как значок сайта» включен по умолчанию.
    2. Если вы хотите использовать другой значок, щелкните ссылку «Настройки значка сайта».
Значок сайта — Переключатель и настройки
  1. Щелкнув ссылку «Настройки значка сайта», вы перейдете к Customizer > Site Identity.
  2. Внизу в разделе «Значок сайта» нажмите кнопку «Выбрать значок сайта».
    1. Если на сайте уже есть значок, вместо него вы увидите кнопку «Выбрать изображение».
Настройщик — Выберите значок сайта

В вашей теме WordPress могут быть рекомендации по форме и размеру значка вашего сайта.

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

Упражнения

Добавление логотипа сайта на сайт

Чтобы добавить логотип сайта на сайт, выполните указанные выше действия

Удаление логотипа сайта

Выполните шаги, описанные выше, чтобы добавить логотип своего сайта на сайт

Добавьте значок сайта на свой сайт

Выполните шаги, описанные выше, чтобы добавить логотип своего сайта на сайт

Удалите значок своего сайта

Следуйте шаги выше, чтобы добавить логотип вашего сайта на сайт

Завершение урока

Совет: 💡 Выполните упражнения и оценку, описанные выше.

Как добавить фавикон WordPress на свой сайт (3 простых варианта)

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

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

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

Наконец, мы завершим это некоторыми советами и рекомендациями по созданию фавиконов WordPress. Давайте начнем!

Преимущества использования фавиконки WordPress

Если у вас когда-либо было открыто слишком много вкладок одновременно (вина!), вы, вероятно, оцените полезность фавиконки. Фавикон позволяет пользователям быстро идентифицировать ваш веб-сайт, когда в их браузере открыто несколько вкладок:

Фавикон Kinsta в браузере Chrome

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

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

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

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

Как создать фавикон WordPress

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

Раньше для фавикона приходилось использовать определенный файл ICO. Однако в настоящее время все современные браузеры поддерживают использование файлов ICO, PNG и GIF для вашего фавикона. JPEG также широко поддерживается (читай: JPG против JPEG), но не во всех версиях Internet Explorer, что делает его менее подходящим для использования с фавиконками.

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

RealFaviconGenerator (облачная версия подключаемого модуля, о котором мы поговорим позже) — отличный вариант, потому что:

  • Он также создает значки приложений.
  • Предоставляет значки favicon в форматах PNG и ICO.
  • Вы можете настроить свой значок после загрузки изображения.
  • Все, что вам нужно сделать, это вставить код, который дает вам плагин.

Другие полезные генераторы значков:

  • Favicon.cc, который позволяет создать значок с нуля или загрузить существующее изображение.
  • Favicon Generator, который работает аналогично RealFaviconGenerator.

Чтобы использовать RealFaviconGenerator, начните с загрузки изображения, которое вы хотите использовать, нажав на . Выберите изображение фавикона :

Загрузка исходного изображения фавикона в RealFaviconGenerator

На следующем экране вы можете настроить конкретные параметры вашего набора фавиконов (при желании). Когда вы закончите, прокрутите вниз и нажмите Создать свои фавиконы и код HTML e :

Экран параметров генератора фавиконов в RealFaviconGenerator

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

Экран загрузки пакета Favicon

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

Советы по созданию фавиконки WordPress

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

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

Также важно отметить, что ваш фавикон будет отображаться в виде квадрата 16×16 пикселей. Следовательно, вы хотите выбрать изображение, которое будет хорошо выглядеть, когда оно уменьшится до этих размеров. Хотя он будет отображаться в этом размере, его высота и ширина должны быть не менее 512 пикселей.

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

Как добавить фавиконку WordPress на свой сайт (3 простых варианта)

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

1. Использование настройщика WordPress для загрузки вашего фавикона

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

Все, что вам нужно, это изображение размером не менее 512×512 пикселей. WordPress возьмет на себя остальную часть процесса. Чтобы начать, перейдите к Внешний вид  → Настройте  на панели управления WordPress:

Меню «Внешний вид» в WordPress

Оттуда перейдите на вкладку Идентификация сайта  :

Параметр «Идентификация сайта» в настройщике WordPress

Далее , найдите внизу раздел Значок сайта  и нажмите на значок Выбрать сайт 9. 0080  button:

Кнопка «выбрать значок сайта» в настройщике WordPress

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

Если у вас есть понравившееся изображение, нажмите на него и выберите Выберите  в правом нижнем углу:

Выбор изображения для значка в WordPress

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

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

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

Обрезка вашего изображения фавикона в WordPress

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

2. Установка плагина для добавления фавиконки WordPress

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

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

Фавикон от плагина RealFaviconGenerator для WordPress

После активации плагина перейдите на страницу Внешний вид  → Фавикон  , чтобы создать свой набор фавиконов. Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70×70 пикселей (в идеале 260×260 пикселей):

Экран для добавления значка в WordPress с помощью плагина

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

В нижней части сайта прокрутите вниз, чтобы выбрать Создать свои фавиконы и HTML-код  (см. предыдущий раздел). Пока инструмент работает, Real Favicon Generator отправит вас обратно на панель инструментов WordPress:

Экран для предварительного просмотра того, как будет выглядеть ваш значок WordPress

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

3. Добавление фавиконки вручную через FTP

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

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

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

Чтобы вручную добавить значок WordPress на свой веб-сайт, вам необходимо:

  1. Получить доступ к файлам вашего сайта либо через FTP-клиент, либо через файловый менеджер в cPanel вашего хостинга.
  2. Найдите корневой каталог вашего сайта и загрузите содержимое пакета favicon ( favicons.zip )

Файлы должны находиться в той же папке, что и папки wp-admin и wp-content . Затем возьмите код, который RealFaviconGenerator предоставил вам ранее, и либо:

  • Используйте плагин, например Insert Headers and Footers , чтобы добавить его в заголовок вашей темы.
  • Вставьте его прямо в раздел  своей темы, отредактировав файл header.php   вашей темы.

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

Для этого установите и активируйте Вставка верхних и нижних колонтитулов. Затем перейдите к Настройки → Вставить верхние и нижние колонтитулы и вставьте свой код в раздел Скрипты в верхнем колонтитуле  :

Добавление кода фавикона с помощью подключаемого модуля «Вставка верхних и нижних колонтитулов»

Обязательно сохраните изменения. Тогда все готово!

Дополнительные советы по использованию фавиконок WordPress

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

Вы также можете рассмотреть возможность использования сети доставки контента (CDN) для доставки изображений фавикона. Все три метода, которые мы обсуждали в этом посте, сохраняют ваши изображения favicon на вашем сервере. Однако вы можете еще больше оптимизировать свой сайт, используя CDN для обслуживания этих изображений.

Когда вы устанавливаете Cloudflare или такой сервис, как KeyCDN, браузеры посетителей будут загружать ваш значок из вашей CDN, а не с сервера вашего сайта. Если вы используете плагин, такой как CDN Enabler, он должен автоматически переписать URL-адрес вашего фавикона WordPress для работы с вышеуказанными методами.

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

Три основных метода, которые вы можете использовать для добавления значка WordPress на свой сайт:

  1. Использование настройщика WordPress для загрузки значка сайта.
  2. Установка плагина, например, Favicon от RealFaviconGenerator.
  3. Добавление фавикона вручную через FTP-клиент или файловый менеджер.

    No related posts.

Автор записи

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

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