Фавикон. Как добавить логотип (иконку) сайта на вкладку браузера

22.12.2018 0 Автор Редакция

После ряда обновлений на сайте WordPress часть функций пропала, как обычно. А именно нет иконки сайта. icon_site

Не совсем люблю принудительные обновления. По-моему, они не становились лучше и удобнее, зато хлопот доставляли порой немало. На данный момент самым пугающим выскакивает предупреждение на айфоне о доступности обновления. Старательно и аккуратно жму: «напомнить позже». Однажды щелчок был сделан не в том месте и не в то время. И проклятая 10ка начала загружаться на моих глазах. Выключение телефона ни к чему, естественно не привело, и к моему горю, 10-ка нагло установилась. Многие пользователи и не заметили бы обновления ios, как и я раньше. Но тут была другая ситуация — мне не понравились все изменения, вплоть до звука клавиш. Целый вечер убился на поиск, скачивание и установление старой девятки. Некоторые личные файлы были, конечно, утеряны окончательно, как например и старая иконка для этого сайта в формате .png или хотя бы .psd. Создавать новую — очень лень, поэтому воспользуюсь остатками роскоши — изображением в .jpg. А айфон теперь трогаю бережно, зная, что в любой момент может соскочить палец не на тот пункт в предупреждении о готовности обновления к установке.

ФАВИКОН (favicon) — ИКОНКА, ЛОГОТИП, КАРТИНКА САЙТА, ЭМБЛЕМА, то есть небольшое изображение, которое видят пользователи интернета на своих вкладках, окнах, закладках перед названием страницы сайта. 

Рекомендовалось загружать иконки оптимальным размером 16 на 16, 32 на 32, 120 на 120 пикселей в формате .png. Конечно, лучше изготовить картинку большего размера, а затем сжимать ее для дальнейшего использования, как вздумается, или как потребуется. Нужно учитывать, что уже сейчас есть устройства, которые воспроизводят фавикон и в размере 32, 64 (retina-дисплей, safari, новые платформы windows и проч). Различные темы WordPress могут предлагать в настройках темы задать иконку, там же и стоит рекомендованный для нее размер. Если в теме этого нет, то иконку можно вставить через файловый менеджер или через код. 

Код вставки иконки сайта, фавикона выглядит так:

 <head>

   <link rel=»тип ресурса» href=​»адрес изображения» type=»тип передаваемых данных»>

</head>

Где тип ресурса задается атрибутом rel. Допустимо использовать icon и shortcut icon (для браузера IE), тип данных указывается форматом изображения:

image/x-icon — для формата ICO; image/gif — для формата GIF; image/jpeg — для формата JPEG; image/png — для формата PNG; image/bmp — для формата BMP.

   <link rel=»icon» href=​»ваш сайт.com/favicon.gif» type=»image/gif»>

Ввиду откровенной лени я установлю старое изображение, которое у меня имеется в .jpg, минусом будет белый фон фавикона, поскольку у форматов .png фон прозрачный. Возможно, я потом сделаю нормальную иконку, пока и эта сойдет. 

icon_site

В Консоли выбираем Внешний вид, подпункт Редактор. Слева выбираем шаблон заголовка header.php

В данном случае вставлен адрес (ссылка) изображения, загруженное ранее в галерею (медиатеку) 

Вставляем код — строка 19 на снимке

<link rel=»shortcut icon» href=»ЗДЕСЬ АДРЕС (URL) картинки, ссылка на изображение» type=»image/jpg«>

Обратите внимание, что формат иконки в type=»image/jpg« нужно изменить на png, если ваше изображение в .png

Внизу сохраняем, обновляем. Готово.

icon_site

p.s. как только сменили тему WordPress, поскольку прежняя надоела, то иконка исчезла, но в новой теме в настройках было предложено вставить логотип сайта. Поэтому проблем вообще не возникло. Сделав пару букв в png, размером 150*150 пикселей с разрешением 300 в цветовой гамме сайта, мы получаем готовую иконку.