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

 


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

иконка сайта

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

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

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

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

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

поиск iconfinder

 

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

iconfinder

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

размер фавиконки

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

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

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

 

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

к оглавлению ↑

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

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

свойства темы

 

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

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

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

выбрать фавиконку

 

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

обрезать фавиконку

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

опубликовать фавиконку

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

Делитесь полезной информацией с друзьями:

Рекомендую:

Книга «Типографика. Шрифт, верстка, дизайн» Джеймс Феличи Книга «Типографика. Шрифт, верстка, дизайн» Джеймс Феличи
Книга «Не заставляйте меня думать» Круг Стив Книга «Не заставляйте меня думать» Круг Стивн

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

комментария 4

  1. Денис:

    Сергей, спасибо за урок! Очень полезный ресурс iconfinder, материала завались.

    • Сергей:

      Это действительно так! Многие недооценивают этот ресурс, но я часто пользуюсь материалами с него.

  2. Игорь:

    Доброго времени суток. Читал о плагине WP Smush, полистал блог и вот решил оставить комментарий. Я пытался сделать фавиконку в фотошопе, но не хватает навыков, или фантазии… Решил заказать на фрилансе, как оказалось очень дорого. Плюнул и скачал ее на iconfinder. Все легко и просто господа. Спасибо за статью!

    • Сергей:

      Игорь, спасибо за комментарий. Я человек любознательный, и в один прекрасный вечер сел и просмотрел курс по Adobe illustrator. После этого забыл о фотошопе Фотошоп годиться, разве что для скорой руки, или для тех людей, кто привык работать именно с ним, обладает хорошими техническими знаниями по этому софту и умеет фантазировать. Я не скажу, что фантазия не нужна для illustrator, но по возможностям гибкой работы с формами, он гораздо лучше Photoshop. За сток iconfinder вообще молчу, это клондайк.

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

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


5 + 8 =


Вверх