Changing the site favicon
Changing your website’s favicon is a relatively easy task.
- Create a 16×16 pixel image. You may use graphic software such as Photoshop, Gimp, Paint.net or Windows Paint. Alternatively, you can also use an online tool such as http://antifavicon.com/
- Convert to ico format using free online sites such as:
- http://www.favicongenerator.com/
- http://www.htmlkit.com/services/favicon/
- http://tools.dynamicdrive.com/favicon/
- http://www.favicon.cc/
- The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/ directory and name it favicon.ico .
- Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn’t necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don’t refresh the favicon every time they show a page. Even refreshing the page (F5) won’t help. So you need to refresh more thoroughly:
- Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
- IE: hold Ctrl while clicking Refresh, or press Ctrl-F5;
- Konqueror: simply click the Reload button, or press F5;
- Opera users may need to completely clear their cache in Tools→Preferences.
- Chrome: Shift-F5
- If this doesn’t work you will need to delete the temporary internet files and the history and then open your page again. Or delete your favicon, refresh the browser with F5, then upload the favicon
My favicon is in another location
If you don’t want to just change the favicon.ico file in its respective template directory you can find the reference to the favicon.ico file in the html.php document. The path is «. \libraries\joomla\document\html\html.php». This should prevent the icon from toggling if you use
in the template html and you don’t remove the favicon.ico file. (why call the icon twice?)
From the html.php
// Try to find a favicon by checking the template and root folder $path = $directory . DS; $dirs = array( $path, JPATH_BASE . DS ); foreach ($dirs as $dir ) < $icon = $dir . 'favicon.ico'; if (file_exists( $icon )) < $path = str_replace( JPATH_BASE . DS, '', $dir ); $path = str_replace( '\\', '/', $path ); $this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' ); break;''
Как поменять favicon в joomla 3
Новости смартфонов, гаджетов и компьютерного железа
Как поменять favicon на сайте Joomla
Шаги по замене иконки (favicon) сайта Joomla
Замена иконки сайта Joomlaосуществляется в несколько простых шагов:
- Сгенерировать уникальную иконку из любого фото формата PNG или JPEG. Или нарисовать иконку самостоятельно, использую online сервисы или фото программы;
- Сделать из картинки favicon формат ico, размер 16(32)×16(32) px;
- Закачать новую иконку, в каталог сайта, удалив при этом все старые favicon;
- Вставить специальный код в шаблон главной страницы своего сайта.
Разберем каждый шаг подробно.
Шаг 1. Создание иконки для сайта Joomla
В интернет есть много online инструментов, для генерации иконки в формате favicon.ico из любой фотографии. Здесь обратить внимание нужно на следующее.
Если вы хотите, чтобы ваш favicon был без белого фона, то его источником должно быть с прозрачным фоном при создании и в формате PNG при сохранении. Используя фото форматов отличных от png вы получите Favicon с белым или черным фоном. Отличные хранилища иконок в интернете вы найдете в верхнем меню этого сайта в пункте: Инструменты веб-мастера.
Генераторы favicon вы также можете найти самостоятельно, вписав в окне поиска: генератор favicon.Здесь приведу адреса генераторов иконок.
- pr-cy.ru/favicon
- tools.dynamicdrive.com/favicon
- iconfinder.com
- freepik.com/free-icons
- genericons.com
- flaticons.net
- iconbird.com
- iconizer.net
- webhostinghub.com
- iconspedia.com
- iconsearch.ru
- icons8.com
- glyphicons.com
- findicons.com
- icomoon.io
- iconarchive.com
- themify.me
- thenounproject.com
- flaticon.com
Делаются иконки Favicon следующим образом
- Заранее находите оригинальную картинку для своей будущей иконки;
- Открываете генератор;
- В окне загрузчика генератора выбираете свою иконку на компьютере. Выбираете размеры будущей иконки, для Joomla16×16 пикселей;
- Нажимаете кнопку, типа «Сделать».
- Favicon генерируется за считанные секунды. Далее остается только скачать ее на свой компьютер. Для этого есть своя кнопка «Download». Иконка на компьютере, нужно закачать ее в каталог.
Шаг 2. Закачать новую иконку в каталог сайта
С местом в каталоге сайта, куда нужно закачать новую иконку (favicon) сайта ситуация следующая.
Раньше обязательным местом для размещения favicon.ico был корневой каталог сайта. Сейчас ситуация немного смягчилась. Использование динамических шаблонов позволяет закачивать иконку в любой каталог своего сайта, только в коде (ниже) нужно четко прописывать путь до этого каталога. Но при этом нужно помнить, чем дальше иконка от корня сайта, тем дольше она будет загружаться в браузере. А за скорость загрузки сайта нужно бороться, даже в мелочах.
Поэтому советую загрузить основной favicon в корень сайта Joomla. Для загрузки понадобиться FTP клиент или авторизация в административной панели на хостинге. Перед загрузкой новой иконки (favicon) проверьте все папки сайта [image] и удалите или переименуйте старые favicon, которые возможно были установлены в загруженных вами шаблонах. Отдельно проверьте папку с вашим шаблоном [template/Название_шаблон]. Из подпапок шаблона уберите файл favicon.ico. После того, как удалили старые favicon загружайте новый [favicon.ico] в корень сайта. Favicon в каталоге сайта, остается вставить код в шаблон главной страницы сайта.
Примечание: На этом этапе иконка сайта может уже поменяться. В некоторых шаблонах код для показа иконки (о коде ниже) уже прописан в шаблоне сайта и поэтому при замене иконки в каталоге она может поменяться и в закладке браузера. Только чтобы это увидеть нужно очистить кэш сайта и, может быть, перегрузить браузер.
Шаг 3. Вставляем код в шаблон сайта для отображения иконки favicon
Примечание: Этот способ устарел, в основных браузерах новая иконка отображается без вставки этого кода. Достаточно удалить все старые фавиконы из корня сайта и из шаблона, а также очистить кэш браузера и сайта.
Код (ниже) вставляется в шаблон главной страницы сайта Joomla между тегами (пример ниже). В интернет вы можете найти несколько вариантов кодов (favicon), для сайтов Joomla. Приведу пример только тех кодов, которые работают на всех моих сайтах Joomla.
Код первый. Иконка появляется практически моментально, после очистки кеша сайта.
Код второй. Из-за отсутствия показа браузеру типа элеммента формы (type) эта иконка появляется в браузере через 1-2 суток.
Код третий. Для иконки(favicon) размещенного не в корневом каталоге (patch-to это путь до папки с favicon).
- Работают коды и с таким написанием SHORTCUT ICON , и с такимshortcut icon
- Если код вашего сайта HTML ,а не XHTML ,то заканчивать код нужно » >» ,а не «/>»
Если вам нужно отображение иконки в браузере IE ,попробуйте добавить такой код :
После вставки кода в шаблон не забывайте сохраниться, также очистите кэш сайта.
- Административная панель >>>Сайт>>>Обслуживание>>>Очистить весь кэш (для версий Joomla 1.7-2.5-3.х)
- Административная панель>>>Инструменты >>>Очистить весь кэш (для версии 1.5)
Пример вставленного кода для отображения иконки сайта:
Иконка Favicon для сайта на Joomla
Favicon представляет из себя маленькую картинку, являющуюся отличительным знаком сайта в Интернете. Из руководства вы узнаете, как создать и поменять фавиконку в 3.x и 4.x.
Что такое Favicon?
(фавикон, сокр. от Favorite Icon, также: фавиконка) — миниатюрное изображение размером 16×16 пикселей с названием файла favicon.ico (современные браузеры могут показывать фавиконки и в других форматах), отображаемое во вкладках и закладках браузера, является отличительным знаком сайта в Интернете.
Как поменять Favicon в Joomla 3?
- перейдите в Расширения → Шаблоны → Шаблоны
- перейдите в Настройки
- в текстовое поле Допустимые форматы изображений допишите ico
- нажмите Сохранить и закрыть
- перейдите в Параметры нужного шаблона
- кликните по названию файла favicon.ico
- нажмите Удалить файл
- нажмите Новый файл
- во всплывающем окне нажмите Выберите файл и выберите свой файл favicon.ico для загрузки
- нажмите Загрузить
Что делать, если Favicon не меняется?
Если после замены файла браузер продолжает отображать прежнюю фавиконку, то это не значит, что замена файл на сайте не обновился: браузеры кэшируют файлы Favicon и даже обновление страницы по клавише F5 не поможет в этом случае. Для обновления иконки осуществите следующие действия в зависимости от браузера:
- Firefox или Safari: Shift + F5 или Ctrl + Shift + R
- Internet Explorer: Ctrl + F5
- Opera: очистите кэш браузера
- Chrome: Shift + F5
Если это не поможет, то попробуйте удалить все временные файлы браузера в настройках и обновить страницу.
How to Change your Favicon in Joomla 3
You may have noticed in your Joomla 3 websites, that it automatically displays the Joomla logo in browsers by default. This little image is known as a Favicon.
In this tutorial we will show you how to replace the Joomla Favicon with one of your own. This common customization can help people identify your brand logo, and also differentiates your site from other Joomla 3 sites.
Changing your Joomla 3 Favicon
- Create your Favicon with the dimensions 16×16 pixels, and make sure the file is named “favicon.ico“. There are many free Favicon Generators online, here are a few of the most popular ones:
inmotionhosting.com/support/tools/favicon-generator
- tools.dynamicdrive.com/favicon
- www.favicon.cc
- favicon-generator.org
- Upload your icon to the following folder where your Joomla is installed: /templates/your_template_name
For example, if you are using the protostar template, your Favicon will be uploaded here: /templates/protostar/favicon.ico
Refresh your page, then you should be able to see your new Favicon on your website. You may have to clear your browser cache, or test it in a different browser to see the new Favicon.
Congratulations, now you know how to customize your Joomla 3 website, by changing your Favicon!
John-Paul Briones Content Writer II
John-Paul is an Electronics Engineer that spent most of his career in IT. He has been a Technical Writer for InMotion since 2013.
Related Articles
11 thoughts on “ How to Change your Favicon in Joomla 3 ”
Peter B says:
Sven is correct. You should place the favicon in a custom folder. It will change back with every update if you use the above method. Having a hard time finding out how to exactly do that. Having a Protostar favocin that does not change on every update seems to be the hardest Joomla challenge ever…
Peter says:
Sven wrote “…so first of all you should put it in a custom path if you don’t want to lose it after every update.” But how do I tell Joomla to use my icon in that custom path and not the default icon?
InMotionFan says:
Hello, Thanks for the question about the favicon. According to the official Joomla documentation, the path we provide is the proper one. It may differ depending on the template you use. If the template has a custom path, then you can copy the icon there. If you have any further questions or comments, please let us know. Regards,
Arnel C.
slanter says:
Can’t find the folder in which to place the favicon, using the online Joomla. I check in files, no favicon. I check in templates, no favicon. PLease provide a description of the path with more specificity.
InMotionFan says:
Hello Slanter, Apologies for the confusion with the instructions above. They do tell you where the favicon should go. We can’t give you an exact location because we don’t know what theme you’re using or where you may have installed Joomla. However, the location is based on where you installed Joomla and then finding the folder for the theme that you’re using. The example above lists protostar – which is one of the default themes provided with Joomla. If you have any further questions or comments, please let us know. Regards,
Arnel C.