Я'работал над веб-сайтом и я'хотел бы добавить маленькую иконку на вкладку браузера.
Как я могу сделать это в HTML и где в коде мне нужно его разместить (например, в заголовке)? У меня есть файл логотипа .png
, который я хотел бы преобразовать в иконку.
Связано: https://stackoverflow.com/questions/2359866/html-set-image-on-browser-tab.
Используйте инструмент для преобразования png в ico-файл. Вы можете поискать "генератор фавиконов" и найдете множество онлайн-инструментов.
Поместите адрес ico в head
с тегом link
:
<link rel="иконка ярлыка" href="http://sstatic.net/stackoverflow/img/favicon.ico">
Есть фактически два способа добавить фавикон на сайт.
<ссылка отн=и"значок" и>
Просто добавьте следующий код в <головы>
элемент:
в
<link rel="icon" href="http://example.com/favicon.png">
ПНГ иконки поддерживаются большинством браузеров, кроме IE <= 10. Для обратной совместимости, вы можете использовать и ICO иконки.
Обратите внимание, что вы Дон'т должны предшествовать значок `в
атрибут relбольше
ярлык`. Из МДН типов ссылке:
на
ярлык
тип связи часто видел иконы, но этот тип связи является несоответствующей, игнорируется и веб-авторы не должны использовать его больше.
фавикон.Ико
в корневом каталогеОт другого так ответить (по @Меркатор):
Все современные браузеры (проверено в Chrome 4, Firefox 3.5 и, ИЕ8, Опера 10 и сафари 4) Всегда запрос
фавикон.Ико, если вы не'вэ указанный ярлык Через в
<ссылка>`.
Поэтому все, что вам нужно сделать, это принять `/фавикон.запрос Ико на ваш сайт вернуть свой значок. Этот вариант, к сожалению, не't позволяют использовать PNG значок.
Лучшее, что я нашел http://www.favicomatic.com/ Я говорю лучше, потому что он дал мне четкое фавикон, и не требуется никакого редактирования после их трансформации. Он будет генерировать иконки на 16х16 и 32х32 и цитировать их "каждая размером блин, сэр!&и" Кроме того, их сайт выглядит здорово и легко в использовании.
Они также генерировать 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=" "/>
<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, и этот был самым лучшим.
Есть несколько различных иконок и даже заставки, которые вы можете установить для различных устройств. Этот ответ идет через Как поддержать их всех.
Вот некоторые фрагменты я использовал с соответствующими ссылками, где я собирал информацию. См. Мой Блог для получения дополнительной информации и дополнительной информации о ASP.NET в MVC шаблон шаблон проекта со всеми этой причине в прямо из коробки (включая файлы примеров изображения).
Добавьте следующий верстка в 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>
Мой манифест.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 устройствах, но это твой выбор, я'м просто даю варианты!
Примечание О Текущей Веб-Иконки/Заставки/Параметры Ситуации
Эта ситуация с конкретным производителем иконки, заставки и специальные теги для управления веб-браузер или прикалывают значки-это смешно. В идеальном мире мы бы все использовать фавикон.файл SVG, который мог бы хорошо смотреться на любой размер и может быть размещен в корневом разделе. Только Firefox поддерживает это на момент написания (см. CanIUse.com).
Тем не менее, иконы не только в эти дни, существует несколько других специфических параметров поставщика (показано выше), но плохо.файл SVG будет охватывать большинстве случаев использования.
Обновление
Обновлены для включения новых Android/Chrome версии М39+ фавикон/тематизация варианты. Интересно, что они ушли с подобным подходом к Microsoft, но не используя файл JSON вместо XML.
Я успешно сделал это для своего сайта.
Единственное исключение - браузер SeaMonkey требует HTML-код, вставленный в <head>
;, в то время как другие браузеры будут отображать favicon.ico без вставки HTML. Кроме того, любой браузер, кроме IE, может использовать другие типы изображений, а не только формат .ico. Надеюсь, это поможет.
Я создал онлайн генератор фавикон с помощью которого можно создавать иконки из шрифт потрясающие иконки. Вы можете просмотреть созданный фавикон видео в браузере.
Если вы хотите дополнительные функции, пожалуйста, не стесняйтесь отправить вопрос или запрос здесь :).
Есть много сложных вышеуказанного решения. Для меня? Я использовал GIMP, чтобы сохранить копию оригинального файла png после изменения размера изображения до 32 х 32 пикселей.
Просто будьте уверены, чтобы сохранить его как *.файл ICO и использовать
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
перечисленные выше
Я'd рекомендую вам попробовать http://faviconer.com для преобразования .PNG или .Гиф для .Файл ICO.
Вы можете создать как 16х16 и 32х32 (для нового дисплея сетчатки) в одном .Файл ICO.
Никаких проблем с IE и Firefox
Чтобы Chrome отображал значок страницы (favicon), необходимо проверить ваш сайт с хостинг-сервера или использовать локальный хост при разработке и тестировании сайта на вашем компьютере.
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
Если я могу добавить больше ясности для тех из вас, которые до сих пор путают. Интернет .файл ICO, как правило, обеспечивают больше прозрачности, чем .PNG, который является, почему я рекомендую преобразовывать свой образ здесь, как упоминалось выше: http://www.favicomatic.com/done кроме того, внутри href является только расположение изображения, это может быть любой сервер, не забудьте добавить HTTP:// в стойка, в противном случае он выиграл'т работу.