Урок 21. Фавиконка для сайта

Для тех, кто не знает что такое фавиконка, я расскажу о ней более подробно. Favicon — это иконка вашего сайта, которая отображается во вкладке браузера. Например, вот так выглядит вкладка без фавиконки:

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

Сейчас время активного развития цифровых технологий, поэтому, по состоянию на 2018 год, требуется большой размер и высокое разрешение фавиконки. Это обусловлено разрешением экрана мобильных и стационарных устройств. Рекомендуемый и оптимальный размер миниатюрной картинки составляет 512х512 с плотностью пикселей 72/дюйм.

Где взять иконку

В уроке «Как создать логотип для сайта» я рассказывал о сервисе Canva. Исходя из этого, создать фавиконку можно в Canva, по типу логотипа, или скачать уже готовую иконку. Касательно создания фавиконки в Canva, думаю, у вас проблем не возникнет. А вот что делать, если не особо хочется заморачиваться? Я рекомендую скачать фавиконку с iconfinder.com.

Например, вы посвятили сайт продукции Apple, и желаете чтобы фавиконка имела тематический вид. Для этого зайдите на сайт-сток iconfinder.com, и в поле поиска введите apple:

Затем баре слева нужно выбрать «Free»:

К сожалению, не каждая фавиконка в онлайн-сервисе имеет размер 512х512 и выше. Например, мне повезло:

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

После того как нашли фавиконку, нажмите «Download PNG», смотрите предыдущий скриншот.

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

Я буду как и раньше показывать примеры на теме Twenty Seventeen.

Установка фавиконки

Для установки фавиконки на сайт, вам нужно в админке навести курсор мыши на «Внешний вид», и кликнуть по «Настроить». Далее, перейдите в «Свойство сайта»:

В блоке «Иконка сайта» нажмите «Выбрать изображение»:

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

Если фавиконка нуждается в обрезке, то подкорректируйте поля образки, и нажмите «Обрезать изображение»:

После этого вверху настроек нажмите на «Опубликовать», и фавиконка подключится к сайту:

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