При разработке дизайна веб-сайта, большое внимание уделяется уникальности страницы, ее позитивному восприятию. Чем красочней и дружелюбней она оформлена, тем больше привлекает посетителей. Среди элементов оформления, стоит отметить фавикон — инструмент, с помощью которого сайт становится узнаваемым и запоминающимся.
Назначение опции
Впервые термин «фавикон» или «Favicon» появился в браузере IE5 в 1999 году. Он представляет собой соединение двух английских слов — «FAVorites» и «ICON».Переводится данное словосочетание, как «любимое или избранное изображение». Это небольшая иконка, служащая для визуальной идентификации веб-проекта.
Отображается она вначале имени веб-страницы в поисковых системах.
Также он находится перед адресом в поисковой строке и во вкладках интернет-обозревателя.
Установка фавикона в заголовке страницы имеет несколько положительных аспектов:
- При поиске информации сайт выделяется в поисковике, привлекает взгляд пользователя к странице. Ниже на рисунке показаны варианты выдачи с фавиконом и без него.
- Иконка помогает повысить узнаваемость компании. Если пользователь запомнит логотип организации, реализованный в ней, то идентифицирует его и на других площадках.
- Искать нужную страницу в истории легче, если присутствует рассматриваемая пиктограмма.
Также отсутствие значка, может вызвать недоверие к веб-странице у посетителей. Наличие пиктограммы позволяет повысить посещаемость и является необходимым условием для успешного SEO-продвижения.
Требования к картинке
Традиционно иконка создается в виде файла изображения с расширением ico, размером 16×16 пикселей. Данный формат поддерживается всеми браузерами.
Современные версии обозревателей могут считывать и пиктограммы в формате PNG, размером 16×16 или 32×32. Если браузер не сможет распознать фавикон, то выдаст ошибку 404. Поэтому желательно использовать оба формата.
При разработке пиктограммы нужно учитывать ряд тонкостей:
- Использовать в качестве базы для создания фавикона логотип сайта или организации. Нужно избегать большого количества мелких деталей в изображении, так как при размере 16×16 они будут «смазывать» картинку.
- Учитывать направление деятельности ресурса. Например, магазин по продаже рыбок может использовать их изображение в качестве иконки.
- Популярным способом создания картинки является использование первой буквы из названия компании. Например, Facebook (F), Google (G) и другие.
- Если ресурс описывает какую-либо памятную дату или праздник, то отображаются символы данного события.
Изготовить иконку можно различными способами:
- в графическом редакторе, например Photoshop или Gimp;
- из готового изображения, обработав его в генераторе фавиконов, например, Favicon.cc, Favicon.ru, Logaster.ru;
- выбрать из онлайн-каталога, например, findicons.com, thefavicongallery.com, iconj.com.
Далее следует перейти к этапу загрузки фавикона.
Добавление на сайт
Далее будет рассмотрено 3 варианта добавления фавикона на сайт.
Автоматическая установка браузером
Самый легкий способ поставить иконку. Здесь происходит закачка изображения в корневой каталог страницы. Проделать следующие шаги:
- Выбрать готовый фавикон. Он должен быть в формате ico.
- Если расширение иконки иное, то следует изменить его, используя конвертер. Например, можно воспользоваться онлайн-конвертером convertico. Назвать полученный файл favicon.ico.
- Подключиться к корневой папке веб-страницы, используя файловый менеджер или FTP-клиент. Обычно она называется public_html или htdocs. Выгрузить файл favicon.ico в каталог.
- Удалить кэш браузера, и открыть веб-проект с вновь установленным фавиконом. В адресной строке должна появиться картинка.
Если установка не произошла, то возможно картинка должна загружаться не в корневой каталог. В этом случае необходимо вручную прописать иконку в коде страницы.
Указание в коде сайта
Суть метода сводится к добавлению иконки фавикона на сайт с помощью html — в код страницы добавляются строки с указанием адреса и формата фавикона. Выполнять действия нужно по следующему алгоритму:
- Открыть исходный код страницы. Заходим на хостинг, где размещен сайт. Находим в файлах страницу html, чаще всего это index.html.
- Найти в его верхней части тег <head>.
- Вставить между ними код:
<link rel="shortcut icon" href="http://URL_изображения/favicon.ico" type="image/x-icon">
Здесь «URL_изображения» — путь к файлу изображения. «image/x-icon» — формат файла, в примере указан случай с расширением ico. Для других видов эта часть кода будет выглядеть, как показано на рисунке.
После завершения всех действий, очистить кэш, и заново открыть страницу.
Размещение иконки через WordPress
В WordPress существуют несколько методов установки фавикона на сайт.
Панель управления
Начиная с версии приложения 4.3, иконку сайта можно устанавливать из панели управления. Для этого:
- Зайти в меню «Внешний вид» и выбрать пункт «Настроить».
- Далее кликнуть по строке «Свойства сайта».
- Зайти в подпункт «Настройка». В самом низу будет опция «Иконка сайта». Кликнуть в ней по строке «Выбрать изображение».
- Появится окно, в которое нужно перетащить файл изображения или указать путь к нему, нажав на «Выберите файлы». Размер картинки должен быть 512×512 пикселей.
- После загрузки изображения, программа вернется к разделу «Свойства сайта». Теперь в подменю «Иконка сайта» будет показана загруженная пиктограмма. Воспользовавшись опциями «Изменить изображение» и «Удалить», ее можно отредактировать или убрать.
- После окончания редактирования, нажать на кнопку «Опубликовать» или «Сохранить».
Перезагрузить страницу. Фавикон появится на вкладке.
Использование плагина
В этом варианте для закачивания иконки используется плагин «All In One Favicon». Если он отсутствует в системе, то установить его следующим образом:
- Войти во вкладку «Плагины» и выбрать пункт «Добавить новый».
- Задать поиск указанного плагина, и после нахождения произвести инсталляцию.
- По завершении процесса высветится кнопка «Активировать». Кликнуть по ней.
- Затем зайти во вкладку «Настройки», находящуюся внизу панели, и кликнуть в ней по плагину. Или можно кликнуть по вкладке «Плагины» и внизу надписи «All In One Favicon» щелкнуть по опции «Settings».
- Далее откроются блоки настроек «Frontend Settings» и «Backend Settings». В них нужно будет загрузить фавикон. Нужно быть внимательным и выбрать строку, соответствующую формату картинки. После загрузки изображения в обоих блоках, подтвердить изменения.
После того, как изменения вступят в силу, фавикон появится во вкладке браузера после обновления страницы.
Корневой каталог и файл header.php
Метод схож с рассмотренным выше способами автоматического и ручного добавления картинки в браузер. Если после вставки фавикона в корневую папку сайта, он не появился, то далее следует отредактировать файл header.php в WordPress. Для этого:
- В консоли найти опцию «Редактор» во вкладке «Внешний вид».
- В окне редактора кликнуть по пункту «Заголовок». Откроется файл header.php.
- Далее найти тег <head> и вставить под ним 2 строки:
<link rel="icon" href="http://путь_к_файлу изображения/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http:// путь_к_файлу изображения /favicon.ico" type="image/x-icon" />.
Две строки различаются вставками «icon» и «shortcut icon». Это сделано для лучшей совместимости с разными браузерами. Если используется формат PNG, то favicon.ico нужно поменять на favicon.png. Также в опции type нужно указать «image/png».
Подтвердить изменения нажатием кнопки «Обновить файл». После обновления страницы иконка покажется во вкладке браузера.
Скачивание фавикона с сайта
Возможен и обратный процесс, когда происходит скачивание понравившейся иконки с сайта. Есть несколько способов.
Использование серверов Яндекс и Google
Сохранить картинку на компьютер или другой девайс можно, перейдя по одному из адресов: http://favicon.yandex.net/favicon/адрес_сайта или http://www.google.com/s2/favicons?domain=адрес_сайта.
Вместо «адрес_сайта» ввести нужный домен. После подтверждения откроется картинка, которую можно сохранить на компьютер. Кликнуть для этого ПКМ по изображению и выбрать «Сохранить изображение как…», или нажать сочетание клавиш CTRL+S.
После, указать место сохранения и подтвердить. При скачивании с сервера Google, прозрачный фон картинки не сохраняется.
Использование корневой папки
Так как у большинства страниц фавикон хранится в корневом каталоге, то для его получения достаточно ввести в адресной строке следующую надпись:
«адрес_сайта/favicon.ico». Например, для просмотра фавикона mail.ru ввести mail.ru/favicon.ico. После ввода откроется логотип сайта. Далее сохранить его описанным выше способом.
Поиск в коде страницы
Если оба способа не помогли скачать пиктограмму, то можно поискать ее в коде страницы. Вначале открыть его.
Для быстрого поиска ввести сочетание клавиш Ctrl+F. Появится поле для ввода искомого слова. Написать в нем «favicon».
Высветятся все строки, в которых есть данное слово. Найти среди них те, которые содержат ссылку на расположение фавикона, как показано на рисунке.
После этого ввести установленный адрес в строку поиска браузера и открыть страницу. Скачать картинку.
После установки фавикона нужно иметь ввиду, что поисковые системы обновляют информацию об иконках каждые 2-3 недели. Поэтому, если она отображается в имени сайта, но не показывается при поиске, то нужно подождать, пока пройдет обновление.
Описанные методы управления пиктограммами сайтов не являются сложными, осуществить их может любой пользователь.