Воскресенье, 09 Март 2014 12:23

Как сделать и установить favicon на joomla 3

Всем привет!!! В этой очередной статье по настройке joomla 3, разберём как сделать   и установить на сайт, немаловажный элемент под названием favicon. 

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

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

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

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

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

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

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

Сделать favicon из изображения

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

Редактировать картинку favicon

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

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

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

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

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

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

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

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

Для гугла: http://www.google.com/s2/favicons?domain=normalnet.ru

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

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

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

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

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

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

Комментарии  

Nick
#5 Nick 18.08.2016 23:39
Благодарю.
Цитировать
Елена
#4 Елена 22.01.2016 04:14
:-) Спасибо!!!
Цитировать
Витяй
#3 Витяй 28.12.2015 09:38
Пасиба, доходчиво всё очень.
Год назад не смог понять как сделать.
Здесь всё отлично разъяснено.
Так держать !!! :-)
Цитировать
Serge
#2 Serge 03.07.2015 10:32
Спасибо, у меня тоже все получилось :-)
Цитировать
Elena
#1 Elena 14.06.2015 09:44
Спасибо за подробные объяснения! Все красиво получилось!
Цитировать

Добавить комментарий


Защитный код
Обновить