Всё, что вы хотели знать о Favicon

Опубликовано: 01.09.2018

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

В этом посте речь пойдет о WordPress и favicon-файле. Так называется иконка, привязанная к веб-сайту, которая отображается при добавлении сайта в закладки или при включении режима показа иконок для сайтов в заголовке страницы (на вкладке со страницей сайта в браузере).

Файл представляет собой маленькое графическое изображение размером всего 16 х 16 пикселей, которое пользователь видит рядом с адресом сайта в строке адреса или на вкладке веб-браузера при просмотре сайта. Фавиконка служит идентификатором для конкретного сайта или страницы в интернете.

Wikipedia : Favicon (сокр. от англ. FAVorites ICON — "значок для избранного", от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico

В этом посте вы узнаете, как создать, настроить, загрузить и использовать собственный файл favicon на сайте, а также узнаете, как и для чего используется этот файл и какие выгоды от него для вашего WordPress-сайта.

Преимущества использования иконки проекта для сайта

Для пользователей WordPress-сайта есть несколько преимуществ в использовании такого файла на сайте.

Во-первых , маленькая иконка позволяет вашему сайту выделиться в общем потоке сайтов и веб-адресов, так ваш сайт легко запоминается.

У большинства сайтов на базе WordPress используется обычная стандартная фавиконка, а потому все такие сайты "сливаются" в один сплошной поток, в котором можно запомнить платформу, на которой построен веб-ресурс, но не сам сайт.

Файл favicon придает вашему сайту "изюминку", делает его непохожим на "собратьев по движку".

Во-вторых , иконка для сайта может служить хорошим инструментом для онлайн-брендинга в процессе индексирования сайта поисковиками. Грамотное использование этой возможности поможет привлечь на сайт дополнительный трафик. Подобно логотипу и названию сайта, фавиконка помогает создать профессиональный имидж для сайта среди ваших клиентов.

И в-третьих , при браузинге с применением вкладок такие браузеры, как Firefox, Google Chrome и ряд других, помогают быстро определить нужный сайт в целой "пачке" открытых вкладок, что делает серфинг по интернету быстрее и удобнее.

Разобрались с "плюсами" фавиконок? Теперь перейдем к практике.

Как создать Favicon

Есть несколько способов для того, чтобы создать favicon. Одна из доступных опций — создание в графическом редакторе, который позволяет сохранять итоговые файлы с расширением .ico , такие как GIMP , Corel Draw либо Photoshop . Даже с помощью MS Paint вы сможете создать собственную фавиконку.

Самая подходящая для вас — та программа, с работой в которой вы знакомы.

В общем, независимо от того, какой графический редактор вы в итоге выберете, вам надо скачать плагин для сохранения итогового файла в формате .ico .

Скачав и установив такой плагин, вы можете приступить к созданию собственной фавиконки для сайта. Если у вашего сайта уже есть свой логотип, вы можете просто изменить его размеры до пропорций фавиконки, чтобы посмотреть, как будет выглядеть такая картинка.

Но всегда можно и создать фавиконку с нуля. В создании такого файла постарайтесь использовать цветовую гамму вашего сайта, но не переусердствуйте. Учтите, что в итоге у вас получится файл с маленьким разрешением и небольшим размером, поэтому фавиконка должна быть максимально простой и в то же время — запоминающейся и уникальной. Так посетители вашего сайта не спутают ваш сайт с другими похожими проектами.

Если в собственных дизайнерских навыках вы не слишком уверены, то лучше нанять дизайнера для решения данной задачи. Но обычно вы и сами в состоянии справиться с такой задачей. Пару попыток — и в итоге у вас будет отличная иконка для собственной страницы.

Учтите, что размер 16×16 пикселей — очень маленький, потому не стоит слишком усложнять изображение и использовать слишком много цветов в составлении этой картинки. После уменьшения готовой картинки до 16 х 16 пикселей проследите, чтобы картинка не "поплыла" и не стала размытой. Для этой цели в графических редакторах обычно есть инструмент повышения уровня резкости. Готовый файл надо сохранить под названием favicon.ico в папке на вашем компьютере.

Еще один способ получить собственную фавиконку — это применить онлайн-инструмент наподобие ConvertICO.org . С его помощью можно получить файл-иконку с 24bit-цветностью и прозрачным фоном, причем изготовить фавиконку можно совершенно бесплатно. У каждого из таких сервисов есть набор пошаговых инструкций для создания фавиконки. Закончив редактирование, вы просто сохраняете готовый файл к себе на компьютер, а потом уже загружаете его в папку с веб-сайтом WordPress.

Помимо файлов с расширением .ico можно также использовать файлы с расширениями .gif или .png с разрешением 16 х 16 пикселей. Однако у формата .ico есть ряд преимуществ: его поддерживают все браузеры без исключения, у него меньше ошибок и он быстрее загружается, а также может содержать несколько вложенных файлов.

Как установить Favicon

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

Для начала надо загрузить фавиконку на сервер. Для этой цели нам нужен FTP-клиент, такой как FileZilla , чтобы сбросить фавиконку в корневую папку сайта. Также можно копию фавиконки сохранить в главную папку и в папку с темой сайта.

Если там уже есть файл favicon , удалите его перед тем, как загружать новый файл, иначе ваш новый файл не будет отображаться. Все операции с файлами можно легко проделать с помощью вашего FTP-клиента. Фавиконки по умолчанию, которые были у вас, надо удалить из корневого каталога и из каталога с темой.

Работаем со старыми версиями браузеров

Чтобы наша фавиконка корректно работала с устаревшими версиями браузеров, надо еще немного "помудрить".

Для начала зайдите в свою учетную запись в Панели управления WordPress и кликните на Внешний вид → Редактор . Здесь вам нужен файл под названием Шапка (header.php) : мы в него внесем пару правок.

В этом файл найдите строку кода, которая начинается с <link rel="shortcut icon" и заканчивается на /favicon.ico" /> . Если такая строка уже заполнена, то замените и вставьте в нее код, приведенный ниже. В противном случае под тегом < head > добавьте следующий код:

Чтобы сохранить и активировать внесенные изменения, просто не забудьте нажать на " Сохранить ".

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

Если файл favicon так и не отобразился, то проверьте, не упустили ли вы что-то на одном из предыдущих этапов редактирования и загрузки фавиконки на ваш сайт. Также можно вернуться к началу и выполнить всю загрузку и настройку с нуля.

Заключение

Файл favicon — лишь один из "штрихов" к онлайн-брендингу вашего проекта и возможность выделить ваш сайт среди множества конкурентов и аналогов в Сети. Такие файлы достаточно просто создаются и устанавливаются, но ваш сайт благодаря им станет интереснее и заметнее для аудитории.