Как подключить favicon joomla

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

В этой статье показано, как установить для Joomla favicon для всех платформ. Для этого нужно будет воспользоваться сторонним сервисом в web-интерфейсом (ничего не нужно устанавливать на компьютер) — сгенерировать набор фавиконок и сопутствующих файлов. После этого останется залить их на сервер и внести кое-какие изменения в шаблон сайта. Для тех, кому любопытно, почему всё нужно сделать так, а не иначе, в конце даны разъяснения.

Шаг первый. Генерирование favicon

Воспользуемся сторонним сервисом, предоставляющим удобны интерфейс для создания фавиконок под все платформы. В статье «Генератор favicon для всех платформ: iOS, Android, PC/Mac. » дана подробнейшая инструкция по тому, как создать набор иконок под все возможные платформы с помощью инструмента realfavicongenerator.net. К написанному мне добавить не чего, кроме того, что думайте, когда прописываете пути к файлам — это пригодится при встраивании иконок в HTML-код шаблона.

Шаг второй. Заливаем иконки на сервер

Заливаем и распаковываем архив иконок на сервер в ту папку, которую для этого выбрали при генерации иконок на realfavicongenerator.net.

Шаг третий. Изменение кода шаблона сайта

Я до сих пор пользуюсь стандартным шаблоном protostar, поэтому некоторые пути могут отличаться, но общий смысл останется неизменным. Нужно вписать код выданный realfavicongenerator.net в шаблон сайта в контейнер для того, чтобы браузер на пользовательском устройстве мог выбрать подходящую ему иконку.

Что получилось у меня:

Шаг четвёртый. Удаление устаревших favicon

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

Шаг пятый. Всё работает!

После всех этих манипуляций, можно походить на свой сайт с разных устройств и с разных браузеров. Поэкспериментировать, как вставляется ссылка на сайт в мобильных устройствах, как и что добавляется в «Избранное». Поводов для радости масса — всё по-взрослому! 🙂

READ  Как подключить iphone к itunes без ввода пароля

И в заключение. Почему?

Остался не объяснённым вопрос: «Почему надо было удалять старые иконки?»

Объясню. Пока иконки не удалены, посмотрим в исходный код страницы в браузере:

В 13-й строчке видим ссылку на старую иконку, а ниже видим такое же описание со ссылкой на новую иконку. Конфликт? Конфликт! И его нужно снять.

Откуда же появляется ссылка на старую иконку и как от неё избавиться?

В файле index.php шаблона сайта видим такую строчку:

Без неё нельзя, но именно она генерирует весь поток заголовков. Разберёмся более подробно, что же она делает с favicon.

Из описания кода этого вызова понятно, что favicon ищется сперва в папке шаблона, если там favicon не найдена, то она ищется в корневой директории сайта. Ну и, если и там её нет, то значит её нет вообще.

Глубже лезть в ядро Joomla я уже не стал, а просто проверил данную гипотезу (смотрим на путь к favicon.ico в 13-й сточке):

1. Сперва имеем в html-коде страницы сайта:

2. После того, как файл favicon.ico удалён из директории шаблона, подставляется favicon.ico из корневой директории сайта:

Чего мы и добивались: чтобы прописанный ниже код для сгенерированных иконок не перекрывался с кодом, генерируемым Joomla!

Источник

Добавление Favicon на сайт с Joomla

Добавление Favicon (иконки сайта, отображаемой на вкладке браузера) — важный шаг, выделяющий сайт. Современный пользователь сети Интернет редко держит открытым в браузере лишь один сайт. Поэтому Favicon это вопрос удобства. Ну а добавить свой Favicon на сайт с Joomla очень просто.

В целом, процесс установки Favicon (англ. FAVorite ICON — значок для избранного) одинаков для любого сайта, установленная система управления контентом (CMS) тут особой роли не играет. Хотя нюансы, несомненно, есть.

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

Для начала опишем общие моменты, касающиеся Favicon на сайтах, а затем затронем особенности, свойственные Joomla.

Стандартом считается размещение файла favicon.ico в корне сайта. Первоначально принимались изображения размером 16×16 пикселей, на текущий момент допустимы также размеры 32×32 и 48×48 пикселей. Браузер будет искать favicon.ico в корне сайта, если в коде страницы явно не указано его расположение. Поместить файл favicon.ico можно через встроенный файловый менеджер интерфейса хостинга, через FTP-клиент или через интерфейс административной панели Joomla. Это очень лёгкий вариант, но минус его в том, что он задаёт Favicon только на весь сайт целиком. Если разным страницам нужны разные иконки, их местоположение нужно прописать в коде.

READ  Как подключить розетку для кабельного телевидения

Допустим, мы положили файл primer.png в каталог images. Чтобы указать его как Favicon, достаточно добавить строку:

