I've been working on the site and I want to add a small icon to the browser tab.
How do I do this in HTML and where do I need to put it in my code (such as a title)? I have a. png logo file that I want to convert to an icon.
Relevant: HTML set image on browser tab .
#1 building
I have successfully done this for my website.
The only exception is that SeaMonkey browsers need to insert HTML code in < head >; however, other browsers still display favicon.ico without inserting any HTML. In addition, any browser other than IE can use other types of images, not just the. ICO format. I hope it helps.
#2 building
For Chrome to display the favicon, you need to check your site from a hosted server, or you can use a local host when developing and testing your site on a PC.
#3 building
I suggest you try http://faviconer.com Convert. PNG or. GIF to an. ICO file.
You can create 16x16 and 32x32 (for the new retina display) in an. ICO file.
No IE and Firefox issues
#4 building
The best I've found is http://www.favicomatic.com/ I say it best because it gives me the clearest icon and doesn't need to be edited after conversion. It will generate 16x16 and 32x32 favicons and quote them "every damn size, sir!" In addition, their website looks cool and easy to use.
They also generate html for the files you need to generate.
<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" />
I've looked at the top 20 or so Google search results, which is by far the best.
#5 building
You can set up many different icons or even startup screens for various devices. The answer is through how to support them all.
Here are some of the clips I used and links to the information I collected. Of ASP.NET MVC Boilerplate For more information and more information about project templates, see My blog , all of which are built-in out of the box (including sample image files).
Add the following tags to your html header. The commented out part is completely optional. Although it is recommended to use uncommented sections to cover all icon usage. Don't be afraid, most comments can help you.
<!-- 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">
My browserconfig.xml file. The full explanation above.
<?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>
My manifest.json file. The full explanation above.
{ "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" } ] }
List of files in the project (note that the names of some of these files are important if you decide to put them at the root of the project to avoid using the meta tags above):
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
Total cost
If you do not support the 1.5KB boot screen, delete the 3KB extra HTML comments. If you use GZIP compression on HTML content (which everyone should do now), then each request supports an overhead of approximately 634 bytes to support all platforms or 446 bytes without starting the screen. I personally think it's worth supporting IOS, Android and Windows devices, but it's your choice, I just provide options!
Sidenotes on current Web icon / splash screen / settings
This situation with vendor specific icons, splash screens and special tags to control Web browsers or fixed icons is absurd. In a perfect world, we'll use the favicon.svg file, which can look good on any size, and can be placed at the root of the page. At the time of this writing, only FireFox supports this feature (see CanIUse.com ).
However, the icon is not the only setting currently, there are other vendor specific settings (as shown above), but the favicon.svg file will cover most use cases.
To update
Updated to include new Android / Chrome version M39 + favicon / theme options. Interestingly, they take a similar approach to Microsoft, but use JSON files instead of XML.