Как изменить favicon в битрикс. Требования к новой иконке Joomla
Как поменять Favicon в Joomla - 4.9 out of 5 based on 7 votes
В данном уроке мы рассмотрим как поменять Favicon Joomla на свой уникальный Favicon.
Favicon - это маленький значок 16\16 px, который отображается в адресной строке браузера, рядом с URL, во вкладках браузера, в поисковой выдаче и рекламных объявлениях Яндекса и т. д.
Joomla является очень популярной CMS системой с огромным функционалом, на которой построено большое количество сайтов. По умолчанию в данной системе и стандартных шаблонах используется свой значок Favicon. Он имеет несколько разновидностей и встречается очень часто.
Ошибкой многих владельцев сайтов, построенных на базе CMS Joomla является, то что они не используют свой уникальный Favicon. Наверняка вы встречали в поисковой выдаче Яндекса сайты вот с такими значками:
Преимущества использования уникального Favicon.
1. Этот маленький значок позволяет выделиться вашему сайту среди огромного количества других ресурсов.
2. Фавикон является важным инструментом брэндинга, который может помочь посетителю обратить внимание на ваш сайт и будет служить визуальным напоминанием о нем.
3. Favicon отображается на странице поисковой выдачи Яндекса и может увеличивать кликабельность и количетсво переходов на ваш сайт.
4. Если вы покупаете контекстную рекламу в Рекламной сети Яндекса, то возле обьявления ведущего на ваш сайт, так же будет отображаться этот значек и это будет влиять на количество кликов.
Именно поэтому важно иметь уникальный значек фавикон для сайта.
Как создать Favicon.
Создать Favicon можно при помощи любого графического редактора, но окончательный его вариант должен иметь раширение.ico. Поэту вам понадобится программа которая может сохранять графические файлы в данном формате. Так как устанавливать такую программу только для того, чтобы сохранить одно изображение будет излишне. То лучше всего воспользоваться специальным сервисом позволяющим это сделать.
Само изображение можно как создать самостоятельно так и использовать уже готовую заготовку. Но помните, что оно должно вписываться в дизайн вашего сайта, быть заметным и уникальным.
Как установить Favicon в Joomla.
Теперь про то, как установить ваш Favicon вместо стандартного фавикона Joomla.
Если в шаблоне, который вы используете на сайте уже имеется файл favicon.ico, то вам достаточно просто заменить его на свой. Как это проверить? Зайдите в папку с вашим сайтом, далее перейдите в папку templates/название вашего шаблона/. Если в этой папке имеется файл favicon.ico, то просто замените его на свой.
Если у вас другая ситуация, то вначале необходимо подключить фавикон к вашему сайту. В начале поменстите ваш значок в корневую папку с вашим сайтом.
После этого в файле index.php вашего шаблона необходимо прописать путь к данному файлу. Для этого в файде index.php перед тегом необходимо вставить следующие строчки:
В коде выше, указаны относительные пути к файлу favicon.ico, в некоторых случаях нужно указывать обсолютные пути, для этого замените "/favicon.ico" на http://ваш-сайт.ru/favicon.ico
Добавить данный код вы можете двумя способами:
1. В административной панели Joomla пройдите в пункт Расширения >> Менеджер шаблонов. Откроется таблица в которой будут отображаться все шаблоны установленные в вашей системе. В колонке "Шаблон" найдите название вашего шаблона и кликните по нему.
На открывшейся странице кликните по ссылке "Изменить шаблон главной страницы" в результате чего откроется для редактирования файл index.php вашего шаблона. В коде найдите тег и перед ним вставьте предложенный выше код и нажмите на кнопку "Сохранить".
2. Второй способ заключается в том, что вы можете зайти в папку с вашей темой и отредактировать файл index.php при помощи какого либо редактора, например .
Разместить файлик favicon.ico можно не только в корневой директории сайта, но и в любой другой. Однако некоторые сервисы и программы ищут его именно в этой директории поэту для своих сайтов я размещаю его именно в корневой директории и вам советую делать так же.
Что делать, если установленный Favicon не отображается.
Как только вы установите новый Favicon на Joomla, вам конечно же захочется посмотреть как он будет выглядеть во вкладках вашего браузера, но после перезагрузки страницы вам все равно будет показан старая пиктограмма.
Для того, чтобы отобразился ваш новый favicon необходимо очистить кеш браузера или зайти на сайт с того браузера с которого ранее вы на его не заходили.
2014-08-19 8707 4 Денис Абдуллин
В этом материале я не только отвечаю на вопрос, как установить свою иконку favicon на сайт в системе uCoz, но и указываю, как сделать favicon.ico и делюсь с Вами коллекцией иконок для сайта.
Favicon – значок веб-сайта или веб-страницы. В браузерах отображается возле заголовка сайта и/или адреса сайта. Действия описанные в статье дают вот такой результат:
Краткое содержание:
Как сделать иконку favicon.ico
Для создания иконки сайта используйте серивис favicon.ru или favicon.cc . Здесь можно самостоятельно нарисовать значок или загрузить изображение с компьютера для конвертирования (можно, например, взять из нашего раздела иконки).
После загрузки изображения или после того, как Вы нарисовали значок, нажимайте «Сохранить Favicon».
Готовые фавиконки можно скачать здесь. Я загрузил 101 иконку favicon, нажмите на картинку справа, чтобы скачать.
Для создания значка можно использовать и специальные программы. Например, Microangelo или Delphi. Я предлагаю воспользоваться онлайн-генераторами, т.к. это проще.
Как установить иконку favicon.ico на uCoz сайт
1. Файл иконки называют favicon (favicon.ico ), предпочтительный формат – ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP. Загрузите файл «favicon.ico» через файловый менеджер или FTP в корневой каталог сайта. Файловый менеджер можно найти на главной странице панели правления сайтом.
2. Добавьте код между
и (Например, Управление дизайном - Страницы сайта):200?"200px":""+(this.scrollHeight+5)+"px");">
200?"200px":""+(this.scrollHeight+5)+"px");">
Можно указать несколько изображений в разных форматах - например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате GIF или PNG для остальных браузеров.
Проверьте правильность пути к иконке в атрибуте href. Если Вы используете для иконки формат не ICO, то измените значение type на нужное:
- image/x-icon для формата ICO;
- image/gif для формата GIF;
- image/jpeg для формата JPEG;
- image/png для формата PNG;
- image/bmp для формата BMP.
Если Вы хотите использовать анимированную иконку , то советуем сделать 2 иконки (в формате GIF и ICO) и 2 строчки кода для них. В случае если браузер поддерживает анимированные иконки, будет показываться GIF-версия.
Как быстро вставить код на все страницы?
Используем «Быструю замену участков шаблона» (Панель управления - вкладка «Дизайн»). Для режима замены выбираем вариант «Многострочный».
Наверное, многие пользователи замечали, что при открытии того или иного сайта в левом углу вкладки отображается маленькая иконка, характерная для каждого портала. Однако мало кто знает, что это такое и как её поменять на своем сайте.
История появления первых фавиконов
Маленькая иконка на сайте называется фавикон, что означает "значок для избранного" в переводе с английского. Изначально она использовалась для быстрого поиска и наведения порядка в закладках в браузерах IE. Затем стала повсеместно отображаться практически всеми интернет-бродилками для придания особой стилистики сайту.
Характеристики Favicon
Фавикон — это обычное изображение, как правило, размером 16 на 16 точек. Для хранения могут использоваться форматы ICO, PNG и GIF. Фавикон поддерживают многие популярные браузеры. В их число входят Chrome, IE, Opera, Firefox. Какие-то могут поддерживать анимационные версии, какие-то нет.
По умолчанию браузер пытается отыскать иконку в корне сайта. Однако можно указать ему, где именно она находится. Для этого достаточно в коде использовать строку:
.
Создание своего фавикона
Чтобы создать свою иконку, достаточно воспользоваться одним из представленных в сети онлайн-редакторов. К примеру, самый известный находится по адресу favicon.ru. Нужно карандашом отметить точки, нуждающиеся в заливке, и затем сохранить картинку.
Как поменять фавикон
Многие веб-разработчики стараются при создании сайта сменить стандартную иконку CMS или вообще отсутствующую на более подходящую тематике. Далее будет перечисление способов, описывающих, как поменять фавикон в различных системах управления контентом или же без них.
Joomla 1.5 и работа с фавиконом
Joomla 1.5 — одна из первых стабильных версий системы управления контентом. Используется она все реже, однако многие до сих пор поддерживают её на некоторых сайтах. Для того чтобы поменять фавикон в Joomla 1.5, нужно создать иконку из готового рисунка или же с нуля. Затем перейти в папку с шаблонами Joomla, которые находятся в каталоге templates, и скопировать фавикон туда.
Joomla 3
Последняя из вышедших версий данной системы управления контентом. Улучшен функционал и добавлены новые возможности.
Перед тем как поменять фавикон в Joomla 3, нужно сначала его создать. Как это сделать, было описано выше. Затем можно использовать один из двух способов. Первый позаимствован из Joomla 1.5 и предполагает ручную замену файла в папке с шаблонами.
Для реализации второго способа необходимо подредактировать файл index.php, который находится в корневой папке текущего шаблона. В нем интересует Чтобы все заработало как надо, нужно от открывающего тега до закрывающего ввести:
.
Добраться до файла index.php можно, просто пройдя по папкам до нужной или через админку. В панели управления надо зайти в «Расширения» и там перейти в «Менеджер шаблонов». Среди присутствующих вариантов нужно выбрать текущий и нажать «Изменить шаблон главной страницы». Откроется редактор кода, в котором между открывающим и закрывающим тегом head должен быть вставлен вышеприведённый код.
Иногда фавикон отображается не сразу в поисковой выдаче. Это может быть связано с тем, что страница ещё не проиндексировалась. Стоит немного подождать, и через несколько дней, а может быть, и месяц новый фавикон отобразится в верхней части сайта.
Как поменять фавикон в "Битриксе"
"Битрикс" — система управления контентом, на базе которой можно создавать и простые сайты, и корпоративные порталы. Разработана компанией "1С-Битрикс".
Структура файлов сайта чем-то схожа с Joomla, и процесс замены фавикона на нужный происходит точно так же. То есть необходимо перейти в папку с шаблоном и скопировать туда нужную картинку в формате ICO. Если не помогло, попробовать также добавить её в корневую папку проекта.
Также имеется и другой способ, который можно совместить с двумя перечисленными выше. Это прописать в главном файле уже известные строки:
.
WordPress
WordPress — одна из самых известных систем управления контентом. Обрела свою популярность благодаря тому, что бесплатна, проста в освоении и функциональна. Как поменять фавикон на сайте WordPress? Этот процесс в данной CMS выполняется проще всех остальных. Нужно зайти в панель управления и перейти в раздел Cherry Options, после чего выбрать вкладку Logo&Favicon. Имеющийся файл нужно удалить с помощью кнопки Remove. Затем подготовить новую иконку и загрузить себе на компьютер. Теперь с помощью библиотеки медиафайлов нужно добавить обновленную иконку в базу и сохранить изменения.
После всех манипуляций достаточно перезагрузить страницу и увидеть, как сменился фавикон. Возможно, что он не отобразится с первого раза, поэтому нужно обновить кэш браузера и попробовать снова.
Имеется ещё один способ изменения фавикона в WordPress. Для этого существует специальный файл header.php, который отвечает за вывод шапки сайта. В нем имеется блок с тегами head. Вот именно между ними и нужно вставить следующий код:
Header.php находится по пути /wp-content/themes/название темы. Стоит обратить внимание на то, что в строках кода используется расширение ICO. Однако, если оно другого типа у текущего фавикона, то можно в коде указать то, которое надо.
Заключение
В статье было подробно описано, как поменять фавикон в разных системах управления контентом. Для чего вообще нужно это делать и какой практический интерес несёт эта процедура? Самая главная причина — узнаваемость сайта. Именно по фавикону можно узнать свой любимый сайт в поисковой выдаче. К тому же при большом количестве открытых вкладок в современном браузере можно быстро вычислить, на какой из них размещена та или иная страница.
Перед тем как поменять фавикон, его нужно подготовить. Это возможно сделать, преобразовав готовый рисунок или логотип. Или же нарисовать вручную новый фавикон с нуля. Для этого имеется много онлайн-редакторов, а также конвертеров в сети.
Наверное, многие пользователи замечали, что при открытии того или иного сайта в левом углу вкладки отображается маленькая иконка, характерная для каждого портала. Однако мало кто знает, что это такое и как её поменять на своем сайте.
История появления первых фавиконов
Маленькая иконка на сайте называется фавикон, что означает "значок для избранного" в переводе с английского. Изначально она использовалась для быстрого поиска и наведения порядка в закладках в браузерах IE. Затем стала повсеместно отображаться практически всеми интернет-бродилками для придания особой стилистики сайту.
Характеристики Favicon
Фавикон — это обычное изображение, как правило, размером 16 на 16 точек. Для хранения могут использоваться форматы ICO, PNG и GIF. Фавикон поддерживают многие популярные браузеры. В их число входят Chrome, IE, Opera, Firefox. Какие-то могут поддерживать анимационные версии, какие-то нет.
По умолчанию браузер пытается отыскать иконку в корне сайта. Однако можно указать ему, где именно она находится. Для этого достаточно в коде использовать строку:
.
Создание своего фавикона
Чтобы создать свою иконку, достаточно воспользоваться одним из представленных в сети онлайн-редакторов. К примеру, самый известный находится по адресу favicon.ru. Нужно карандашом отметить точки, нуждающиеся в заливке, и затем сохранить картинку.
Как поменять фавикон
Многие веб-разработчики стараются при создании сайта сменить стандартную иконку CMS или вообще отсутствующую на более подходящую тематике. Далее будет перечисление способов, описывающих, как поменять фавикон в различных системах управления контентом или же без них.
Joomla 1.5 и работа с фавиконом
Joomla 1.5 — одна из первых стабильных версий системы управления контентом. Используется она все реже, однако многие до сих пор поддерживают её на некоторых сайтах. Для того чтобы поменять фавикон в Joomla 1.5, нужно создать иконку из готового рисунка или же с нуля. Затем перейти в папку с шаблонами Joomla, которые находятся в каталоге templates, и скопировать фавикон туда.
Joomla 3
Последняя из вышедших версий данной системы управления контентом. Улучшен функционал и добавлены новые возможности.
Перед тем как поменять фавикон в Joomla 3, нужно сначала его создать. Как это сделать, было описано выше. Затем можно использовать один из двух способов. Первый позаимствован из Joomla 1.5 и предполагает ручную замену файла в папке с шаблонами.
Для реализации второго способа необходимо подредактировать файл index.php, который находится в корневой папке текущего шаблона. В нем интересует тег
. Чтобы все заработало как надо, нужно от открывающего тега до закрывающего ввести:.
Добраться до файла index.php можно, просто пройдя по папкам до нужной или через админку. В панели управления надо зайти в «Расширения» и там перейти в «Менеджер шаблонов». Среди присутствующих вариантов нужно выбрать текущий и нажать «Изменить шаблон главной страницы». Откроется редактор кода, в котором между открывающим и закрывающим тегом head должен быть вставлен вышеприведённый код.
Иногда фавикон отображается не сразу в поисковой выдаче. Это может быть связано с тем, что страница ещё не проиндексировалась. Стоит немного подождать, и через несколько дней, а может быть, и месяц новый фавикон отобразится в верхней части сайта.
Как поменять фавикон в "Битриксе"
"Битрикс" — система управления контентом, на базе которой можно создавать и простые сайты, и корпоративные порталы. Разработана компанией "1С-Битрикс".
Структура файлов сайта чем-то схожа с Joomla, и процесс замены фавикона на нужный происходит точно так же. То есть необходимо перейти в папку с шаблоном и скопировать туда нужную картинку в формате ICO. Если не помогло, попробовать также добавить её в корневую папку проекта.
Также имеется и другой способ, который можно совместить с двумя перечисленными выше. Это прописать в главном файле уже известные строки:
.
WordPress
WordPress — одна из самых известных систем управления контентом. Обрела свою популярность благодаря тому, что бесплатна, проста в освоении и функциональна. Как поменять фавикон на сайте WordPress? Этот процесс в данной CMS выполняется проще всех остальных. Нужно зайти в панель управления и перейти в раздел Cherry Options, после чего выбрать вкладку Logo&Favicon. Имеющийся файл нужно удалить с помощью кнопки Remove. Затем подготовить новую иконку и загрузить себе на компьютер. Теперь с помощью библиотеки медиафайлов нужно добавить обновленную иконку в базу и сохранить изменения.
После всех манипуляций достаточно перезагрузить страницу и увидеть, как сменился фавикон. Возможно, что он не отобразится с первого раза, поэтому нужно обновить кэш браузера и попробовать снова.
Имеется ещё один способ изменения фавикона в WordPress. Для этого существует специальный файл header.php, который отвечает за вывод шапки сайта. В нем имеется блок с тегами head. Вот именно между ними и нужно вставить следующий код:
Header.php находится по пути /wp-content/themes/название темы. Стоит обратить внимание на то, что в строках кода используется расширение ICO. Однако, если оно другого типа у текущего фавикона, то можно в коде указать то, которое надо.
Заключение
В статье было подробно описано, как поменять фавикон в разных системах управления контентом. Для чего вообще нужно это делать и какой практический интерес несёт эта процедура? Самая главная причина — узнаваемость сайта. Именно по фавикону можно узнать свой любимый сайт в поисковой выдаче. К тому же при большом количестве открытых вкладок в современном браузере можно быстро вычислить, на какой из них размещена та или иная страница.
Перед тем как поменять фавикон, его нужно подготовить. Это возможно сделать, преобразовав готовый рисунок или логотип. Или же нарисовать вручную новый фавикон с нуля. Для этого имеется много онлайн-редакторов, а также конвертеров в сети.
В инструкции рассмотрены следующие вопросы:
Зачем нужен favicon для сайта?
Favicon (англ. favorite icon - избранный значок) - это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:
Вот где можно увидеть такую иконку:
- Закладки и вкладки браузера
- Результаты поиска Яндекс, Google
- Каталоги и рейтинги, которые загружают favicon сайтов
- Панель задач и рабочий стол операционной системы
Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.
Где взять иконку для сайта?
По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:
- Найти в интернете готовый файл иконки с расширением.ico (например, )
- Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
- Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)
При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.
Наряду с расширением.ico, в настоящее время используются иконки формата.png. Разрешение таких изображений может достигать 180x180 пикселей.
Как установить иконку на сайт?
Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью загрузите их в корень сайта:
Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.
Как объявить Apple Touch icon и плитку для Windows 10?
Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:
В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом: