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
Как создать иконку сайта из фото
Картинку беру произвольно из выдачи «Картинки», например, лампочку:
Иду на онлайн редактор: pixlr.com/editor. Открываю свою картинку лампочки. Задача, убрать фон картинки.
Убираю замок с фона два клика (1). Использую инструмент «волшебная палочка» (2), Выделяю фон за картинкой, кликая по нему «волшебной палочкой» (3). Вырезаю фон, используя инструменты «Редактировать».
Сохраняю картинку в формате [png].
Далее, идем на сайт: pr-cy.ru/favicon и проходим три шага создания иконки.
- Загружаем сделанную картинку лампочку;
- Создаем favicon;
- Смотрим, как иконка будет видна в браузере;
Скачиваем файл favicon.ico на компьютер.
Как создать иконку сайта из картинки
- Делаем иконку сайта из картинки.
- Идем на сайт: www.iconarchive.com;
- Ищем иконку, которая вам нравится;
- Если есть возможность скачать её в формате ico, там будет кнопка.
Если нет формата ico, скачиваем картинку в формате png и, используя генератор иконок pr-cy.ru/favicon, создаем иконку сайта из картинки, как описано в первом примере.
Как создать иконку на сайте favicon.cc
Инструмент favicon.cc очень удобен для создания иконок, как самостоятельно, так и из картинок.
- Зайдите на сайт. Вам нужна вкладка «Create New Favicon»;
- Используя инструменты справа, можно нарисовать иконку самостоятельно. Для проверки иконка будет сразу видна внизу в строке браузера. Для примера я нарисовал, знак похожий на знак вопроса;
- Если вы не художник, как я, используйте кнопку «Import Image» и загрузите в качестве шаблона иконки любую png картинку или фото;
- Картинку также редактируйте и сохраняйте в формате favicon.ico.
Как заказать иконку
Иконку сайта можно заказать у профессионалов. Для этого, идете на сайт фриланса и заказываете иконку сайта за 300-500 рублей.
Как проверить правильное отражение иконки в браузерах
Сделали иконку — проверьте правильность её отражения.
Для Яндекс — https://favicon.yandex.net/favicon/ваш_домен.ru (где меняем в конце ваш_домен.ru на свой домен).
Для Гугл — https://www.google.com/s2/favicons?domain=ваш_домен.com (а здесь в конце вместо ваш_домен.com так же вписываем имя проверяемого сайта).
Вывод
- Вариантов создать иконку массу, я показал несколько из них.
- Не вижу причин, чтобы не создать уникальную иконку favicon сайта Joomla.
- Современные браузеры, находят иконки без дополнительных кодов.
- Проблемы в показе иконок сайта, могут быть в браузере IE, но это другая история и не на этом сайте.
©Joomla-abc.ru
Еще уроки
- 10 лучших WAMP платформ для CMS Joomla под Windows, урок 3
- 12 Правил оптимизации Joomla сайта, урок 28
- 2 программы FTP клиент для создания Joomla сайта – FilleZilla, WinSCP, урок 4
- 33 первых расширения Joomla сайта — плагины и компоненты для расширения функционала сайта, урок 29
- 5 Программ для работы с изображениями Joomla, урок 6
- Favicon сайта Joomla – как создать и установить favicon на сайт Joomla, урок 13
- Joomla модуль Обёртка (Wrapper)
- Joomla на XAMPP — управление Joomla в автономном режиме на локальной машине, урок 7
- reCAPTCHA версия 2.0 на сайте Joomla — капча на Joomla сайте
- URL Joomla: SEF, ЧПУ, убрать index урок 59
Похожие статьи
Настройки медиа менеджер Joomla — о...
Продолжаем общие настройки системы по компонентам. В этой статье общие наст...
Общая настройка меток Joomla — Урок...
Продолжаем общие настройки сайта Joomla 3 версии. В этой статье настройка м...
Общие настройки материалов Joomla —...
Продолжаю уроки по глобальным настройкам сайта, которые принято называть на...
Общая настройка менеджера шаблонов ...
Продолжаем уроки Joomla по общим настройкам сайта. В этом уроке общие (глоб...
Всё о плагинах CMS Joomla! — админи...
CMS Joomla! По определению является системой с открытым исходным кодом. Это...
Меню Joomla: общая информация
В этой статье поговорим об основной навигации по сайту — меню Joomla. Общая...