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;} /* Inline styles */ h2.acss2f015{text-align:center;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

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

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

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

Как сделать favicon

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

Favicon – это изображение в формате png с разрешением 16 на 16 или 32 на 32 пикселей. Сделать такую можно на Photoshop или каком-то другом редакторе изображений, поддерживающим определённые функции.

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

Некоторые старые версии Internet Explorer могут демонстрировать иконки сайтов только в формате ico. Поэтому, если ваша ЦА имеет такой браузер, то сделайте для них специфическую favicon.

Сервис favicon.cc позволяет создавать иконки в режиме онлайн. Здесь можно нарисовать её вручную, экспортировать в нужный формат и установить на сайт.

Как установить favicon в Word Press

Word Press предлагает web-дизайнерам три способа установки и замены favicon:

Через настройки панели;

С помощью плагинов;

С помощью редактирования кодов.

Если тема Word Press позволяет редактировать иконку, то сделать это можно через настройки темы в разделе Fav icon option. Там можно загрузить свою иконку, увидеть её на предпросмотре и сохранить для сайта.

Если тема таких опций не поддерживает, то придётся установить дополнительные плагины. Для добавления и изменения favicon подойдут Insert Headers and Footers и All In One Favicon. После их установки появляется возможность редактировать картинку иконки сайта.

Для продвинутых пользователей можно предложить третий вариант. Файл иконки следует загрузить на FTP в корневой каталог: http://сайт/favicon.png Затем редактируем тему в файле header.php. Здесь после тега <head>, нужно вставить следующее:

<link rel=”icon” href=”сайт/favicon.png ” type=”image/x-icon” />

<link rel=”shortcut icon” href=”сайт/favicon.png ” type=”image/x-icon” />

И сохранить.

После этого у сайта появится новая загруженная иконка.

Вы можете пройти бесплатный обучающий курс.

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

View Comments

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

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

  • Благодаря этой статье установить favicon оказалось очень легко!

  • Невероятное количество полезных уроков) Благодарю за возможность создания сайта за короткий срок!

  • Благодарю, Адель, за информативные курсы ( не люблю слово тренинг), за профессионализм, за полезность. Удачи Вам.

  • Мне кажется, что фавикон интересная деталь в костюме сайта.

Recent Posts

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

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

7 месяцев ago

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

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

7 месяцев ago

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

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

7 месяцев ago

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

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

8 месяцев ago

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

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

8 месяцев ago

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

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

8 месяцев ago