0

I have no control over my site presentation icon. Browsers choose to show the menu button that I have in my header section. Or, when saved in bookmarks, my site is automatically represented by an ugly yellow square with a letter inside. Please show me the code I should write to have a picture/graphics of my own choice that will represent my site in browsers (when sharing the link, when saving to bookmarks). Please do not write about favicon code for tabs, this is not the question here. Thank you!

Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
Gustav
  • 1
  • 1
    Possible duplicate of [Provide an image for WhatsApp link sharing](https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing) – Josh Adams Feb 04 '18 at 22:30

2 Answers2

2

Diffrant browsers and platforms use diffrant resolutions/aspect ratio's and code for the icon image.

The reason why you get a stock browser icon and not your logo is probably due to you having a incorrect aspect ratio of your image and the wrong code for the platform your targeting. Please be more specific about what platform your targeting your icon for and I'm sure people can help more. But in any case I'll post the resolutions and code I know below.

16x16: browser favicon

32x32: taskbar shortcut icon

96x96: desktop shortcut icon (and Google/android TV)

128x128: Chrome Webstore icon

196x196: Android Chrome icon

228x228: Opera Coast icon

Here's a example of the code for browser favicon, taskbar and shortcut 

<link rel="icon" type="image/png" href="https://yourwebsite.com/favicon-16x16.png" sizes="16x16">

Apple IOS (touch devides)

120x120: iPhone Retina (iOS 7)

180x180: iPhone 6 Plus (iOS 8+)

152x152: iPad Retina (iOS 7)

167x167: iPad Pro (iOS 8+)

Here's a example of the code targeting apple devices

<link rel="apple-touch-icon" sizes="180x180" href="yourLogo.png">

Windows Metro

Due to how the tile system works in microsoft metro UI used in windows you need the following resolutions 70x70, 270x270, 310x310 and 310x150

Code example, keep in mind that the following code should be posted in the root directory of your website with the name browserconfig.xml!!! 

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>

      <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
      <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
      <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>
OmegaForce
  • 21
  • 1
0

Set an og:image in the of your HTML like this:

<meta property="og:image" content="http://yoursite.com/ogp.jpg" />

This is part of the Open Graph Protocol, used by most sites.

more info on structuring og:image here

Austin Jones
  • 709
  • 1
  • 14
  • 29