Как заменить favicon в битрикс.

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

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

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

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

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

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

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

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

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

Применение в оформлении сайта небольших иконок, отображаемых перед наименованием ресурса в строке браузера, окне поисковой системы либо списке избранных ресурсов, позволяет существенно повысить посещаемость сайта. Именно поэтому большинством веб-дизайнеров принимается решение установить фавикон на разрабатываемый .

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

Как поменять фавикон

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

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

Например, для браузера Mozilla существует возможность использования анимированных фавиконов.

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

Для этого в файле index.php находим тег .

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

После этого код будет иметь следующий вид:

Значения строк в данном коде следующие:

— определяет расположение неподвижного фавикона для браузеров, не поддерживающих анимацию.

— определяет место расположения анимированного фавикона.

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

После этого отображение фавикона будет реализовано при открытии любого из участков сайта.

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

Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта — фавиконке (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, но это ошибочное мнение! Вы можете создать красивое фавикон изображение…

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

Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!

И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.

JavaScript. Быстрый старт

Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.

Задаем иконку через админку WordPress

Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.

Кстати, сама система советует загружать картинку не менее 512 писелей по ширине и высоте. Такая рекомендация дается потому, что на мобильных приложениях в браузерах могут действительно использоваться такие размеры. Но в целом вы имеете право полностью проигнорировать эту рекомендацию и загрузить файл любого размера. Главное, чтобы ширина и высота были одинаковыми.

Как поменять favicon через html код

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

Для такого подключения используется одинарный тег link. В нем нужно задать некоторые атрибуты, а также задать путь к файлу.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Типичное подключение иконки выглядит именно таким образом. Давайте рассмотрим каждый атрибут тега подробнее:
Rel – всегда этот атрибут использовался для того, чтобы указать роль подключаемого файла. Например, stylesheet – таблица стилей, shortcut icon – иконка и т.д. Просто запомните этот параметр, его нужно обязательно прописывать.

Href – самый важный параметр, он определяет путь к файлу. Если путь задан неверно, вы просто не увидите на странице никаких изменений. Путь в этом примере кода задан так, как будто файл icon.png лежит в той же папке, что и файл с кодом страницы.

Type – сегодня использование этого атрибута является необязательным. Он указывает mime-тип подключаемого файла. В целом, его все-таки можно прописать хотя бы для того, чтобы в старых браузерах не было никаких проблем с обработкой кода.

Формат

Формат картинки может быть любым – jpeg, png, gif, ico. Последний формат создан специально для отображения таких иконок. В некоторых программах для рисования иконок, изображение сохраняется именно в этом формате. Чтобы подключить такую картинку, нужно всего лишь изменить атрибут type.