• Главная
ГлавнаяХромВ хроме не отображается фавикон

Favicon сегодня: форматы, поддержка, автоматизация. В хроме не отображается фавикон


html - Favicon не отображается в Google Chrome

1) Очистите кеш. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 И протестируйте другой браузер, скажем, сафари. Как вы импортировали значок?

2) Как его добавить:

Нормальный значок:

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

Значок PNG/GIF:

<link rel="icon" type="image/gif" href="favicon.gif" /> <link rel="icon" type="image/png" href="favicon.png" />

в теге <head>.

3) Еще одна проблема может заключаться в том, что хром не может отображать favicons, , если он локальный (не загружается на веб-сервер). Только если файл/значок будет в каталоге загрузки, хром может загрузить эти данные - более подробную информацию об этом можно найти здесь: local (файл://) веб-сайт favicon работает в Firefox, а не в Chrome или Safari - почему?

4) Попробуйте переименовать его с favicon.{whatever} на {yourfaviconname}.{whatever}, но я бы предложил вам по-прежнему иметь нормальный значок. Это решило мою проблему в IE.

5) Найдено еще одно решение для этого, которое отлично работает! Я просто добавил свой значок в качестве кодированного изображения Base64 непосредственно внутри тега:

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDh5r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGh5r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGh5r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGh5r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8Ah5r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMh5r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBh5r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZh5r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREh3mgABlosQAfivY0h5r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAh5r2Sx+K9vUfivb/h5r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAh5r2AB+K9mYfivb9h5r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEh5r2/x+K9v8fivbCh5r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAh5r2lx+K9v8fivb/h5r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAh5r2AB+K9gAfivZLh5r2/R+K9osfivYBh5PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAh5r2AB+K9gAfivYsh5r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAh5r2AB+K9gAfivYAh5r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAh5r2AB+K9gAfivYAh5r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAh5r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />

Здесь используется следующая страница: http://www.motobit.com/util/base64-decoder-encoder.asp

6) Я действительно могу предложить вам эту страницу: http://www.favicon-generator.org/ для создания всех типов значков, которые вам нужны.

источник поделиться

qaru.site

Почему не отображается иконка сайта favicon?

У Вас не отображается иконка сайта favicon.ico в браузере или в поиске? Давайте рассмотрим возможные причины.

Для начала хочу напомнить про статью Как создать favicon иконку сайта? Там Вы гарантированно сможете создать валидную иконку для сайта.

Вспомним как установить на сайт иконку сайта favicon

Иконка сайта подключается в head перед закрывающим тегом. <html> <head> <title>Где подключить иконку сайта favicon?</title>

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

</head> <body></body> </html>

Рассмотрим три вида подключения к сайту иконки favicon<!-- Если favicon лежит в корне сайта. РЕКОМЕНДУЕМЫЙ вариант. --> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<!-- Если favicon лежит в корне сайта. Полный адрес к иконке. --> <link rel="icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon">

<!-- Если favicon лежит в папке Выше. НЕ РЕКОМЕНДУЕМЫЙ вариант. --> <link rel="icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Почему написал у третьего варианта не рекомендуемый? Потому что, например, Яндекс может НЕ отображать Вашу иконку сайта в выдаче по запросу, если она находится в каком-либо подкаталоге, а не в корне. Личное наблюдение

Как индексируется иконка сайта favicon? Почему не отображается сразу после изменений?

Про индексацию иконки сайта favicon хотел бы предупредить, что сайт сначала должен проиндексировать специальным поисковым роботом, прежде чем иконка будет отображаться рядом с сайтом по запросу в поиске. Поэтому иногда следует просто подождать. По времени это от недели до двух месяцев (для молодых сайтов - младше года). Если всё сделано правильно, то просто запасаемся терпением! Как поступает Гугл не скажу, но заметил, что он показывает иконки не на всех сайтах.

Вы все сделали правильно, но фавикон не хочет отображаться?

