Joomla как изменить иконку

Изменение фавикона Вашего веб-сайта — это относительно легкая задача.

1. Создайте изображение размером 16×16 пикселей. Вы можете для этого использовать какой-либо графический редактор, например, Photoshop, Gimp, Paint.net или Windows Paint. Альтернативно, Вы также можете использовать инструменты, находящиеся в интернете, такие как http://antifavicon.com.

1. Созданный Вами таким образом файл будет иметь расширение .ico. Скопируйте этот файл в директорию /joomla/templates/<Вашего шаблона> и назовите его favicon.ico.

Мой фавикон хранится в другом месте

Некоторые шаблоны содержат код, который перенаправляет браузер на другую директорию или другой файл фавикона. Для того чтобы определить, где должен храниться Ваш новый фавикон, исследуйте http://yoursite.com/templates/Ваш_шаблон/index.php и поищите код, содержащий текст <link rel=»shortcut icon». Там Вы найдете директорию и название нового файла фавикона. Скопируйте Ваш фавикон в это новое место и дайте ему то название, на которое указывает та ссылка (Вы возможно пожелаете создать резервную копию файла старого файла фавикона). Удостоверьтесь в том, что настройки безопасности Вашего веб-сервера разрешают его доступ к этому файлу. Взгляните на ниже следующие примеры.

<link rel="shortcut icon" href="http://Вашсайт.com/templates/Ваш_шаблон/icon/favicon.ico" />

Если Вы не желаете просто изменить файл favicon.ico в директории соответствующего шаблона, то Вы можете найти упоминание файла favicon.ico в документе html.php. Путь к нему: «……..librariesjoomladocumenthtmlhtml.php». Это предотвратит переключение этой иконки [на другую] когда Вы будете использовать

<link rel="shortcut icon" href="http://Вашсайт.com/templates/Ваш_шаблон/icon/youricon.ico" />

в html коде шаблона и [если] Вы не удалили [старый] файл favicon.ico (зачем вызывать эту иконку дважды?).

Из html.php

// Try to find a favicon by checking the template and root folder
		$path = $directory . DS;
		$dirs = array( $path, JPATH_BASE . DS );
		foreach ($dirs as $dir )
		{
			$icon =   $dir . 'favicon.ico';
			if (file_exists( $icon ))
			{
				$path = str_replace( JPATH_BASE . DS, '', $dir );
				$path = str_replace( '\', '/', $path );
				$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
				break;''

Вступление

Дополнительной идентификацией вашего сайта Joomla, может стать уникальная иконка или favicon. Favicon на сайте Joomla будет отражаться в браузерах в названии вкладок и сделанных закладках вместе со всеми страницами вашего сайта. По умолчанию все сайты управляемые CMS Joomla имеют одинаковые стандартные иконки. Отличаются только иконка для видимой части сайта Joomla и для административной панели. Иконку для части сайта, которую видят посетители, можно легко поменять.

Нужно ли менять иконку (favicon) сайта Joomla

Замена иконки своего сайта влияет только на субъективную составляющую оптимизации сайта. Посетитель, сделав закладку страницы сайта, может потом легко ее найти в списке всех своих закладок. Кроме этого иконка сайта отражается в поиске и в прикладных инструментах. например, в списке сайтов в Яндекс веб-мастер.

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

Требования к новой иконке Joomla

Слово Faviconэто сокращение от двух английских слов, favorites и icon. Для иконок Joomla есть свой стандарт. Их размер должен быть 16×16 или 32×32 пикселей. Сделан favicon, должен быть в 256 цветовой гамме. И главное, формат иконки Joomlaдолжен быть favicon.ico.

Шаги по замене иконки (favicon) сайта Joomla

Замена иконки сайта Joomlaосуществляется в несколько простых шагов:

• Сгенерировать уникальную иконку из любого фото формата PNG или JPEG. Или нарисовать иконку самостоятельно, использую online сервисы или фото программы;
• Сделать из картинки favicon формат ico, размер 16(32)×16(32) px;
• Закачать новую иконку, в каталог сайта, удалив при этом все старые favicon;
• Вставить специальный код в шаблон главной страницы своего сайта.

Разберем каждый шаг подробно.

Шаг 1. Создание иконки для сайта Joomla

В интернет есть много online инструментов, для генерации иконки в формате favicon.ico из любой фотографии. Здесь обратить внимание нужно на следующее.

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

Генераторы favicon вы также можете найти самостоятельно, вписав в окне поиска: генератор favicon.Здесь приведу адреса генераторов иконок.

1. pr-cy.ru/favicon
2. tools.dynamicdrive.com/favicon

И еще:

• iconfinder.com
• freepik.com/free-icons
• genericons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• iconspedia.com
• iconsearch.ru
• icons8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• themify.me
• thenounproject.com
• flaticon.com

Делаются иконки Favicon следующим образом

• Заранее находите оригинальную картинку для своей будущей иконки;
• Открываете генератор;
• В окне загрузчика генератора выбираете свою иконку на компьютере. Выбираете размеры будущей иконки, для Joomla16×16 пикселей;
• Нажимаете кнопку, типа «Сделать».
• Favicon генерируется за считанные секунды. Далее остается только скачать ее на свой компьютер. Для этого есть своя кнопка «Download». Иконка на компьютере, нужно закачать ее в каталог.

Шаг 2. Закачать новую иконку в каталог сайта

С местом в каталоге сайта, куда нужно закачать новую иконку (favicon) сайта ситуация следующая.

Раньше обязательным местом для размещения favicon.ico был корневой каталог сайта. Сейчас ситуация немного смягчилась. Использование динамических шаблонов позволяет закачивать иконку в любой каталог своего сайта, только в коде (ниже) нужно четко прописывать путь до этого каталога. Но при этом нужно помнить, чем дальше иконка от корня сайта, тем дольше она будет загружаться в браузере. А за скорость загрузки сайта нужно бороться, даже в мелочах.

Поэтому советую загрузить основной favicon в корень сайта Joomla. Для загрузки понадобиться FTP клиент или авторизация в административной панели на хостинге. Перед загрузкой новой иконки (favicon) проверьте все папки сайта [image] и удалите или переименуйте старые favicon, которые возможно были установлены в загруженных вами шаблонах. Отдельно проверьте папку с вашим шаблоном [template/Название_шаблон]. Из подпапок шаблона уберите файл favicon.ico. После того, как удалили старые favicon загружайте новый [favicon.ico] в корень сайта. Favicon в каталоге сайта, остается вставить код в шаблон главной страницы сайта.

Примечание: На этом этапе иконка сайта может уже поменяться. В некоторых шаблонах код для показа иконки (о коде ниже) уже прописан в шаблоне сайта и поэтому при замене иконки в каталоге она может поменяться и в закладке браузера. Только чтобы это увидеть нужно очистить кэш сайта и, может быть, перегрузить браузер.

Шаг 3. Вставляем код в шаблон сайта для отображения иконки favicon

Примечание: Этот способ устарел, в основных браузерах новая иконка отображается без вставки этого кода. Достаточно удалить все старые фавиконы из корня сайта и из шаблона, а также очистить кэш браузера и сайта.

Код (ниже) вставляется в шаблон главной страницы сайта Joomla между тегами <head></head>(пример ниже). В интернет вы можете найти несколько вариантов кодов (favicon), для сайтов Joomla. Приведу пример только тех кодов, которые работают на всех моих сайтах Joomla.

Код первый. Иконка появляется практически моментально, после очистки кеша сайта.

<link rel="SHORTCUT ICON" href="/favicon.ico"type="image/x-icon" />

Код второй. Из-за отсутствия показа браузеру типа элеммента формы (type) эта иконка появляется в браузере через 1-2 суток.

<link rel="SHORTCUT ICON" href="/favicon.ico" /> 

Код третий. Для иконки(favicon) размещенного не в корневом каталоге (patch-to это путь до папки с favicon).

<link rel="SHORTCUT ICON" href="/path-to/favicon.ico"/>

• Работают коды и с таким написанием SHORTCUT ICON , и с такимshortcut icon
• Если код вашего сайта HTML ,а не XHTML ,то заканчивать код нужно » >» ,а не «/>»

Если вам нужно отображение иконки в браузере IE ,попробуйте добавить такой код :

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/vnd.microsoft.icon" /> 
<link rel="shortcut icon" href="http://www.example/com/favicon.ico" type="image/vnd.microsoft.icon" />

После вставки кода в шаблон не забывайте сохраниться, также очистите кэш сайта.

• Административная панель >>>Сайт>>>Обслуживание>>>Очистить весь кэш (для версий Joomla 1.7-2.5-3.х)
• Административная панель>>>Инструменты >>>Очистить весь кэш (для версии 1.5)

Пример вставленного кода для отображения иконки сайта:

<head>
  <jdoc:include type="head" />
  <?php require_once(YOURBASEPATH. DIRECTORY_SEPARATOR .'includes'. DIRECTORY_SEPARATOR .'jsn_head.php'); ?>
   <link rel=" SHORTCUT ICON " href="/favicon.ico" type="image/x-icon" /> 
</head>

©Joomla-abc.ru

Другие статьи раздела: Администрирование Joomla 2.5

Администрирование Joomla 3.x

От автора: приветствую Вас уважаемые читатели. В данной статье мы с Вами поговорим о маленькой, но в то же время полезной детали любого хорошего сайта, иконке для CMS Joomla – favicon. Вы узнаете как добавить faviconна сайте, а так же изменить уже существующий.

Для тех, кто не знает favicon – это маленький значок (иконка) сайта, который отображается веб-браузером во вкладке непосредственно перед заголовком сайта, или если быть более точным, перед содержимым тега title. То есть по большому счету это изображение определенного формата и размера с расширением ico.

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

А значит, первое, что бросится в глаза пользователю, это как раз иконка – значок сайта, соответственно, даже не стоит говорить о том, что если пользователь увидит среди них знакомую – это подтолкнёт его на посещение сайта. Поэтому вопрос, как поменять фавикон в joomla 3, достаточно популярен среди новичков и далее я постараюсь привести подробный ответ.

Для обеспечения кроссбраузерности, создавая favicon, как правило, выбирают формат изображения ico, потому как он поддерживается абсолютно всеми браузерами. Хотя сейчас современные браузеры поддерживают такие форматы как PNG и GIF, а Mozilla FireFox еще и JPEG, а также Анимированный GIF. Но, так или иначе, встречаются пользователи, которые используют устаревшие версии веб-браузеров, поэтому на мой взгляд, стоит все же использовать общепринятый формат ico.

Определившись с форматом, давайте выясним размер изображения, которое может использоваться в качестве значка сайта. Здесь все просто, размер favicon довольно “стандартен” и составляет 16х16 пикселей, если необходимо обеспечить максимальную кроссбраузерность. При этом для различных мобильных устройств и их специфических браузеров, можно использовать значки размером 32×32, 96×96 и даже 192×192 пикселей.

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

Один из популярнейших сервисов по созданию иконок favicon, в данное время – это генератор favicon.ru, который мы с Вами и используем в данной статье. Так же довольно неплохой генератор favicon-generator (favicon-generator.org), который вместо одной иконки, создает целый архив в котором сгенерированы значки различных размеров. Соответственно для каждого размера, так же приводится код подключения.

Для создания favicon, выберем следующее изображение.

Далее переходим на сайт favicon.ru.

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

После загрузки изображения, выбираем интересующую область, из которой будет сформирована иконка и нажимаем“Далее”.

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

Фавикон в джумле – располагается в корне каталога активного шаблона. К примеру, для шаблона Beez3, это папка — templatesbeez3. А значит, скачанный файл достаточно поместить в указанную папку, тем самым заменив стандартный значок, и обновить информацию в браузере. Код, который отображает favicon в браузере, генерируется непосредственно движком Joomla, поэтому в ручную, его прописывать не нужно. Кому интересно уточню, что данный код формируется по адресу librariesjoomladocumenthtml, в файле html.php. Для отображения иконки, в ядре Joomla предусмотрен специальный метод, под названием addFavicon(), который и вызывается в выше указанном файле.

Теперь, Вы знаете как поменять favicon в joomla 3, единственное хотел бы, так сказать для общего развития, привести код, для отображения иконки – дляслучая, если Вам нужно будет прописывать его вручную.

Как Вы понимаете в атрибуте href, тега link, необходимо указать путь к изображению favicon.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

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

В этой статье показано, как установить для 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!

На этом всё.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

Фавикон (favicon) – это маленькая картинка на вкладке сайта в вашем браузере.

Также фавикон (favicon) отображается в Яндексе в выдаче.

Это полезно для узнаваемости бренда, да и вообще приятно видеть свой логотип вместо стандартного фавикона Joomla.

Сейчас расскажу о том как создать и установить на сайт фавикон на примере сайта на Joomla.

Создание фавикона

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

01. www.favicon.cc

Нажимайте Import Image и загружаете свою картинку.

Важно понимать, что фавикон – очень маленькая картинка и пытаться с помощью него передать много смысла глупо. Он должен быть простым и заметным.

Таблицу Менделеева не надо ставить на фавикон. Ее никто не увидит.

Этот сайт хорош тем, что можно “допиливать” готовый фавикон. Необходимо удалить лишние точки. Сделать цвет у фавикона одинаковым. Все это можно здесь сделать.

Чтоб скачать фавикон надо щелкнуть в Download Favicon. Все просто.

02. favicon.ru

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

Во-первых, своим уебанским интерфейсом.

Вместо простого и понятно редактора в первом сайте тут это:

Вот редактор обрезки картинки:

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

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

Как вставить или установить фавикон на сайт?

01. Заходим на ftp-сервер с сайтом и заливаем готовый фавикон на серверт.

Все! Новый фавикон должен появится в браузере в вкладке с сайтом. Если этого не произошло, то первым делом нужно удалить кэш из браузера. Часто он грузит старый фавикон из кэша. Фавикон не отображается все равно. Да, обычно это не помогает =).

02. Если мы видим фавикон стандартный от Joomla, то значит где-то еще на сервере в папке с сайтом есть еще один фавикон. Скорее всего он находится в папке /templates/. Тут лежат все скаченные вами шаблоны для сайтов и во многих есть фавиконы. Джумла предпочитает показывать их. Их надо удалить. Это самый надежный способ сменить фавикон.

03. Первый способ. Открываем Исходный код браузера и ищем строчку

<link rel="shortcut icon" type="image/ico"href="http:путь_до_вашей_иконки_Favicon/favicon.ico" />

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

Второй способ. В Total Commander включил поиск в папке с сайтом по названию favicon.

Total Commander в течении минуты нашел этот лишний фавикон и мне осталось только его удалить. В следующую секунду браузер обновил сайт с новым фавиконом. Яндекс не сразу “схавает” фавикон. Может ждать до месяца.