- Как установить для Joomla favicon для всех платформ
- Шаг первый. Генерирование favicon
- Шаг второй. Заливаем иконки на сервер
- Шаг третий. Изменение кода шаблона сайта
- Шаг четвёртый. Удаление устаревших favicon
- Шаг пятый. Всё работает!
- И в заключение... Почему надо было удалять старые иконки?
Как установить для Joomla favicon для всех платформ.
В этой статье показано, как установить для Joomla favicon для всех платформ. Для этого нужно будет воспользоваться сторонним сервисом в web-интерфейсом (ничего не нужно устанавливать на компьютер) — сгенерировать набор фавиконок и сопутствующих файлов. После этого останется залить их на сервер и внести кое-какие изменения в шаблон сайта. Для тех, кому любопытно, почему всё нужно сделать так, а не иначе, в конце даны разъяснения.
Шаг первый. Генерирование favicon
Воспользуемся сторонним сервисом, предоставляющим удобны интерфейс для создания фавиконок под все платформы. В статье «Генератор favicon для всех платформ: iOS, Android, PC/Mac...» дана подробнейшая инструкция по тому, как создать набор иконок под все возможные платформы с помощью инструмента realfavicongenerator.net. К написанному мне добавить не чего, кроме того, что думайте, когда прописываете пути к файлам — это пригодится при встраивании иконок в HTML-код шаблона.
Шаг второй. Заливаем иконки на сервер
Заливаем и распаковываем архив иконок на сервер в ту папку, которую для этого выбрали при генерации иконок на realfavicongenerator.net.
У меня это папка ./templates/favicon
Относительно этой папки будут простроены пути к иконкам в контейнере <head>.
Шаг третий. Изменение кода шаблона сайта
Я до сих пор пользуюсь стандартным шаблоном protostar, поэтому некоторые пути могут отличаться, но общий смысл останется неизменным. Нужно вписать код выданный realfavicongenerator.net в шаблон сайта в контейнер <head> для того, чтобы браузер на пользовательском устройстве мог выбрать подходящую ему иконку.
Что получилось у меня:
Есть индексный файл index.php шаблона лежащий в папке ./templates/protostar/index.php можно с помощью Менеджера шаблонов сайта в админке Joomla.
Было:
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</head>Стало:
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/templates/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/templates/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/templates/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/templates/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/templates/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/templates/favicon/manifest.json">
<link rel="mask-icon" href="/templates/favicon/safari-pinned-tab.svg" color="#587bf5">
<link rel="shortcut icon" href="/templates/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="MoonBase">
<meta name="application-name" content="MoonBase">
<meta name="msapplication-TileColor" content="#587bf5">
<meta name="msapplication-TileImage" content="/templates/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/templates/favicon/browserconfig.xml">
<meta name="theme-color" content="#587bf5">
<!-- favicon -->
<!--[if lt IE 9]><script src="/<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->
</head>Шаг четвёртый. Удаление устаревших favicon
Теперь нужно удалить старые иконки. Ниже объясню почему.
- Иконку из шаблона сайта:
./templates/protostar/favicon.ico - Иконку из корня сайта:
./favicon.ico
Если их нет, то хорошо. Если есть - удаляем!
Шаг пятый. Всё работает!
После всех этих манипуляций, можно походить на свой сайт с разных устройств и с разных браузеров. Поэкспериментировать, как вставляется ссылка на сайт в мобильных устройствах, как и что добавляется в «Избранное»... Поводов для радости масса — всё по-взрослому! :)
И в заключение... Почему?
Остался не объяснённым вопрос: «Почему надо было удалять старые иконки?»
Объясню... Пока иконки не удалены, посмотрим в исходный код страницы в браузере:
<!DOCTYPE html>
<html lang="ru-ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<base href="http://mb4.ru/" />
<meta name="keywords" content="windows, html" />
<meta name="description" content="Горячий старт на просторы интернета" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Главная</title>
<link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />
<link href="/templates/protostar/css/template.css?5fcea3cfd7c7a410c5b4d0e4405e5379" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />В 13-й строчке видим ссылку на старую иконку, а ниже видим такое же описание со ссылкой на новую иконку. Конфликт? Конфликт! И его нужно снять.
Откуда же появляется ссылка на старую иконку и как от неё избавиться?
В файле index.php шаблона сайта видим такую строчку:
<jdoc:include type="head" />Без неё нельзя, но именно она генерирует весь поток заголовков. Разберёмся более подробно, что же она делает с favicon.
Функция формирования мета-тега вставки favicon находится в файле ядра Joomla ./libraries/joomla/document/html.php
/**
* Adds a shortcut icon (favicon)
*
* This adds a link to the icon shown in the favorites list or on
* the left of the url in the address bar. Some browsers display
* it on the tab, as well.
*
* @param string $href The link that is being related.
* @param string $type File type
* @param string $relation Relation of link
*
* @return JDocumentHTML instance of $this to allow chaining
*
* @since 11.1
*/
public function addFavicon($href, $type = 'image/vnd.microsoft.icon', $relation = 'shortcut icon')
{
$href = str_replace('\\', '/', $href);
$this->addHeadLink($href, $relation, 'rel', array('type' => $type));
return $this;
}
На вход эта функция получает URL иконки, на выход передаёт параметры генерирования метатегов заголовка функции addHeadLink.
Вызов функции addFavicon находится в том же файле ./libraries/joomla/document/html.php но ниже:
// Try to find a favicon by checking the template and root folder
$icon = '/favicon.ico';
foreach (array($directory, JPATH_BASE) as $dir)
{
if (file_exists($dir . $icon))
{
$path = str_replace(JPATH_BASE, '', $dir);
$path = str_replace('\\', '/', $path);
$this->addFavicon(JUri::base(true) . $path . $icon);
break;
}
}
return $contents;Из описания кода этого вызова понятно, что favicon ищется сперва в папке шаблона, если там favicon не найдена, то она ищется в корневой директории сайта. Ну и, если и там её нет, то значит её нет вообще.
Глубже лезть в ядро Joomla я уже не стал, а просто проверил данную гипотезу (смотрим на путь к favicon.ico в 13-й сточке):
1. Сперва имеем в html-коде страницы сайта:
<link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />2. После того, как файл favicon.ico удалён из директории шаблона, подставляется favicon.ico из корневой директории сайта:
<link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />3. Ну и после удаления favicon.ico из корня сайта, мы наконец то свободны от дубля в описании favicon в контейнере <head>, который генерируется строчкой <jdoc:include type="head" /> в файле index.php шаблона сайта:
<link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/plugins/content/joomhighlightjs/extras/linenums.css" rel="stylesheet" />
<link href="/plugins/content/joomhighlightjs/styles/sunburst.css" rel="stylesheet" />Чего мы и добивались: чтобы прописанный ниже код для сгенерированных иконок не перекрывался с кодом, генерируемым Joomla!
На этом всё. :)
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