Пожалуйста, проверьте, правильно ли создан сам файл и верно ли прописаны пути к нему в теге head в записи про icon (пример записей Выше). Другими словами, узнаем, как его видят поисковики и различные интернет-сервисы, в том числе и браузеры.

Я обновил запись c favicon (иконкой сайта), но у меня по-прежнему ничего не отображается. Почему?

Бывает так, что в Браузере после изменений не отображается favicon. Попробуйте почистить кэш в вашем браузере.

Проверка Favicon в поисковых системах Яндекс и Google

Для того, чтобы узнать видят ли иконку любого сайта поисковики, даже не обязательно открывать сам сайт. Для этого достаточно ввести следующий адрес в браузер:1) Как видит Яндекс — http://favicon.yandex.net/favicon/www.yandex.ru В записи меняем www.yandex.ru на свой домен.2) Как видит Google — http://www.google.com/s2/favicons?domain=www.google.com В записи меняем www.google.com на свой домен. (если у Вас отображается иконка Земного шара, то не переживайте, так тоже бывает с нормально сделанными сайтами)

tradebenefit.ru

Почему не отображается favicon | Как проверить

автор: admin 15.05.2016

Создание блога

Всем привет! Добро пожаловать на наш блог Thebizfromscratch, а на связи, как всегда, мы – Андрей и Даша.  Как ваши дела, уважаемые читатели? Как и обещали, в этой статье мы займёмся серьёзными делами, а именно продолжим усовершенствование блога и тема сегодняшней статьи – Почему не отображается favicon (фавикон) и как это проверить.

     С открытием дачно/деревенского сезона времени на блог становится всё меньше: стабильно, каждую пятницу по воскресенье мы уезжаем из города и погружаемся в мир грядок и сельской жизни…но, будем стараться это исправлять!

     Изначально, иконку для блога мы настроили в нашей теме WordPress. Сами создали в редакторе картиночку-логотип и загрузили её на блог при помощи раздела «Свойства сайта». Стали ждать первой индексации, чтобы можно было увидеть наши старания. Первым наш блог проиндексировал google, но у этого поисковика не отображается favicon при выдаче запросов. Ладно, стали выжидать, когда к нам заглянет yandex и произошло это примерно через месяц после нашего старта. В результате, после того, как мы ввели в поиск Яндекса один из запросов блога thebizfromscratch, нас ждала грусть/тоска/разочарование, т.к. наша иконка не отображалась перед описанием сайта.

     Что же делать? Прокопались пару-тройку часов в интернете, чтобы изучить данную проблему поподробнее. Поняли, что мы такие не одни и приступили к устранению неудачи. Дело в том, что все, кто настраивает свой логотип при помощи темы, имеет шанс столкнуться с такой же ситуацией – не отображается favicon перед описанием блога в яндексе. Единственным верным решением является небольшое изменение кода, установленной темы. Не стоит пугаться, никаких глобальных навыков программирования вообще не требуется, честно говоря даже любых навыков не требуется. Нет, конечно, если ты матёрый программист – это только плюс, но если ты – «чайник» как и мы, то смотри!

Что надо сделать!

  1. Создаём иконку размером 16×16 или 32×32 пикселя с разрешением ico. Для этого удобнее воспользоваться специальным сервисом: favicon.ru, где можно с нуля нарисовать логотип или загрузить туда уже свой готовый, для того, чтобы изменить его размер и разрешение. В результате у тебя должна быть картиночка вот с таким названием — favicon.ico.
  2. Размещаем, полученную картиночку в корневую папку сайта.
  3. Заходим в админку WordPress, находим раздел «Внешний вид», далее «Редактор». С правой стороны выбираем вкладку «Заголовок» (или header.php).
  4. После открывающего тега <head> (а где он смотри на рисунке ниже) прописываем или вставляем вот эту строчку и обновляем  файл:
<link rel="icon" href="http://ваш сайт/favicon.ico" type="image/x-icon" />

 Где http://ваш сайт /favicon.ico – это путь до вашего фавикона. Только не забудьте вместо «ваш сайт» на самом деле указать ваш сайт.ф4

  1. Ждём до следующего посещения роботами сайта и смотрим на результат. У нас это произошло спустя 2-3 дня. Проблема была решена. Ура.

