578

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

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

Связано: HTML установить изображение на вкладке браузера .

html icons favicon knookie
источник

1

проверьте ссылку для получения дополнительной информации. Ты на правильном пути.

Реджи

Загрузите изображение (favicon.ico) с FTP (прочитайте наше руководство по FTP) в корневой раздел вашего веб-сайта. Корневой раздел - это основная область файла, где вы должны хранить файл index.html (index.asp, index.php и т. Д.) Для своей главной страницы. davesite.com будет корневым каталогом davesite.com/webstation не будет корневым каталогом. davesite.com/webstation/html также не является корневым. Этот файл, помещенный правильно, будет загружен по умолчанию для всего вашего домена.

knookie

там преждевременно нажал клавишу ввода - все равно спасибо за ответ. Собирался ли сказать, что первая часть (которую я вставил выше) в ссылке, которую вы дали, не работает? Однако вторая часть сработала отлично - спасибо

knookie

3

Вот рекомендации w3.org с предупреждением, что IE до IE11 не поддерживает .png в качестве значков избранного .

Денис Сегюре

416

Есть два способа добавить значок сайта на сайт.

`<link rel="icon">`

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

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

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

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

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

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

Из другого SO ответа ( @mercator ):

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

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

Михал Перлаковский
источник

1

Если вам нужны ВСЕ значки автоматически (включая мобильные, значки «добавить на домашний экран», мобильные закладки, iOS / Droid, вкладку рабочего стола и т. Д.), Генерацию файлов ICO и т. Д., А также копируемый HTML-код для указанных метафайлов, все одним щелчком мыши, вы можете использовать этот удобный инструмент (я не связан) realfavicongenerator.net

Альберт Реншоу

2

Хочу добавить: ваш значок должен быть квадратного размера, это означает, что ширина равна высоте.

Нгуен Тан Дат

3

Не забудьте нажать Ctrl + F5 при тестировании. Иногда это кешируется.

Hairi

Я не обнаружил, что простое размещение файла ICO с именем favicon.ico в корневом каталоге моего сайта привело к его загрузке либо FireFox, либо Chrome. Итак, я пошел по <link relмаршруту. НО, адрес моего сайта ненадежно указан в DNS, поэтому я не могу рассчитывать на href="http://example.com"его получение. Таким образом, я пришел к этому решению в моем index.htmфайле:<link rel="icon" href="favicon.ico">

CODE-REaD

426

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

Поместите адрес ICO в headс link-tag:

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

Густаво Коста Де Оливейра
источник

3

Спасибо! Я правильно выполнил шаги, и он действительно хорошо работает в IE и Firefox, но по какой-то причине он не работает в Google Chrome, нужно ли удалять кеш? или что мне оттуда делать?

PatrickGamboa

1

Мне нравится использовать плагин Photoshop: telegraphics.com.au/svn/icoformat/trunk/dist/README.html

Ben_Coding

2

Часть «ярлыка» может быть удалена во многих случаях: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon

bbc

72

Лучшее, что я нашел, это http://www.favicomatic.com/ Я говорю лучше, потому что он дал мне самый свежий значок и не требовал редактирования после их преобразования. Он сгенерирует значки в 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

Я должен поместить все это в свой тег головы для каждой страницы?

Нумен

1

Я бы не стал помещать все это в твой головной убор. Я бы добавил только теги, необходимые для поддержки устройств, которые вам нужны. Честно говоря, вы можете обойтись с помощью одного <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">

Джаред Менард

5

На этой странице git объясняется, для чего используется большинство этих значков: github.com/audreyr/favicon-cheat-sheet

Джаред Менард,

14

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

Вот некоторые фрагменты, которые я использовал с соответствующими ссылками на то, где я собрал информацию. См. Мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта 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 / Темы. Интересно, что они применили аналогичный подход к Microsoft, но используют XML-файл вместо XML.

Мухаммед Рехан Саид
источник

11

Я создал онлайн генератор Favicon, с помощью которого вы можете создавать значки из Font Awesome Icons . Вы можете предварительно просмотреть созданный favicon в браузере.

Если вам нужны дополнительные функции, пожалуйста, не стесняйтесь, присылайте вопросы или запросы сюда :).

затмение
источник

10

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

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

Барби ноутбук геймер
источник

5

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

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

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

вышеперечисленное

beep_check
источник

4

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

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

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

Дмитрий А
источник

3

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

Милуд Элумри
источник

2

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

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

dizad87
источник

1

Я не использовал никаких других, но https://realfavicongenerator.net/, кажется, лучший выбор, и это еще не было упомянуто здесь.

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

Из письма, отправленного мне разработчиком, они также планируют добавить поддержку для создания значков SVG, а также чувствительность к темам SVG , я думаю, что это совершенно потрясающая функция.

mbomb007
источник

0

Пожалуйста, используйте приведенный ниже код в разделе заголовка вашего индексного файла.

<link rel="icon" href="yourfevicon.ico" />

Читракш байрата
источник

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

Ответы:

`<link rel="icon">`

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