Как в Joomla сделать favicon для всех платформ

  1. Как установить для Joomla favicon для всех платформ
  2. Шаг первый. Генерирование favicon
  3. Шаг второй. Заливаем иконки на сервер
  4. Шаг третий. Изменение кода шаблона сайта
  5. Шаг четвёртый. Удаление устаревших favicon
  6. Шаг пятый. Всё работает!
  7. И в заключение... Почему надо было удалять старые иконки?


Как установить для 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

Теперь нужно удалить старые иконки. Ниже объясню почему.

  1. Иконку из шаблона сайта: ./templates/protostar/favicon.ico
  2. Иконку из корня сайта: ./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;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;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;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;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;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;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;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
	<link href="/?format=feed&amp;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!

На этом всё. :)

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню