1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Как установить favicon.ico?

Тема в разделе "Основные вопросы по XenForo", создана пользователем Александр, 23 ноя 2010.

Загрузка
  1. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    Разные устройства тянут свой формат, если он имеется. Поэтому одним устройством считывается только нужная ему иконка. Ну а увеличение хидера на килобайт, думаю, даже на очень медленных интернетах уже не так существенно по сравнению с объемом самой страницы. Естественно, что все картинки подряд одно устройство не будет загружать, поэтому общий объем иконок уже не важен.

    Ну да ладно. Лично я убедился, что иконка моего сайта на андроиде выглядит лучше после внесения нужного кода. Моим пользователям это понравилось. Конечно же, можно и дальше было пользоваться только тремя иконками (ico, gif, png) размером 16х16, но мне этого мало :)
     
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Небольшой мануальчик использования Real Favicon Generator.

    Для начала надо нарисовать заготовку для иконки. Здесь уж ни куда не денешься, Если не умеете, просите кого нить. В фотошопе делаем картинку 260х260 пикселей в формате PNG:

    favicon_xfr.png

    Заходим на сайт генератора и жмем "Select your Favicon picture" и выбираем Вашу заготовку.
    Image 1.png
    На следующей странице будет показано как Ваша иконка будет отображаться на девайсах iPhone, iPad, Android и плитка Windows 8 app. Можно оставить как есть, можно поменять цвет фона плитки или если иконка прозрачная, фон для девайса. В "Favicon Generator Options" --> "Path" по умолчанию директория хранения иконок, будет корневая папка, можно указать свою. Будем следовать стандарту XenForo и укажем:
    Код:
    {xen:property imagePath}/xenforo/
    "Compression" - сжатие изображения, не трогайте и "Scaling algorithm" фильтр сжатия, при выборе Compression. "App name" - имена иконок, можно задать свои, я не трогал.
    Жмем "Generate your Favicons and HTML code" - генерируем свою иконку и получаем код:
    Код:
    <link rel="shortcut icon" href="{xen:property imagePath}/xenforo/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="{xen:property imagePath}/xenforo/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="114x114" href="{xen:property imagePath}/xenforo/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="{xen:property imagePath}/xenforo/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="{xen:property imagePath}/xenforo/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="60x60" href="{xen:property imagePath}/xenforo/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{xen:property imagePath}/xenforo/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{xen:property imagePath}/xenforo/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{xen:property imagePath}/xenforo/apple-touch-icon-152x152.png">
    <link rel="icon" type="image/png" href="{xen:property imagePath}/xenforo/favicon-196x196.png" sizes="196x196">
    <link rel="icon" type="image/png" href="{xen:property imagePath}/xenforo/favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="{xen:property imagePath}/xenforo/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="{xen:property imagePath}/xenforo/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="{xen:property imagePath}/xenforo/favicon-32x32.png" sizes="32x32">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="{xen:property imagePath}/xenforo/mstile-144x144.png">
    <meta name="msapplication-square70x70logo" content="{xen:property imagePath}/xenforo/mstile-70x70.png">
    <meta name="msapplication-square150x150logo" content="{xen:property imagePath}/xenforo/mstile-150x150.png">
    <meta name="msapplication-square310x310logo" content="{xen:property imagePath}/xenforo/mstile-310x310.png">
    <meta name="msapplication-wide310x150logo" content="{xen:property imagePath}/xenforo/mstile-310x150.png
    А из первого пункта "Download your package: Favicon package" скачиваем пакет иконок.
    Заливаем картинки в папку xenforo Вашего стиля. В шаблоне PAGE_CONTAINER добавляем HTML код для иконок. В пункте 4 "check your favicon", можете проверить совместимость установленных Вами иконок с разными устройствами и ОС.
     
    Последнее редактирование: 27 июн 2014
    patrig, infis и Mirovinger нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Протестировал установку. Выдало два недочета.
    1. Надо убрать из PAGE_CONTAINER строчку:
    Код:
    <link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
    Я как бы писал, что надо после нее вставлять, но это ссылка на стандартный логотип XenForo, который лежит в папке. Короче, надо код вставлять не после первого <link ... />, как писалось выше, а вместо указанного кода.
    2. Опять проявляет себя себя Internet Explorer, но уже новый 11, ему надо видите ли свой файл XML, с указанными картинками. Создаем его:
    Код:
    <?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
      <tile>
      <square70x70logo src="http://ВАШ ДОМЕН/styles/ВАШ СТИЛЬ/xenforo/mstile-70x70.png"/>
      <square150x150logo src="http://ВАШ ДОМЕН/styles/ВАШ СТИЛЬ/xenforo/mstile-150x150.png"/>
      <wide310x150logo src="http://ВАШ ДОМЕН/styles/ВАШ СТИЛЬ/xenforo/mstile-310x150.png"/>
      <square310x310logo src="http://ВАШ ДОМЕН/styles/ВАШ СТИЛЬ/xenforo/mstile-310x310.png"/>
      <TileColor>#009900</TileColor>
      </tile>
      </msapplication>
    </browserconfig>
    Надо указывать полные ссылки, ссылки для ксена не пойдут. Называем его browserconfig.xml и закидываем в корневую директорию. После этого тест прошел, все поля стали зелеными :).
    Правда, сознаюсь :whistling:, картинки закинул в папку xenforo, но в папке favicons.
    screen.png
     
    Последнее редактирование: 27 июн 2014
    sTepa4ka, patrig, infis и ещё 1-му нравится это.
  4. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    Вот видите, все таки понравился сервис :) Попутно и ошибки нашли.
     
  5. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    :) Мне все интересно, я как говориться за любой кипишь;)
     
  6. sTepa4ka

    sTepa4ka Новичок

    Регистрация:
    10.09.13
    Сообщения:
    9
    Симпатии:
    0
    Версия XF:
    1.3.5
    Нравится читать Ваши мануалы и статьи, спасибо!) только у меня не все "зелененькое вышло") Но самая важная часть работает)
     
  7. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    Не показывает уже неделю ато и больше, залит везде и вкорень и в шаблон, но нет, не показывает.
    favicon.ico это формат, что делать?
     
  8. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    что не кто не поможет
     
  9. sag-sag

    sag-sag Активный пользователь

    Регистрация:
    25.09.13
    Сообщения:
    69
    Симпатии:
    8
    Версия XF:
    1.5.5
    Браузер почистите и покажет)).
     
  10. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
  11. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    У Вас, похоже, отсутствует favicon. Во всяком случае по прямой ссылке site/favicon.ico не загружается, выдает 404 ошибку. Так что проверяйте, куда вы подевали иконку и есть ли права на ее скачивание.
     
  12. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    Скажите, а каких правах идёт речь, иконка в корне, но не как не показывается.
    Будим лечить
    Загружается но не показывает
     
    Последнее редактирование: 25 фев 2016
  13. Oleg-2012

    Oleg-2012 Местный

    Регистрация:
    21.04.12
    Сообщения:
    646
    Симпатии:
    267
    В шаблоне PAGE_CONTAINER после первого <head>, внесите следующее:
    Код:
    <link rel="shortcut icon" href="http://resklad.ru/favicon.ico" type="image/x-icon">
     
    aligon7 нравится это.
  14. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    всё ровно зараза не показывает, первый раз такое
     
  15. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    У него проблема не в том, что браузер не знает, что есть иконка. А в том, что вместо иконки сервер отдает 404-ю ошибку. То есть сервер не видит файл иконки.
    --- добавлено : 26 фев 2016 в 00:42 ---
    Смотрите логи сервера. Там обычно сервер указывает полный путь файла, который найти не может.
    Ну и, возможно, что-то перемудрили с правилами веб-сервера (rewrite).
     
    Последнее редактирование модератором: 4 мар 2016
    Oleg-2012, aligon7 и Mirovinger нравится это.

Поделиться этой страницей