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

Иконка сайта или 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” />

И сохранить.

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

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

Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Оцените статью)
Загрузка...

Также по этой теме:

12 комментариев

Оставить комментарий
  1. Очень хорошо и понятно изложено.

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

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

  4. Иконки для сайтов это действительно полезная вешь. Я на свой сайт ее сделаю. Хочу у вас уточнить, favicon.cc -это бесплатный сервис?

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

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

  7. А мне тема показалась сложной – лучше бы видео урок!
    Кстати, а они (Видеоуроки) вообще есть у вас в свободном доступе на сайте?

  8. Понятная инструкция для установки. Это нужная вещь для сайта. Адель, вы не закроете этот сайт? Можно будет заходить сюда и черпать знания и опыт?

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

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

  9. Инна Дунаева

    Спасибо, очень полезная информация.

  10. все хорошо описано будем делать!

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

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

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

Как создать блог. Видео Уроки WordPress © 2017 | Оставляя комментарий на сайте или используя форму обратной связи, вы соглашаетесь с правилами обработки персональных данных.