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

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

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

Загрузка
  1. infis

    infis Местный

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

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

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия 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.06.2014
    patrig, infis и Mirovinger нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия 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.06.2014
    sTepa4ka, patrig, infis и ещё 1-му нравится это.
  4. infis

    infis Местный

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

    Skaiman Местный

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

    sTepa4ka Новичок

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

    aligon7 Местный

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

    aligon7 Местный

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

    sag-sag Местный

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

    aligon7 Местный

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

    infis Местный

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

    aligon7 Местный

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

    Oleg-2012 Местный

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

    aligon7 Местный

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

    infis Местный

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

    Demon NFS Новичок

    Регистрация:
    05.12.18
    Сообщения:
    2
    Симпатии:
    0
    Версия XF:
    1.1.3
    Сделал посредством генератора много факиконок, но для ярлыка на рабочий стол 48х48 отображается некоректно. как исправить?
    прописывал
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
     
  17. Demon NFS

    Demon NFS Новичок

    Регистрация:
    05.12.18
    Сообщения:
    2
    Симпатии:
    0
    Версия XF:
    1.1.3
    Отображается на ярлыке 16х16
     
  18. svs18

    svs18 Новичок

    Регистрация:
    25.02.19
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    2.0.5
    Добрый день знатоки.я новичёк и хотел спросить у знающих людей подсказки.Вообщем нужно установить фавикон вот картинка внизу .если можно то поподробней пожалуйста.если перейти по гугловскому сервису который показывает фавиконы http://www.google.com/s2/favicons?domain=192.168.8.1/html/home.html то там есть какая то иконка но ее не видно на вкладке.помогите люди добрые.Спасибо за понимание
     

    Вложения:

    • 02.jpg
      02.jpg
      Размер файла:
      93,9 КБ
      Просмотров:
      2

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