Гид компьютерного мира - Информационный портал

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

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

Если не получается создать иконку самому, можно найти в интернете большие коллекции значков различной тематики. Один из таких сервисов - favicon.cс.

Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей.

Когда картинка создана и сохранена (скачена) в нужном формате на компьютере, можно переходить к тому, как установить иконку на сайт.

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

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

Для более корректной установки фавикона, необходимо файл загрузить на сервер: в корневую папку сайта, обычно она называется public_html или index_html.

Откройте на хостинге панель управления сайтом и загрузите файл с фавиконом - favicon.ico в корневую папку (public_html).

Код :

В Joomla фавикон загружается в корневой каталог сайта, в папку с используемым шаблоном Joomla.

Установка фавикона на сайт joomla

В панели управления хостинга идём в папку: domen/public_html/templaters/шаблон сайта/ - и загружаем файл favicon.ico .

Если нужна иконка сайта на WordPress , то после загрузки файла. ico в директорию

/domains/Сайт.ru/public_html/wp-content/themes/шаблон/

необходимо открыть файл header.php , в который после \\также вставляется код .

В D rupal 7 фавикон устанавливается через админ.

Нужно зайти в раздел «Оформление» и далее в настройки активной темы. Найти в низу пункт «Настройка значка» и убирать галочку против «Использовать стандартный значок». Теперь стоит только загрузить свой значок с компьютера, используя кнопку «Обзор».

Открыв в браузере свой сайт, появится фавикон. Возможно через некоторое время, после обновления кеша, или обновите кеш сами.

Как заменить фавикон сайта

Как заменить значок, если она уже есть на сайте. Замена фавикона сайта, осуществляется практически по той же схеме, что и добавление.

Удалите старый файл favicon.ico и загрузите свой.

2014-08-19 8706 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-версия.

Как быстро вставить код на все страницы?

Используем «Быструю замену участков шаблона» (Панель управления - вкладка «Дизайн»). Для режима замены выбираем вариант «Многострочный».

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

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


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

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

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

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


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

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

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

Так же поисковая система Яндекс, выводит фавикон рядом, с заголовком страницы.

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

Создание favicon с помощью онлайн генератора

Для начала необходимо подготовить картинку, размером 16 на 16 пикселей. Это стандартный размер favicon. Для этого можно использовать логотип сайта или понравившееся изображение. Чтобы подогнать необходимый размер, можно воспользоваться программой "Paint", или какой то другой сторонней программой.

Обратите внимание, при сжатии картинки в 16 на 16 пикселей. Размеры сторон оригинала должны быть одинаковы. Допустим 243 на 243 пикселя. Иначе при сжатии, получится размытость и без того маленькой картинки.

Далее воспользуемся онлайн генератором создания favicon. Пройдя по этой ссылке favicon.ru На главной странице, в пункте "Сделать favicon из изображения". Выберите на компьютере, заранее подготовленную картинку размером 16 на 16 пикселей.

Следующий шаг "редактировать картинку". Здесь жмём "Сохранить пропорции" и "далее".

Теперь наш favicon готов. Остаётся посмотреть как он выглядит в браузере и скачать его. Так же при желании, можно подредактировать изображение. Или создать его с нуля.

Скачанный favicon, имеет нужный формат (.ico) и название favicon. Менять ни чего не надо. Остаётся только установить его на сайт.

Установка favicon на joomla 3

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

Для этого нужно зайти в корень сайта. Далее в папку "templates", найти папку с шаблоном который стоит по умолчанию. У меня это родной шаблон "Beez3", и поменять имеющийся там favicon, на созданный нами.

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

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

Проверить проиндексировал Яндекс ваш фавикон или нет, можно набрав в браузере: http://favicon.yandex..ru", впишите доменное имя вашего сайта.

Для гугла: http:// www.google.com/s2/favicons?domain=сайт

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

Второй способ установки favicon на joomla 3

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

Далее, зайти в папку с шаблоном, который стоит по умолчанию: templates / шаблон по умолчанию . Найти и открыть файл index.php, с помощью блокнота notepad++. В этом документе, между открывающим тегом , и закрывающим тегом ввести вот такой код:


Остаётся очистить кеш браузера, и перезагрузить сайт. После чего фавикон должен отобразится на вашем сайте.

Лучшие статьи по теме