How to add a browser tab icon favicon for a website

Question

I ve been working on a website and I d like to add a small icon to the browser tab   How can I do this in HTML and where in the code would I need to place it  e g  header   I have a  png logo file that I d like to convert to an icon   Related  HTML set image on browser tab

User · Answer

I d recommend you to try http   faviconer com to convert your  PNG or  GIF to a  ICO file   You can create both 16x16 and 32x32  for new retina display  in one  ICO file   No issues with IE and Firefox

User · Answer

The best one that I found is http   www favicomatic com  I say best because it gave me the crispest favicon  and required no editing after their transformation  It will generate favicons at 16x16 and 32x32 and to quote them  Every damn size  sir   Also  their site looks cool and is easy to use   They also generate the html that you need to use for the files they generate    lt link rel  apple-touch-icon-precomposed  sizes  57x57  href  apple-touch-icon-57x57 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  114x114  href  apple-touch-icon-114x114 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  72x72  href  apple-touch-icon-72x72 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  144x144  href  apple-touch-icon-144x144 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  60x60  href  apple-touch-icon-60x60 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  120x120  href  apple-touch-icon-120x120 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  76x76  href  apple-touch-icon-76x76 png    gt   lt link rel  apple-touch-icon-precomposed  sizes  152x152  href  apple-touch-icon-152x152 png    gt   lt link rel  icon  type  image png  href  favicon-196x196 png  sizes  196x196    gt   lt link rel  icon  type  image png  href  favicon-96x96 png  sizes  96x96    gt   lt link rel  icon  type  image png  href  favicon-32x32 png  sizes  32x32    gt   lt link rel  icon  type  image png  href  favicon-16x16 png  sizes  16x16    gt   lt link rel  icon  type  image png  href  favicon-128 png  sizes  128x128    gt   lt meta name  application-name  content   amp nbsp    gt   lt meta name  msapplication-TileColor  content   FFFFFF    gt   lt meta name  msapplication-TileImage  content  mstile-144x144 png    gt   lt meta name  msapplication-square70x70logo  content  mstile-70x70 png    gt   lt meta name  msapplication-square150x150logo  content  mstile-150x150 png    gt   lt meta name  msapplication-wide310x150logo  content  mstile-310x150 png    gt   lt meta name  msapplication-square310x310logo  content  mstile-310x310 png    gt    I looked at the first 20 or so google results  and this was by far the best

User · Answer

I have created an online Favicon Generator with which you can create favicons from Font Awesome Icons  You can preview the created favicon live in the browser     If you want additional features please feel free to submit an issue or a pull request here

User · Answer

There are actually two ways to add a favicon to a website    lt link rel  icon  gt   Simply add the following code to the  lt head gt  element      lt link rel  icon  href  http   example com favicon png  gt    PNG favicons are supported by most browsers  except IE  lt   10  For backwards compatibility  you can use ICO favicons   Note that you don t have to precede icon in rel attribute with shortcut anymore  From MDN Link types      The shortcut link type is often seen before icon  but this link type is non-conforming  ignored and web authors must not use it anymore    favicon ico in the root directory  From another SO answer  by  mercator       All modern browsers  tested with Chrome 4  Firefox 3 5  IE8  Opera 10 and Safari 4  will always request a favicon ico unless you ve specified a shortcut icon via  lt link gt     So all you have to do is to make the  favicon ico request to your website return your favicon  This option unfortunately doesn t allow you to use a PNG icon   See also favicon png vs favicon ico - why should I use PNG instead of ICO

User · Answer

HTML standard on link rel icon Just for completeness  this is what the standard says  https   html spec whatwg org multipage links html rel-icon  The icon keyword may be used with link elements  This keyword creates an external resource link  The specified resource is an icon representing the page or site  and should be used by the user agent when representing the page in the user interface        The following snippet shows the top part of an application with several icons   lt  DOCTYPE HTML gt   lt html lang  quot en quot  gt    lt head gt     lt title gt lsForums     Inbox lt  title gt     lt link rel icon href favicon png sizes  quot 16x16 quot  type  quot image png quot  gt     lt link rel icon href windows ico sizes  quot 32x32 48x48 quot  type  quot image vnd microsoft icon quot  gt     lt link rel icon href mac icns sizes  quot 128x128 512x512 8192x8192 32768x32768 quot  gt     lt link rel icon href iphone png sizes  quot 57x57 quot  type  quot image png quot  gt     lt link rel icon href gnome svg sizes  quot any quot  type  quot image svg xml quot  gt     lt link rel stylesheet href lsforums css gt     lt script src lsforums js gt  lt  script gt     lt meta name application-name content  quot lsForums quot  gt    lt  head gt    lt body gt         For historical reasons  the icon keyword may be preceded by the keyword  quot shortcut quot   If the  quot shortcut quot  keyword is present  the rel attribute s entire value must be an ASCII case-insensitive match for the string  quot shortcut icon quot   with a single U 0020 SPACE character between the tokens and no other ASCII whitespace