Как проверить отображается ли favicon?

  • Для яндекса вводим в адресную строку это:

http://favicon.yandex.net/favicon/свой домен

http://www.google.com/s2/favicons?domain=свой домен

И на этом мы заканчиваем. Надеемся, что данная статья будет для Вас полезной и теперь вы будете знать Почему не отображается favicon (фавикон) и как это проверить. Если появятся вопросы – обязательно задавай их в комментариях, постараемся помочь. Удачи! И до новых постов.

С уважением, Андрей и Даша.

thebizfromscratch.ru

html - Favicon не отображается в Google Chrome css google-chrome

1) Очистите кеш. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 И проверьте другой браузер, скажем, сафари. Как вы импортировали значок?

2) Как вы должны добавить его:

Нормальный значок:

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

Значок PNG / GIF:

<link rel="icon" type="image/gif" href="favicon.gif" /> <link rel="icon" type="image/png" href="favicon.png" />

в <head> .

3) Еще одна проблема заключается в том, что хром не может отображать значки, если он локальный (не загружается на веб-сервер). Только если файл / значок будет в каталоге загрузки, хром может загружать эти данные - более подробную информацию об этом можно найти здесь: local (file: //) веб-сайт favicon работает в Firefox, а не в Chrome или Safari - почему?

4) Попробуйте переименовать его из favicon.{whatever} {yourfaviconname}.{whatever} favicon.{whatever} to {yourfaviconname}.{whatever} но я предлагаю вам по-прежнему иметь нормальный значок. Это решило мою проблему в IE.

5) Нашел еще одно решение для этого, которое отлично работает! Я просто добавил свой значок в качестве кодированного изображения Base64 непосредственно внутри тега:

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDh5r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGh5r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGh5r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGh5r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8Ah5r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMh5r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBh5r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZh5r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREh3mgABlosQAfivY0h5r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAh5r2Sx+K9vUfivb/h5r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAh5r2AB+K9mYfivb9h5r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEh5r2/x+K9v8fivbCh5r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAh5r2lx+K9v8fivb/h5r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAh5r2AB+K9gAfivZLh5r2/R+K9osfivYBh5PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAh5r2AB+K9gAfivYsh5r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAh5r2AB+K9gAfivYAh5r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAh5r2AB+K9gAfivYAh5r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAh5r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />

Здесь была использована эта страница: http://www.motobit.com/util/base64-decoder-encoder.asp

6) Я действительно могу предложить вам эту страницу: http://www.favicon-generator.org/ для создания всех типов значков, которые вам нужны.

code-examples.net

форматы, поддержка, автоматизация / Хабр

На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.

В каком формате должен быть фавикон?

Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.

Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes
Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.<link rel="icon"> <link rel="icon" any">

Пора ли отправлять ICO на свалку?

Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.
Windows
Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg"> Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png"> Можно указать цвет фона плитки:<meta name="msapplication-TileColor" content="#009900"> Можно указать имя закрепленного сайта:<meta name="application-name" content="Rick and Morty"> Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title"> Можно даже определить адрес документа:<meta name="msapplication-starturl" content="./"> И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.

Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

<meta name="msapplication-config" content="browserconfig.xml"> browserconfig.xml<?xml version=”1.0" encoding=”utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/img/favicons/mstile-70x70.png"/> <square150x150logo src="/img/favicons/mstile-150x150.png"/> <square310x310logo src="/img/favicons/mstile-310x310.png"/> <wide310x150logo src="/img/favicons/mstile-310x150.png"/> <TileColor>#000000</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig> square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310x150 исходное изображение имеет размер 558x270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:

<tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image src="images/image1.png" alt="alt text"/> <text>Text Field 1</text> </binding> </visual> </tile> То, что написано в кавычках в атрибуте template  —  название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff"> Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.

Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="apple-touch-icon-180x180.png"> Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle"> Кстати, можно даже установить стиль строки состояния для веб-приложения:<meta name="apple-mobile-web-app-status-bar-style" content="black"> Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" } Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE"> Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

<link rel="manifest" href="manifest.json"> В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.

Автоматизация

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

habr.com

firefox - favicon не отображается в Firefox

Во-первых, убедитесь, что у вас нет "обычной" проблемы с кешем, напрямую загружая URL-адрес favicon (помещая его в строку URL-адреса браузера) и принудительно обновляя его. Если это выполнит эту работу, нет необходимости в сложном решении ниже.

Моя первоначальная проблема не может быть проблемой кэша: Во-первых, я очистил кеш, во-вторых, как я уже упоминал выше, Я уже успешно загрузил файл значков в Firefox через его URL-адрес http://website/favicon.ico

Итак, я сделаю (сделал), чтобы получить правильный значок в браузере при загрузке напрямую! Но у меня все еще был (был) неправильный значок, отображаемый как "значок". Загрузка файла значка напрямую (или была) независимая на дисплее в фактическом местоположении favicon (за исключением того, когда он загружен в первый раз, конечно).

Однако, если у вас только проблема с кешем и принудительное обновление для вас, чем этот вопрос/проблема НЕ принадлежит вам! И ваш ответ не является ответом на эту проблему.

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

Примечание.. Вы можете полностью исключить эту проблему, используя URL-адрес кэширования, как это делает StackOverflow, их URL-адрес для значков заканчивается на .../img/favicon.ico?v=4f32ecc8f43d.

Если нормальные меры очистки кеша не срабатывают (как и для меня), здесь дается ответ: "Очистка всех значков от Firefox 3 Cache [How-To ]" - и вот ссылка на версию archive.org(возможно, медленнее, но она не исчезнет).

Шаги с этой страницы, воспроизведенные здесь:

  • Установите дополнительный SQLite-менеджер Firefox
  • Запустите его из Tools → SQLite Manager
  • Выберите пункт меню "База данных" (вверху слева) и выберите "Подключить базу данных", введите %APPDATA%\Mozilla\Firefox
  • Откройте папку Profiles и перейдите к профилю, который вы используете.
  • Выберите places.sqlite в качестве файла базы данных для редактирования
  • Либо выберите таблицу moz_favicons. В контекстном меню контекстного меню используйте "Пустая таблица", не использовать таблицу "Отбрасывать" (таблица должна быть там) или используйте контекстное меню правой кнопки мыши над данных и выберите "Удалить" только для одной записи, которую вы хотите удалить (см. снимок экрана ниже).

снимок экрана с удалением записи с использованием диспетчера SQLite

Я начал подозревать, что Firefox кэширует favicons отдельно от всего остального - это было единственное объяснение, соответствующее наблюдаемому поведению. Таким образом, я искал Google для подтверждения и нашел вышеуказанный URL. Затем я попробую очистить этот дополнительный кеш и посмотреть, что произойдет.

UPDATE - SOLVED:. После удаления кеша favicon с помощью "SQLite Manager" добавление Firefox работает как должно.

Итак, секрет был EXTRA (sqlite) CACHE FOR FAVICONS в Firefox, КОТОРЫЙ НЕ УКАЗАН РЕГУЛЯРНОЙ командой "Clear Cache".

Обновление марта 2017 года: я проверил это дополнение Firefox, а также автономное приложение, предложенное в этом ответе ниже, и оба выполняют эту работу. Надстройка SQLite Manager в последний раз обновлялась ~ 2 года назад в соответствии с ее страницей проекта Github, но она по-прежнему делает то, что ей нужно в этом контексте, Есть обновления, доступные от людей, которые разветкили проект, но это только в сторону.

qaru.site

favicon - кинул в корень, все равно не работает [Архив]

Просмотр полной версии : favicon - кинул в корень, все равно не работает

olds1995

09.06.2011, 23:32

где его правильно разместить чтоб поменялся?

Seredniy

09.06.2011, 23:32

Телепаты на канарах. ЦМС, самопис?

Да в корне, попробуйте кэш очистить, или через другой браузер зайти.

Антон Белов

10.06.2011, 03:23

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

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

в head

melkozaur

10.06.2011, 05:16

Каким браузером смотрите?

