amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Дизайн сайта

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

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

Фавикон – это небольшая картинка, которая отображается возле содержимого тега title во вкладках браузера и выдаче поисковой системы. Несмотря на свое название, фавикон для сайта не обязательно должен быть формата .ico. Поддерживаемых форматов несколько, но нужно использовать только те, которые воспринимают все браузеры. Таких формата три: png, gif (без анимации), ico.

Favicon.ico для юзабилити

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

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

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

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

Установка favicon на WordPress

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

Установка фавиконки на WordPress без кода:

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

Если это не сработало, или вы используете старую версию WordPress, то в меню «Внешний вид» в подпункте «Редактор» ищем файл header.php и внутри тега head вставляем одну строчку кода:

link rel=”shortcut icon” type=”image/ico (ваш формат, например, image/png)” href=”адрес к иконке, относительный или абсолютный

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

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

Адель Гадельшин

View Comments

  • Ценная информация, давно искала четкой инструкции. Спасибо!

  • Хорошо, что есть такие статьи, типа технического руководства.
    У Вас очень полезный и информационно наполненный сайт.

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

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

10 месяцев ago

Как сделать запуск инфопродукта

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

10 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

10 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

11 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

11 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

11 месяцев ago