Урок 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.
Установка фавиконки
Для установки фавиконки на сайт, вам нужно в админке навести курсор мыши на «Внешний вид», и кликнуть по «Настроить». Далее, перейдите в «Свойство сайта»:
В блоке «Иконка сайта» нажмите «Выбрать изображение»:
Далее, откроется всплывающее окно с галереей, где находится фавиконка. Если вы ещё не успели загрузить иконку в галерею, то самое время это сделать. После этого отметьте её кликом левой кнопки мыши, и нажмите на «Выбрать»:
Если фавиконка нуждается в обрезке, то подкорректируйте поля образки, и нажмите «Обрезать изображение»:
После этого вверху настроек нажмите на «Опубликовать», и фавиконка подключится к сайту:
Всё, на этом подключение фавиконки завершено. Надеюсь урок был для вас полезен.
Рекомендую:
 |
Книга «Типографика. Шрифт, верстка, дизайн» Джеймс Феличи |
 |
Книга «Не заставляйте меня думать» Круг Стивн |
Сергей, спасибо за урок! Очень полезный ресурс iconfinder, материала завались.
Это действительно так! Многие недооценивают этот ресурс, но я часто пользуюсь материалами с него.
Доброго времени суток. Читал о плагине WP Smush, полистал блог и вот решил оставить комментарий. Я пытался сделать фавиконку в фотошопе, но не хватает навыков, или фантазии… Решил заказать на фрилансе, как оказалось очень дорого. Плюнул и скачал ее на iconfinder. Все легко и просто господа. Спасибо за статью!
Игорь, спасибо за комментарий. Я человек любознательный, и в один прекрасный вечер сел и просмотрел курс по Adobe illustrator. После этого забыл о фотошопе Фотошоп годиться, разве что для скорой руки, или для тех людей, кто привык работать именно с ним, обладает хорошими техническими знаниями по этому софту и умеет фантазировать. Я не скажу, что фантазия не нужна для illustrator, но по возможностям гибкой работы с формами, он гораздо лучше Photoshop. За сток iconfinder вообще молчу, это клондайк.