melkozaur добавил 10.06.2011 в 06:17На страницах должен быть прописан код вывода фавиконаНе обязательно, если лежит в корне - зачем прописывать?

olds1995

10.06.2011, 08:31

цмс джумла, браузер хром

ManUnitedDnepr

10.06.2011, 08:57

Хром не сразу фавикон обнаруживает, не знаю почему. Обычно на следующий день фавикон появляется и в хроме. А Мазилой смотрели? В Мазиле есть? Если есть, то и в хроме появится.

Так везде же написано, что появится через 24 часа. Хотя в другом браузере должен появиться сразу. И да, можно ничего не прописывать. Яндекс все сам найдет

Обычно в joomla фавикон кидать надо в папку с шаблоном сайта, потому как прописывается он по умолчанию по следующему пути <link href="/templates/ваша_тема/favicon.ico" rel="shortcut icon" type="image/x-icon" />

где его правильно разместить чтоб поменялся?

Где будет размещен файл - не принципиально.Важно в код шаблона между тегами <head> и </head> добавить вывод вашего фавикона в браузер<link rel="shortcut icon" type="image/x-icon" href="тут пишем путь до файла относительно корневой папки сайта" />

Психиатр

10.06.2011, 11:59

Важно в код шаблона между тегами и пишем путь до файла относительно корневой папки сайта" />

Не важно. Кидать фавикон в корневой каталог и всё. Через какое то время он появляется в браузерах. Тут главное терпение.

Алексей Сироткин

10.06.2011, 12:48

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

roman8833

27.07.2011, 10:32

Здравствуйте, а кто нибудь знает может ли появиться фавикон если его не ставить, у меня как раз такая ситуация не могу понять почему появился фавикон на внутренних страницах сайта в выдаче яндекса на разных запросах у одной и той же страницы его то нет то есть, причем в коде его нет, ума не приложу, что делать, может есть у кого какие мысли?:gm:

dead4life

27.07.2011, 19:47

Здравствуйте, а кто нибудь знает может ли появиться фавикон если его не ставить, у меня как раз такая ситуация не могу понять почему появился фавикон на внутренних страницах сайта в выдаче яндекса на разных запросах у одной и той же страницы его то нет то есть, причем в коде его нет, ума не приложу, что делать, может есть у кого какие мысли? да тут на днях вообще яшка над фавами поприкалывался))) так что вроде все норм

dead4life добавил 27.07.2011 в 20:53и по существу, вообще, конечно, желательно прописывать путь, потому что действительно бывает, что в шаблоне прописан путь до своего фава, поэтому все-таки лучше прописаль ссылочку, для уверенности, так сказать, хотя, обычно нужно залить в корень, заменить стандартную (если таковая имеет место быть), оно само собой потом придет.

Кидайте и в шаблон, и в корень - не ошибетесь.

Кидайте в корень и путь "/favicon.ico"

sabotage

28.07.2011, 02:13

Хром не сразу фавикон обнаруживает, не знаю почему. Обычно на следующий день фавикон появляется и в хроме. А Мазилой смотрели? В Мазиле есть? Если есть, то и в хроме появится.

Так везде же написано, что появится через 24 часа. Хотя в другом браузере должен появиться сразу. И да, можно ничего не прописывать. Яндекс все сам найдет

Кидать фавикон в корневой каталог и всё. Через какое то время он появляется в браузерах. Тут главное терпение.

Кидайте и в шаблон, и в корень - не ошибетесь.

Веб-мастера сплошь и рядом :bl:

1. Положить фавиконку куда_угодо, (как правило в корень, бродилки и без прописанного пути такой вариант простукивают)2. Прописать в шаблоне:

<link rel="icon" href="Рекомендую_полный_путь/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="Рекомендую_полный_путь/favicon.ico" type="image/x-icon" />

Все. Ничего ждать не нужно, если фавиконка открывается в бродилке по полному пути - она будет показываться. Моментально. Без ожиданий.

vBulletin® v3.8.6, Copyright ©2000-2018, Jelsoft Enterprises Ltd. Перевод: zCarot

searchengines.guru