Множество примеров того, как вставлять изображения того или иного формата в качестве Favicon, мы привели в статье о Favicon в MODX. Здесь не будем повторяться. Поговорим о работе с Favicon в Joomla.

Joomla хранит файлы favicon.ico в каталогах с шаблонами. Это достаточно гибкий подход, которого рекомендуется придерживаться при работе с сайтами на Joomla.

По сути, вы можете просто заменить файл /templates/[имя_шаблона]/favicon.ico на одноимённый через встроенный файловый менеджер интерфейса хостинга, через FTP-клиент или через интерфейс административной панели Joomla. Последний способ мы и рассмотрим.

Открываем РасширенияШаблоныШаблоны.

Нажмите там кнопку Настройки.

В поле Допустимые форматы изображений через запятую добавьте ico. После этого нажмите кнопку Сохранить и закрыть.

Далее нас интересуют параметры используемого на сайте шаблона.

Найдите в перечне файлов и каталогов файл favicon.ico, выделите его и нажмите кнопку Удалить файл.

После этого нажмите на кнопку Новый файл и загрузите свой файл с таким же названием.

При смене используемого на сайте шаблона добавьте в новый шаблон нужный вам Favicon вышеописанным способом.

Источник

Joomla-abc.ru

100 Уроков по созданию Joomla

Вступление

Favicon сайта Joomla это способ визуальной идентификации сайта в адресной строке браузера, а также в закладках и на различных сервисах. Сервисы SEO анализа относят отсутствие favicon на сайте, к негативным факторам оптимизации сайта.

Favicon сайта Joomla

По умолчанию, все сайты коробочной версии Joomla имеют стандартный, всем знакомый фавикон Joomla. Основные браузеры Интернет, такие как, Chrome, Яндекс, Mozilla, Opera умеют находить и распознавать иконку favicon сайта, если она на сайте есть. Отсюда, самый простой вариант идентифицировать свой сайт Joomla иконкой, заменить стандартную иконку Joomla своей, самостоятельно сделанной, иконкой.

Как сделать иконку сайта favicon

Напомню, что favicon это файл с расширением [.ico], размером 16-24-32 px. Именно по расширению ico, браузеры находят фавикон и показывают его в адресной строке и закладках. Для изготовления иконки можно воспользоваться следующими способами:

READ  Как подключить ssl сертификат к сайту timeweb

1. Если есть навыки и программа, изготовить иконку можно при помощи программы Фотошоп.

2. Использовать онлайн программами для работы с изображениями в браузерах:

3. Найти готовую иконку на специальных сайтах иконок:

4. Использовать онлайн сервисы для создания иконок из фотографий:

Найдя иконку на одном из сайтов из списка выше, скачайте её на компьютер в формате [.png], размер любой. Используя генераторы иконок из списка ниже, создайте из картинки файл [.ico], для дальнейшего использования в качестве фавикона сайта.

5. Использовать комплексный редактор для создания иконок favicon.cc (!).

На favicon.cc можно выполнить несколько задач, включая редактирование иконки. С помощью этого редактора получается очень контрастная и качественная иконка.

Как сделать, чтобы браузеры показывали favicon сайта

Наша задача не просто создать иконку сайта, а сделать так, чтобы браузеры её показывали. Для этого:

В принципе, на Joomla больше делать ничего не нужно. После очистки кэша браузера вы должны увидеть иконку своего сайт в адресной строке браузера. Если этого не произошло, очистите историю браузера, перегрузите браузер, очистите кэш сайта и посмотрите еще раз. Если опять не видите favicon, посмотрите мета-теги в этой статье (тут) и добавьте один из них в сайта.

Примеры создания иконки из фото

Покажу три примера:

Как создать иконку сайта из фото

Картинку беру произвольно из выдачи «Картинки», например, лампочку:

Иду на онлайн редактор: pixlr.com/editor. Открываю свою картинку лампочки. Задача, убрать фон картинки.

Убираю замок с фона два клика (1). Использую инструмент «волшебная палочка» (2), Выделяю фон за картинкой, кликая по нему «волшебной палочкой» (3). Вырезаю фон, используя инструменты «Редактировать».

Сохраняю картинку в формате [png].

Далее, идем на сайт: pr-cy.ru/favicon и проходим три шага создания иконки.

Скачиваем файл favicon.ico на компьютер.

Как создать иконку сайта из картинки

Если нет формата ico, скачиваем картинку в формате png и, используя генератор иконок pr-cy.ru/favicon, создаем иконку сайта из картинки, как описано в первом примере.

Как создать иконку на сайте favicon.cc

Инструмент favicon.cc очень удобен для создания иконок, как самостоятельно, так и из картинок.

Как заказать иконку

Иконку сайта можно заказать у профессионалов. Для этого, идете на сайт фриланса и заказываете иконку сайта за 300-500 рублей.

Как проверить правильное отражение иконки в браузерах

Сделали иконку — проверьте правильность её отражения.

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector