Как настроить отображение сайта в экспресс-панели браузера?

Question

[MrOnatsky]

Подскажите, как изменить отображение сайта в экспресс-панели? Типа залепить туда картинку какую-нибудь. Как это дело провернуть? В какую сторону гуглить? Заранее спасибо!

Вот пример:


P.S. Пробовал большие иконки ставить, но не помогло.

<link rel="icon" type="image/png" href="/images/favicon/speed-dial-256x160.png" sizes="256x160">

Comments

[Сергей delphinpro]

Ты упорный =)
Возможность настроить отображение своего сайта в экспресс панели оперы была в движке Presto. С переходом на хромиум они много чего похерили, в том числе и эту фишку. Даже инфу с сайта убрали, как это делалось, сейчас там 404.
Сейчас у них по моим ощущениям просто берется большая картинка со страницы, либо логотип, если он нормального размера, либо скриншот страницы, либо просто карточка с доменом.
А в других браузерах я про подобную фичу вообще не слышал.

[alvvi]

Сергей: ну на хром есть всякие расширения, но годных, к сожалению, действительно нет

[Сергей delphinpro]

Илья Ростопка: речь не о расширениях, насколько я понял.

[MrOnatsky]

Сергей: Да вот и правда, инфы практически никакой не нахожу, ни где-либо в интернете, ни где-либо на официальном сайте. Нужно будет все же еще порыскать в поисках инфы на эту тему. (^_^)

[Сергей delphinpro]

MrOnatsky: Бесполезно =)
Фишки нет. А если вернут в вебкитовской опере (или может в вивальди быстрее подсуетятся), то обязательно скажут в обзоре на хабре.

Answer 1

[Артур Карапетян]

<meta content='Хабрахабр' name='apple-mobile-web-app-title'>

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/images/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/favicons/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png" sizes="16x16" />
<meta name="application-name" content="Хабрахабр"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />

И хабр: тык

Comments

[MrOnatsky]

А причем тут иконки для apple-устройств?
И картинки сами по себе не квадратный, а прямоугольные (широкие).

[MrOnatsky]

А вот за хабр тык спасибо) Ща изучим, не сразу заметил)

[Артур Карапетян]

MrOnatsky: И еще один способ: Заходите на сайт, который нормально отображается в экспресс панели, и смотрите с помощью DevTools что есть в head

[MrOnatsky]

Артур: Позднее просмотрел я статью которую вы прислали, и там нету ни слова про экспресс панель, оперу и т.т.. Все что там было указано уже есть у меня в коде и так.
P.S. Проверял я хеды сайтов, и хабрахабра в том числе - нечего даже намекающего не нашел..

А вот собственно код который имеется у меня на данный момент:

<link rel="icon" type="image/png" href="/images/favicon/speed-dial-188x120.png" sizes="188x120">
<link rel="icon" type="image/png" href="/images/favicon/speed-dial-256x160.png" sizes="256x160">

<!-- Favicon for Android -->
<link rel="icon" type="image/png" sizes="16x16"   href="/images/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32"   href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"   href="/images/favicon/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/favicon-192x192.png">
<link rel="manifest" href="/images/favicon/manifest.json">

<!-- Favicon for Apple -->
<meta name='apple-mobile-web-app-title' content='Fastmeet' >
<link rel="apple-touch-icon" sizes="57x57"   href="/images/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"   href="/images/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"   href="/images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"   href="/images/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon-180x180.png">

<!-- Favicon for Windows -->
<meta name="application-name" content="Название">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">