How to Change Favicon?

[sneedbreedley]

When I post a link to my website in facebook or any social media group, the image of a black Chevy Impala appears. I'm not sure if it's a favicon or just a selected icon or image. I don't see it in my code and I want to change it.

www.winvoices.com

[Nancy OShea]

I assume you're asking about your FB Link Preview image.  Ask Meta (the new name).   They have their own system for setting up your link preview image which has nothing to do with Dreamweaver.

https://www.facebook.com/business/help/174950763179500?id=250502925955301

Hope that helps.

[sneedbreedley]

That appears to be what I need but I don't see how to access the Preview tool or how to apply it. Just a vague explanation of what it is.

[Nancy OShea]

Do you have a FB Business account?

[sneedbreedley]

Yes

[sneedbreedley]

Does that allow me to use the tool?

[Nancy OShea]

You'll need to ask Facebook about Facebook tools.

[Liam Dilley]

You do not need it at all.

You need to implement opengraph on your site/page.

The code that goes into the head part of the html looks like this:

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">

<meta property="og:image" content="">

There are lots of online tools to test and build this for you such as...
https://smallseotools.com/open-graph-generator/

Things like the Title, URL, Description, Type and Image need to be different per page if your doing it properly and populated with server side data.

If you have a blog for example every blog article will have a different title, description and image and a specific type. Articles on the same site would have different data and different type.

Helpful info:

https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/

[Liam Dilley]

You do not need a FB business account. Facebook developer tools are through anyones account - You just set the access.

[Nancy OShea]

I may be wrong but I don't think that's what he's asking about. 

Open Graph is markup used by social media crawlers. For example, when one posts a link on FB to an article in the New York Times, NYT's Open Graph content appears in the preview image.

https://developers.facebook.com/docs/sharing/webmasters/

Each article has unique Open Graph content.

I believe @sneedbreedley is asking about his FB profile picture and cover image which are stored & refreshed directly from his FB account profile. 

https://www.facebook.com/help/125379114252045

In any case, social media is not a Dreamweaver issue.

[Nancy OShea]

Incidentally, your favicon is the small icon that appears in a browser's tab,  bookmarks/favorites folder and mobile device shortcuts.  Favicons come in various sizes for different devices.

These are a few of the sizes:

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

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144.png" />

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114.png" />

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72.png" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Online generator:

https://favicon.io/