Как добавить значок вкладки браузера (favicon) для веб-сайта?

Я работаю над веб-сайтом, и я хотел бы добавить небольшой значок на вкладку браузера.

Как я могу сделать это в HTML и где в коде мне нужно будет разместить его (например, заголовок)? У меня есть логотип .png, который я бы хотел преобразовать в значок.

Связано: HTML-образ на вкладке браузера.

Ответ 1

На самом деле есть два способа добавления значка на веб-сайт.

`<link rel="icon">`

Просто добавьте следующий код в элемент <head>:

<link rel="icon" href="http://example.com/favicon.png">

favicons PNG поддерживаются большинством браузеров, за исключением IE <= 10. Для обратной совместимости вы можете использовать значки ICO.

Обратите внимание, что вам больше не нужно предшествовать icon в rel атрибуте shortcut. Из Типы ссылок MDN:

Тип ссылки shortcut часто встречается перед icon, но этот тип ссылки является несоответствующим, игнорируется и веб-авторы больше не должны его использовать.

`favicon.ico` в корневом каталоге

От другого SO-ответа (@mercator):

Все современные браузеры (протестированные с помощью Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать favicon.ico, если вы не указали значок ярлыка через <link>.

Итак, все, что вам нужно сделать, это сделать запрос /favicon.ico на ваш сайт, чтобы вернуть ваш значок. Этот вариант, к сожалению, не позволяет вам использовать значок PNG.

См. также:

favicon.png vs favicon.ico - почему я должен использовать PNG вместо ICO?

Ответ 2

Используйте инструмент для преобразования png в файл ico. Вы можете искать "генератор favicon", и вы можете найти множество онлайн-инструментов.

Поместите ico-адрес в head с помощью link -tag:

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

Ответ 3

Лучший, который я нашел, http://www.favicomatic.com/ Я говорю лучше, потому что он дал мне самый четкий значок и не требовал редактирования после их преобразования. Он будет генерировать favicons в 16x16 и 32x32 и процитировать их "Каждый проклятый размер, сэр!" Кроме того, их сайт выглядит классно и прост в использовании.

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

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Я просмотрел первые 20 или около того результатов Google, и это было далеко лучшее.

Ответ 4

Я успешно сделал это для своего сайта.

Только исключение, браузер SeaMonkey требует, чтобы в ваш <head> был добавлен HTML-код; в то время как другие браузеры по-прежнему будут отображать favicon.ico без какой-либо вставки HTML. Кроме того, любой браузер, отличный от IE, может использовать другие типы изображений, а не только формат .ico. Надеюсь, это поможет.

Ответ 5

Существует несколько различных значков и даже заставки, которые вы можете установить для различных устройств. Этот ответ объясняет, как поддержать их всех.

Вот некоторые фрагменты, которые я использовал с соответствующими ссылками, где я собрал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всеми этими встроенными (включая файлы с образцами изображений).

Добавьте в свой html-заголовок следующую надпись. Заключенные разделы полностью необязательны. В то время как разделы без комментирования рекомендуются для охвата всех иконок. Не бойтесь, большинство, если это комментарии, чтобы помочь вам.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Мой файл browserconfig.xml. Полное объяснение выше.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Мой файл manifest.json. Полное объяснение выше.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решили поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатег):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Всего накладных расходов

Если вы выберете комментарии, содержащие 3 Кбайт дополнительного HTML, если вы не поддерживаете всплывающие экраны размером 1,5 КБ. Если вы используете сжатие GZIP в своем HTML-контенте, что каждый должен делать в наши дни, это оставляет вам около 634 байтов накладных расходов для каждого запроса для поддержки всех платформ или 446 байтов без всплывающих окон. Я лично считаю, что стоит поддерживать IOS, Android и Windows-устройства, но по своему выбору я просто даю варианты!

Боковое примечание о текущей веб-иконке/всплывающем экране/ситуации настроек

Эта ситуация с конкретными значками поставщика, заставками и специальными тегами для управления веб-браузером или закрепленными значками смехотворна. В идеальном мире мы все будем использовать файл favicon.svg, который может выглядеть хорошо на любом уровне и может быть помещен в корень страницы. Только FireFox поддерживает это на момент написания статьи (см. CanIUse.com).

Однако в наши дни значки не являются единственными настройками, есть несколько других специфических параметров поставщика (показано выше), но файл favicon.svg будет охватывать большинство случаев использования.

Обновление

Обновлен, чтобы включить новую версию Android/Chrome M39 + favicon/theming. Интересно, что они пошли с аналогичным подходом к Microsoft, но используют JSON файл вместо XML.

Ответ 6

Существует много сложных решений. Для меня? Я использовал GIMP для сохранения копии исходного PNG файла после изменения размера изображения до 32 x 32 пикселей.

Просто сохраните его как файл *.ico и используйте

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

приведенный выше

Ответ 7

Чтобы Chrome отображал значок страницы (значок), вам необходимо проверить свой сайт с сервера хостинга или использовать локальный хост при разработке и тестировании вашего сайта на вашем ПК.

Ответ 8

Я бы рекомендовал вам попробовать http://faviconer.com, чтобы преобразовать ваш .PNG или .GIF в файл .ICO.

Вы можете создать как 16x16, так и 32x32 (для нового отображения сетчатки) в одном файле .ICO.

Нет проблем с IE и Firefox

Ответ 9

<link rel="shortcut icon" 
href="#" onclick="location.href='http://someWebsiteLocation/images/imageName.ico'; return false;">

Если я могу добавить больше ясности для тех из вас, которые все еще запутаны. Файл .ico имеет тенденцию обеспечивать большую прозрачность, чем .png, поэтому я рекомендую преобразовать изображение здесь, как указано выше: http://www.favicomatic.com/done Кроме того, внутри href есть только расположение изображения, это может быть любое местоположение сервера, не забудьте добавить http://впереди, иначе это не сработает.