Поменять favicon в битриксе. Создание своего фавикона

Дополнительной идентификацией вашего сайта 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 .Здесь приведу адреса генераторов иконок.

pr-cy.ru/favicon
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 следующим образом

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

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

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

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

class="eliadunit">

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

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

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

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

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

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

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

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

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

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

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

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

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

Наверное, многие пользователи замечали, что при открытии того или иного сайта в левом углу вкладки отображается маленькая иконка, характерная для каждого портала. Однако мало кто знает, что это такое и как её поменять на своем сайте.

История появления первых фавиконов

Маленькая иконка на сайте называется фавикон, что означает "значок для избранного" в переводе с английского. Изначально она использовалась для быстрого поиска и наведения порядка в закладках в браузерах 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 изображение и зачем оно нужно.

Favicon — небольшое графическое изображение 16 х 16 пикселей связанное с вашим веб-сайтов. Одно из главных предназначений фавиконки — возможность идентифицировать веб-сайт визуально в большом количестве вкладок или закладок веб-браузера.

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

На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате.ico, но это ошибочное мнение ! Вы можете создать красивое фавикон изображение и в .png формате.

Для того чтобы создать фавиконку самостоятельно, откройте Photoshop или другой графический редактор и создайте квадратное изображение 128 × 128 пикселей, и нарисуйте изображение для фавиконки (обычно ставят просто логотип или его часть). После того как вы создали изображение, сохраните его в формате PNG . Хотя большинство современных браузеров будет отображать значок сайта в формате PNG, очень старые версии Internet Explorer не будут.

Важно! После того как вы создадите фавикон изображение, его не обязательно уменьшать к размеру 16 х 16 пикселей! WordPress это сделает за вас !

Установка Favicon в WordPress

1. Загрузите фавикон в корень папки вашей текущей темы (шаблона). Название фавиконки обязательно сделайте — favicon .

wp-content\themes\ваша_тема

2. Зайдите в административную панель WordPress .

3. Перейдите в Внешний вид — > Редактор.

4. В списке справа выберите файл с именем Заголовок (header.php) .

5. Если ваш favicon в png формате — скопируйте код ниже и вставьте его ниже тега .

Если в формате ico — используйте код для вставки:

6. Сохраните изменения нажав кнопку «Обновить файл» .

Вот и все! Как вы видите, установка фавикон изображения в WordPress задача не сложная, и не требующая много времени.

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

Если у вас что-то не получилось, смело пишите в комментариях! Я постараюсь помочь в решении вашей задачи.

Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта - фавиконке (favicon). Но перед тем как добавить ее на сайт, давайте вспомним что такое favicon изображение и зачем оно нужно. Favicon - небольшое графическое изображение 16 х 16 пикселей связанное с вашим веб-сайтов. Одно из главных предназначений фавиконки - возможность идентифицировать веб-сайт визуально в большом количестве вкладок или закладок веб-браузера. Создать фавиконку можно разными способами, для этого есть множество онлайн-редакторов и куча подобный сервисов. На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате.ico, но это ошибочное мнение! Вы можете создать красивое фавикон изображение…

Замена файла favicon.ico Favicon (от англ. FAVorite ICON - значок для избранного) - значок веб-сайта или
веб-страницы. Отображается браузером во вкладке перед названием страницы,
а также в качестве картинки рядом с закладкой.
- не частая задача. Как правило, её выполняют один раз на каждом сайте. Способ замены зависит от числа используемых шаблонов на сайте.

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

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

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

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

Первые шаги замены идентичны описанным выше:

После этого новый файл favicon.ico будет отображаться вместо старого
.

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