Наверное, многие пользователи замечали, что при открытии того или иного сайта в левом углу вкладки отображается маленькая иконка, характерная для каждого портала. Однако мало кто знает, что это такое и как её поменять на своем сайте.
История появления первых фавиконов
Маленькая иконка на сайте называется фавикон, что означает "значок для избранного" в переводе с английского. Изначально она использовалась для быстрого поиска и наведения порядка в закладках в браузерах IE. Затем стала повсеместно отображаться практически всеми интернет-бродилками для придания особой стилистики сайту.
Характеристики Favicon
Фавикон — это обычное изображение, как правило, размером 16 на 16 точек. Для хранения могут использоваться форматы ICO, PNG и GIF. Фавикон поддерживают многие популярные браузеры. В их число входят Chrome, IE, Opera, Firefox. Какие-то могут поддерживать анимационные версии, какие-то нет.
По умолчанию браузер пытается отыскать иконку в корне сайта. Однако можно указать ему, где именно она находится. Для этого достаточно в коде использовать строку:
<link rel="тип стиля" type="image/тип расширения" href="/путь к новому фавикону" />.
Создание своего фавикона
Чтобы создать свою иконку, достаточно воспользоваться одним из представленных в сети онлайн-редакторов. К примеру, самый известный находится по адресу favicon.ru. Нужно карандашом отметить точки, нуждающиеся в заливке, и затем сохранить картинку.
Как поменять фавикон
Многие веб-разработчики стараются при создании сайта сменить стандартную иконку CMS или вообще отсутствующую на более подходящую тематике. Далее будет перечисление способов, описывающих, как поменять фавикон в различных системах управления контентом или же без них.
Joomla 1.5 и работа с фавиконом
Joomla 1.5 — одна из первых стабильных версий системы управления контентом. Используется она все реже, однако многие до сих пор поддерживают её на некоторых сайтах. Для того чтобы поменять фавикон в Joomla 1.5, нужно создать иконку из готового рисунка или же с нуля. Затем перейти в папку с шаблонами Joomla, которые находятся в каталоге templates, и скопировать фавикон туда.
Joomla 3
Последняя из вышедших версий данной системы управления контентом. Улучшен функционал и добавлены новые возможности.
Перед тем как поменять фавикон в Joomla 3, нужно сначала его создать. Как это сделать, было описано выше. Затем можно использовать один из двух способов. Первый позаимствован из Joomla 1.5 и предполагает ручную замену файла в папке с шаблонами.
Для реализации второго способа необходимо подредактировать файл index.php, который находится в корневой папке текущего шаблона. В нем интересует тег <head>. Чтобы все заработало как надо, нужно от открывающего тега до закрывающего ввести:
<link rel="каскадный стиль" type="image/тип используемого контента" href="/расположение фавикона" />.
Добраться до файла index.php можно, просто пройдя по папкам до нужной или через админку. В панели управления надо зайти в «Расширения» и там перейти в «Менеджер шаблонов». Среди присутствующих вариантов нужно выбрать текущий и нажать «Изменить шаблон главной страницы». Откроется редактор кода, в котором между открывающим и закрывающим тегом head должен быть вставлен вышеприведённый код.
Иногда фавикон отображается не сразу в поисковой выдаче. Это может быть связано с тем, что страница ещё не проиндексировалась. Стоит немного подождать, и через несколько дней, а может быть, и месяц новый фавикон отобразится в верхней части сайта.
Как поменять фавикон в "Битриксе"
"Битрикс" — система управления контентом, на базе которой можно создавать и простые сайты, и корпоративные порталы. Разработана компанией "1С-Битрикс".
Структура файлов сайта чем-то схожа с Joomla, и процесс замены фавикона на нужный происходит точно так же. То есть необходимо перейти в папку с шаблоном и скопировать туда нужную картинку в формате ICO. Если не помогло, попробовать также добавить её в корневую папку проекта.
Также имеется и другой способ, который можно совместить с двумя перечисленными выше. Это прописать в главном файле уже известные строки:
<link rel="стиль и его тип" type="image/тип картинки" href="/путь" />.
WordPress
WordPress — одна из самых известных систем управления контентом. Обрела свою популярность благодаря тому, что бесплатна, проста в освоении и функциональна. Как поменять фавикон на сайте WordPress? Этот процесс в данной CMS выполняется проще всех остальных. Нужно зайти в панель управления и перейти в раздел Cherry Options, после чего выбрать вкладку Logo&Favicon. Имеющийся файл нужно удалить с помощью кнопки Remove. Затем подготовить новую иконку и загрузить себе на компьютер. Теперь с помощью библиотеки медиафайлов нужно добавить обновленную иконку в базу и сохранить изменения.
После всех манипуляций достаточно перезагрузить страницу и увидеть, как сменился фавикон. Возможно, что он не отобразится с первого раза, поэтому нужно обновить кэш браузера и попробовать снова.
Имеется ещё один способ изменения фавикона в WordPress. Для этого существует специальный файл header.php, который отвечает за вывод шапки сайта. В нем имеется блок с тегами head. Вот именно между ними и нужно вставить следующий код:
<link rel="название иконки" type="image/тип расширения" href="/путь к картинке" />
Header.php находится по пути /wp-content/themes/название темы. Стоит обратить внимание на то, что в строках кода используется расширение ICO. Однако, если оно другого типа у текущего фавикона, то можно в коде указать то, которое надо.
Заключение
В статье было подробно описано, как поменять фавикон в разных системах управления контентом. Для чего вообще нужно это делать и какой практический интерес несёт эта процедура? Самая главная причина — узнаваемость сайта. Именно по фавикону можно узнать свой любимый сайт в поисковой выдаче. К тому же при большом количестве открытых вкладок в современном браузере можно быстро вычислить, на какой из них размещена та или иная страница.
Перед тем как поменять фавикон, его нужно подготовить. Это возможно сделать, преобразовав готовый рисунок или логотип. Или же нарисовать вручную новый фавикон с нуля. Для этого имеется много онлайн-редакторов, а также конвертеров в сети.