User · Answer

There are a lot of complicated solutions above  For me  I used GIMP to save a copy of the original PNG file after changing the image size to 32 x 32 pixels   Just be sure to save it as a   ico file and use the    lt link rel  shortcut icon  href  http   sstatic net stackoverflow img favicon ico  gt    listed above

User · Answer

I ve successfully done this for my website   Only exception is  the SeaMonkey browser requires HTML code inserted in your  lt head gt   whereas  the other browsers will still display the favicon ico without any HTML insertion  Also  any browser other than IE may use other types of images  not just the  ico format  I hope this helps

User · Answer

I haven t used any others  but https   realfavicongenerator net  seems to be a top choice  and it hasn t been mentioned on here yet   It supports SVGs as source images for generating favicons  and it provides helpful options to override images for different platforms  In addition  by default it doesn t generate a ton a images to be backwards-compatible with every outdated platform  Instead  it gives you options to check if you want them   From an email the developer sent me  they also have plans to add support for generating SVG favicons  as well as SVG theme-sensitivity  I think  which is a totally awesome feature

User · Answer

There are a number of different icons and even splash screens that you can set for various devices  This answer goes through how to support them all   Here are some snippets I have used with relevant links to where I gathered the information  See my blog for more information and more information about the ASP NET MVC Boilerplate project template with all this built in right out of the box  Including sample image files    Add the following mark-up to your html head  The commented out sections are entirely optional  While the uncommented sections are recommended to cover all icon usages  Don t be scared  most if it is comments to help you    lt  -- Icons  amp  Platform Specific Settings - Favicon generator used to generate the icons below http   realfavicongenerator net  -- gt   lt  -- 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  -- gt   lt  -- lt link rel  shortcut icon  href  favicon ico  gt -- gt   lt  -- favicon-96x96 png - For Google TV  -- gt   lt link rel  icon  type  image png  href   content images favicon-96x96 png  sizes  96x96  gt   lt  -- favicon-16x16 png - The classic favicon  displayed in the tabs  -- gt   lt link rel  icon  type  image png  href   content images favicon-16x16 png  sizes  16x16  gt   lt  -- favicon-32x32 png - For Safari on Mac OS  -- gt   lt link rel  icon  type  image png  href   content images favicon-32x32 png  sizes  32x32  gt    lt  -- Android Chrome -- gt   lt  -- 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  -- gt   lt link rel  manifest  href   content icons manifest json  gt   lt  -- 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 -- gt   lt meta name  theme-color  content   1E1E1E  gt   lt  -- favicon-192x192 png - For Android Chrome M36 to M38 this HTML is used  M39  uses the manifest json file  -- gt   lt link rel  icon  type  image png  href   content icons favicon-192x192 png  sizes  192x192  gt   lt  -- mobile-web-app-capable - Run Android Chrome version M31 to M38 in standalone mode  hiding the browser chrome  -- gt   lt  --  lt meta name  mobile-web-app-capable  content  yes  gt  -- gt    lt  -- 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 -- gt   lt  -- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen  -- gt   lt  -- lt meta name  apple-mobile-web-app-title  content    gt -- gt   lt  -- 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  -- gt   lt  -- lt meta name  apple-mobile-web-app-capable  content  yes  gt -- gt   lt  -- 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  -- gt   lt  -- lt meta name  apple-mobile-web-app-status-bar-style  content  black  gt -- gt   lt  -- apple-touch-icon-57x57 png - Android Stock Browser and non-Retina iPhone and iPod Touch -- gt   lt link rel  apple-touch-icon  sizes  57x57  href   content images apple-touch-icon-57x57 png  gt   lt  -- apple-touch-icon-114x114 png - iPhone  with 2   display  iOS   6 -- gt   lt link rel  apple-touch-icon  sizes  114x114  href   content images apple-touch-icon-114x114 png  gt   lt  -- apple-touch-icon-72x72 png - iPad mini and the first- and second-generation iPad  1   display  on iOS   6 -- gt   lt link rel  apple-touch-icon  sizes  72x72  href   content images apple-touch-icon-72x72 png  gt   lt  -- apple-touch-icon-144x144 png - iPad  with 2   display  iOS   6 -- gt   lt link rel  apple-touch-icon  sizes  144x144  href   content images apple-touch-icon-144x144 png  gt   lt  -- apple-touch-icon-60x60 png - Same as apple-touch-icon-57x57 png  for non-retina iPhone with iOS7  -- gt   lt link rel  apple-touch-icon  sizes  60x60  href   content images apple-touch-icon-60x60 png  gt   lt  -- apple-touch-icon-120x120 png - iPhone  with 2   and 3 display  iOS   7 -- gt   lt link rel  apple-touch-icon  sizes  120x120  href   content images apple-touch-icon-120x120 png  gt   lt  -- apple-touch-icon-76x76 png - iPad mini and the first- and second-generation iPad  1   display  on iOS   7 -- gt   lt link rel  apple-touch-icon  sizes  76x76  href   content images apple-touch-icon-76x76 png  gt   lt  -- apple-touch-icon-152x152 png - iPad 3   with 2   display  iOS   7 -- gt   lt link rel  apple-touch-icon  sizes  152x152  href   content images apple-touch-icon-152x152 png  gt   lt  -- apple-touch-icon-180x180 png - iPad and iPad mini  with 2   display  iOS   8 -- gt   lt link rel  apple-touch-icon  sizes  180x180  href   content images apple-touch-icon-180x180 png  gt    lt  -- Apple Startup Images - These are shown when the page is loading if the site is pinned https   gist github com tfausak 2222823 -- gt   lt  -- apple-touch-startup-image-1536x2008 png - iOS 6  amp  7 iPad  retina  portrait  -- gt   lt 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   gt   lt  -- apple-touch-startup-image-1496x2048 png - iOS 6  amp  7 iPad  retina  landscape  -- gt   lt 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   gt   lt  -- apple-touch-startup-image-768x1004 png - iOS 6 iPad  portrait  -- gt   lt 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   gt   lt  -- apple-touch-startup-image-748x1024 png - iOS 6 iPad  landscape  -- gt   lt 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   gt   lt  -- apple-touch-startup-image-640x1096 png - iOS 6  amp  7 iPhone 5 -- gt   lt 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   gt   lt  -- apple-touch-startup-image-640x920 png - iOS 6  amp  7 iPhone  retina  -- gt   lt 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   gt   lt  -- apple-touch-startup-image-320x460 png - iOS 6 iPhone -- gt   lt 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   gt    lt  -- 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  -- gt   lt  -- application-name - Windows 8  - The name of the application if pinned to the start screen  -- gt   lt  -- lt meta name  application-name  content    gt -- gt   lt  -- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image  msapplication-TileImage   -- gt   lt meta name  msapplication-TileColor  content   5cb95c  gt   lt  -- msapplication-TileImage - Windows 8 - The tile image  -- gt   lt meta name  msapplication-TileImage  content   content images mstile-144x144 png  gt    My browserconfig xml file  Full explanation above    lt  xml version  1 0  encoding  utf-8   gt   lt browserconfig gt     lt msapplication gt       lt tile gt         lt square70x70logo src   Content Images mstile-70x70 png   gt         lt square150x150logo src   Content Images mstile-150x150 png   gt         lt square310x310logo src   Content Images mstile-310x310 png   gt         lt wide310x150logo src   Content Images mstile-310x150 png   gt         lt TileColor gt  5cb95c lt  TileColor gt       lt  tile gt     lt  msapplication gt   lt  browserconfig gt    My manifest json file  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                      A list of the files in the project  Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags    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 Overhead  If you take out the comments that s 3KB of extra HTML  if you don t support splash screens that s 1 5KB  If you are using GZIP compression on your HTML content  which everyone should be doing these days  that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens  I personally think its worth it to support IOS  Android and Windows devices but its your choice  I m just giving the options   Side Note About The Current Web Icon Splash Screen Settings Situation  This situation with vendor specific icons  splash screens and special tags to control the web browser or pinned icons is ridiculous  In a perfect world we would all use a favicon svg file which could look good at any size and could be placed at the root of the page  Only FireFox supports this at the time of writing  See CanIUse com    However  icons are not the only setting these days  there are several other vendor specific settings  shown above  but a favicon svg file would cover most use cases   Update  Updated to include the new Android Chrome version M39  favicon theming options  Interestingly  they have gone with a similar approach to Microsoft but are using a JSON file instead of XML

User · Answer

For Chrome to display the page icon  favicon   you need to check your website from a hosting server or you can use local host while developing and testing  your website on your PC

User · Answer

Kindly use below code in header section your index file    lt link rel  icon  href  yourfevicon ico    gt

User · Answer

lt link rel  shortcut icon   href  http   someWebsiteLocation images imageName ico  gt    If i may add more clarity for those of you that are still confused   The  ico file tends to provide more transparency than the  png  which is why i recommend converting your image here as mentioned above  http   www favicomatic com done also  inside the href is just the location of the image  it can be any server location  remember to add the http    in front  otherwise it won t work

User · Answer

Use a tool to convert your png to a ico file  You can search  favicon generator  and you can find many online tools  Place the ico address in the head with a link-tag    lt link rel  shortcut icon  href  http   sstatic net stackoverflow img favicon ico  gt

[html] How to add a browser tab icon (favicon) for a website?

Examples related to html

Examples related to icons

Examples related to favicon