发表新帖
发表新帖

How do I put my website's logo to be the icon image in browser tabs?

后端 未结
关注
6 671
北荒
北荒 2020-12-22 16:16

The image next to the page title in the browser tab - how can you link an image here?

相关标签:
6条回答
  • 执念已碎
    2020-12-22 16:53

    Add a icon file named "favicon.ico" to the root of your website.

    0 讨论(0)
  • 遥遥无期
    2020-12-22 16:55
    1. ADD THIS
    **<HEAD>**

  < link rel="icon" href="directory/image.png">

    Then run and enjoy it

    0 讨论(0)
  • -上瘾入骨i
    2020-12-22 16:58

    This is the favicon and is explained in the link.

    e.g. from W3C

      <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

    Plus, of course the image file in the appropriate place.

    0 讨论(0)
  • 孤城傲影
    2020-12-22 17:09

    That image is called 'favicon' and it's a small square shaped .ico file, which is the standard file type for favicons. You could use .png or .gif too, but you should follow the standard for better compatibility.

    To set one for your website you should:

    1. Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there's no max size*), and transform it into an .ico file. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.cc or RealFaviconGenerator.

    2. Then, you have two ways of setting it up:

      A) Placing it on the root folder/directory of your website (next to index.html) with the name favicon.ico.

      or

      B) Link to it between the <head></head> tags of every .html file on your site, like this:

      <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

    If you want to see the favicon from any website, just write www.url.com/favicon.ico and you'll (probably) see it. Stackoverflow's favicon is 16x16 pixels and Wikipedia is 32x32.

    *: There's even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info here

    0 讨论(0)
  • 你的背包
    2020-12-22 17:09 
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

    or you can use this one

    <link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
    0 讨论(0)
  • 生来不讨喜
    2020-12-22 17:13

    It is called 'favicon' and you need to add below code to the header section of your website.

    Simply add this to the <head> section.

    <link rel="icon" href="/your_path_to_image/favicon.jpg">
    0 讨论(0)
 看不清?
提交回复
热议问题