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

Favicon сайта Joomla

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

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

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

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

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

  • online-fotoshop.ru;
  • pixlr.com/editor;

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

  • iconfinder.com
  • genericons.com
  • freepik.com/free-icons
  • flaticons.net (!)
  • iconbird.com
  • iconsearch.ru
  • iconspedia.com
  • icons8.com
  • glyphicons.com (вектор)
  • findicons.com (!)
  • iconarchive.com (!)
  • flaticon.com

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

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

  • pr-cy.ru/favicon (!)
  • iconizer.net/ru
  • iconsdb.com

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

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

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

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

  • Создаем свою иконку, используя сервисы их списков выше;
  • Если не получается, смотрим пример ниже;
  • Заходим на сайт по FTP, используя клиенты WinCSP или FilleZilla;
  • Закачиваем в корневую папку сайта файл фавикона, дав ему название [favicon], с расширением [favicon.ico];
  • Закачиваем в каталог рабочего шаблона этот же файл [favicon.ico].

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

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

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

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

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

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

favicon joomla urok13 screen9

favicon joomla urok13 screen9

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

favicon joomla urok13 screen11

favicon joomla urok13 screen11

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

favicon joomla urok13 screen12

favicon joomla urok13 screen12

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

favicon joomla urok13 screen5

favicon joomla urok13 screen5

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

  1. Загружаем сделанную картинку лампочку;
  2. Создаем favicon;
  3. Смотрим, как иконка будет видна в браузере;

favicon joomla urok13 screen6

favicon joomla urok13 screen6

favicon joomla urok13 screen7

favicon joomla urok13 screen7

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

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

  • Делаем иконку сайта из картинки.
  • Идем на сайт: www.iconarchive.com;
  • Ищем иконку, которая вам нравится;
  • Если есть возможность скачать её в формате ico, там будет кнопка.

favicon joomla urok13 screen8

favicon joomla urok13 screen8

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

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

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

  • Зайдите на сайт. Вам нужна вкладка «Create New Favicon»;

favicon joomla urok13 screen1

favicon joomla urok13 screen1

  • Используя инструменты справа, можно нарисовать иконку самостоятельно. Для проверки иконка будет сразу видна внизу в строке браузера. Для примера я нарисовал, знак похожий на знак вопроса;
  • Если вы не художник, как я, используйте кнопку «Import Image» и загрузите в качестве шаблона иконки любую png картинку или фото;
  • Картинку также редактируйте и сохраняйте в формате favicon.ico.

favicon joomla urok13 screen2

favicon joomla urok13 screen2

favicon joomla urok13 screen3

favicon joomla urok13 screen3
 

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

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

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

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

Для Яндекс — https://favicon.yandex.net/favicon/ваш_домен.ru (где меняем в конце ваш_домен.ru на свой домен).

Для Гугл — https://www.google.com/s2/favicons?domain=ваш_домен.com (а здесь в конце вместо ваш_домен.com так же вписываем имя проверяемого сайта).

Вывод

  • Вариантов создать иконку массу, я показал несколько из них.
  • Не вижу причин, чтобы не создать уникальную иконку favicon сайта Joomla.
  • Современные браузеры, находят иконки без дополнительных кодов.
  • Проблемы в показе иконок сайта, могут быть в браузере IE, но это другая история и не на этом сайте. 

©Joomla-abc.ru

Еще уроки

 

Похожие статьи

Модуль HTML-код Joomla – подробное ...

Модуль HTML-код Joomla популярен из-за своей универсальности. С его помощью...

Модуль Материалы–Новости Joomla сай...

Для вывода определенного количества материалов из конкретной категории или ...

Joomla модуль Обёртка (Wrapper)

Продолжаю уроки по созданию и настройке модулей Joomla сайта. В этой статье...

Как следить за ошибками системы Joo...

Администратору сайта Joomla важно следить за состоянием сайта и анализирова...

Общие настройки модулей Joomla, уро...

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

Модуль нижний колонтитул Joomla сай...

Для показа авторских прав вашего сайта joomla есть системный модуль под наз...

Copyright © 2023 Joomla-abc.ru. Все права защищены.