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> добавьте следующий код:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
Чтобы сохранить и активировать внесенные изменения, просто не забудьте нажать на "Сохранить".
Теперь перейдите к главной странице и посмотрите, отображается ли новая фавиконка в верхней строке рядом с адресом сайта. В некоторых случаях надо пару минут, чтобы заработало это обновление.
Если файл favicon так и не отобразился, то проверьте, не упустили ли вы что-то на одном из предыдущих этапов редактирования и загрузки фавиконки на ваш сайт. Также можно вернуться к началу и выполнить всю загрузку и настройку с нуля.
Заключение
Файл favicon — лишь один из "штрихов" к онлайн-брендингу вашего проекта и возможность выделить ваш сайт среди множества конкурентов и аналогов в Сети. Такие файлы достаточно просто создаются и устанавливаются, но ваш сайт благодаря им станет интереснее и заметнее для аудитории.
Источник: WP.tutsplus.com
Комментарии к записи: 3
Вот если бы её можно было цеплять на все рубрики…
Спасибо! Очень своевременный пост получился ;)
Когда нахожусь в панели админки то иконка есть, а когда на сайте как посетитель то иконки нет(, что не так сделал?