Меню Рубрики

Установка иконки для joomla

Добавление иконок пунктам меню Joomla. Простой и хороший способы.

Одним из способов увеличения привлекательности сайта является добавление к пунктам меню иконок. Иконки – это маленькие картинки, которые ассоциируются с содержимым пункта меню. Польза от них заключается в том, что они привлекают внимание пользователей и делают их более лояльными по отношению к сайту. В этой статье я расскажу про два способа добавления иконок к пунктам меню: быстрый, легкий, но плохой, а также сложный, долгий, но хороший. Примером будет добавление иконок к категориям на wedal.ru.

Добавление иконок пунктам меню Joomla. Шаг 1. Выбор размера иконок.

Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:

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

Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).

Вот пример такой иконки:

Для сайта wedal.ru я выберу именно этот размер.

Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.

Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.

Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.

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

Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру 🙂 .

Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.

Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.

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

Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:

Открытие главной страницы сайта просто насилует браузер и компьютер пользователя.

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.

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

Давайте разберемся, как создать спрайт.

  1. Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
  2. Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
  3. Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:

В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт:

  • Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.
  • Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.

    Читайте также:  Установка в нишу панелей пвх

    Главным недостатком спрайтов является сложность обновления оных. Так, например, если у вас появится даже один новый пункт меню, которому нужно добавить иконку, спрайт придется создавать заново.

    Хоть я и назвал способы создания иконок для пунктов меню Joomla простым и хорошим, нельзя однозначно сказать, какой из них лучше. У каждого способа есть свои достоинства и недостатки. Если иконок немного или они часто меняются, то лучше использовать первый способ. Если же иконок много, и они остаются постоянными, как и пункты меню, к которым они привязаны, то однозначно, нужно использовать спрайты.

    UPD.: Помимо простого и хорошего способа, существует также еще и отличный. О нем написана отдельная статья: Добавление иконочных шрифтов на сайт Joomla.

    источник

    Замена иконки, favicon на сайте Joomla, как поменять

    Вступление

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

    Нужно ли менять иконку ( favicon ) сайта Joomla

    Замена иконки своего сайта влияет только на субъективную составляющую оптимизации сайта. Посетитель, сделав закладку страницы сайта, может потом легко ее найти в списке всех своих закладок. Кроме этого иконка сайта отражается в поиске и в прикладных инструментах. например, в списке сайтов в Яндекс веб-мастер.

    Кроме этого, заменив стандартную иконку Joomla, вы прекратите афишировать, что ваш сайт управляется Joomla, а это один из шагов повышающих безопасность сайта.

    Требования к новой иконке Joomla

    Слово Favicon это сокращение от двух английских слов, favorites и icon . Для иконок Joomla есть свой стандарт. Их размер должен быть 16×16 или 32×32 пикселей. Сделан favicon , должен быть в 256 цветовой гамме. И главное, формат иконки Joomla должен быть favicon . ico .

    Шаги по замене иконки ( 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 .Здесь приведу адреса генераторов иконок.

    • 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 следующим образом

    • Заранее находите оригинальную картинку для своей будущей иконки;
    • Открываете генератор;
    • В окне загрузчика генератора выбираете свою иконку на компьютере. Выбираете размеры будущей иконки, для Joomla 16×16 пикселей;
    • Нажимаете кнопку, типа «Сделать».
    • Favicon генерируется за считанные секунды. Далее остается только скачать ее на свой компьютер. Для этого есть своя кнопка « Download ».Иконка на компьютере, нужно закачать ее в каталог.

    Шаг 2. Закачать новую иконку в каталог сайта

    С местом в каталоге сайта, куда нужно закачать новую иконку ( favicon ) сайта ситуация следующая.

    Раньше обязательным местом для размещения favicon . ico был корневой каталог сайта. Сейчас ситуация немного смягчилась. Использование динамических шаблонов позволяет закачивать иконку в любой каталог своего сайта, только в коде (ниже) нужно четко прописывать путь до этого каталога. Но при этом нужно помнить, чем дальше иконка от корня сайта, тем дольше она будет загружаться в браузере. А за скорость загрузки сайта нужно бороться, даже в мелочах.

    Читайте также:  Установка звездочки на велосипед с мотором

    Поэтому советую загрузить основной favicon в корень сайта Joomla . Для загрузки понадобиться FTP клиент или авторизация в административной панели на хостинге. Перед загрузкой новой иконки ( favicon ) проверьте все папки сайта [image] и удалите или переименуйте старые favicon , которые возможно были установлены в загруженных вами шаблонах. Отдельно проверьте папку с вашим шаблоном [template/Название_шаблон]. Из подпапок шаблона уберите файл favicon.ico. После того, как удалили старые favicon загружайте новый [ favicon . ico ] в корень сайта. Favicon в каталоге сайта, остается вставить код в шаблон главной страницы сайта.

    Примечание: На этом этапе иконка сайта может уже поменяться. В некоторых шаблонах код для показа иконки (о коде ниже) уже прописан в шаблоне сайта и поэтому при замене иконки в каталоге она может поменяться и в закладке браузера. Только чтобы это увидеть нужно очистить кэш сайта и, может быть, перегрузить браузер.

    Шаг 3. Вставляем код в шаблон сайта для отображения иконки favicon

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

    Код (ниже) вставляется в шаблон главной страницы сайта Joomla между тегами head > head >(пример ниже). В интернет вы можете найти несколько вариантов кодов ( 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 3

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

    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, на созданный нами.

    Читайте также:  Установка алмазного бурения stihl

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

    Но сразу ждать 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++. В этом документе, между открывающим тегом , и закрывающим тегом ввести вот такой код:

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

    источник

    Иконка сайта Favicon в Joomla

    Содержание

    Что такое Favicon?

    Favicon (фавикон, сокр. от Favorite Icon, также: Подробнее

    Как создать Favicon?

    Создать фавикон можно с помощью любого графического редактора (десктопных и браузерных, в том числе Adobe Photosop и Paint), однако не все позволяют сохранять картинки в формате ICO.

    Если редактор не позволяет сохранить фавикон в ICO, то создайте картинку размером 16×16 px, после чего конвертируйте её в любом подходящем веб-сервисе.

    Мы рекомендуем воспользовать онлайн-генератором favicon.cc, в котором можно:

    • рисовать Favicon нужного размера прямо в браузере
    • импортировать картинки любого размера и формата для преобразорвания в фавиконку
    • редактировать существующие фавиконки
    • выбирать и скачивать уже готовые фавиконки

    Как поменять Favicon в Joomla?

    Все сайты на Joomla «из коробки» имеют стандартную фавиконку в виде логотипа Joomla:

    Для её замены разместите свою фавиконку с названием favicon.ico в корневой папке шаблона /templates/[шаблон]/ через Интерфейс для управления контентом и функционалом сайта. Имеется в любой CMS, в том числе и в Joomla.

    » >панель управления сайтом, по FTP или через файловый менеджер.

    Рассмотрим, как поменять Favicon в Joomla через панель управления:

    1. перейдите в РасширенияШаблоныШаблоны
    2. перейдите в Настройки
    3. в текстовое поле Допустимые форматы изображений допишите ico
    4. нажмите Сохранить и закрыть
    5. перейдите в Параметры нужного шаблона
    6. кликните по названию файла favicon.ico
    7. нажмите Удалить файл
    8. нажмите Новый файл
    9. во всплывающем окне нажмите Выберите файл и выберите свой файл favicon.ico для загрузки
    10. нажмите Загрузить

    Что делать, если Favicon не меняется?

    Если после замены файла браузер продолжает отображать прежний фавикон, то это не значит, что замена файл на сайте не обновился: браузеры кэшируют файлы Favicon и даже обновление страницы по клавише F5 не поможет в этом случае. Для обновления иконки осуществите следующие действия в зависимости от браузера:

    • Firefox или Safari: Shift + F5 или Ctrl + Shift + R
    • Internet Explorer: Ctrl + F5
    • Opera: очистите кэш браузера
    • Chrome: Shift + F5

    Если это не поможет, то попробуйте удалить все временные файлы браузера в настройках и обновить страницу.

    Всё о Joomla в одном месте

    Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

    Joomla!® является торговой маркой компании Open Source Matters inc в США и др. странах. Название Joomla! и его вариации используются в рамках ограниченной лицензии, определённой компанией Open Source Matters. Проект joomla.center не относится к компании Open Source Matters или проекту Joomla! Точки зрения представленные на данном сайте не являются официальными точками зрения Joomla Project или Open Source Matters. Торговая марка Joomla® и логотип используются в рамках ограниченной лицензии, предоставленной Open Source Matters.

    © Александр Куртеев. Центр обучения Joomla.
    ОГРНИП 307434525600161, ИНН 434540800305
    Все права защищены. © 2008 — 2020

    источник