ファビコンやOGP画像の作成便利サイト

Favicon

このサイトで、ファビコンを一括作成します。
iOS Safari, Android Chrome, Windows 8/10, Mac OS X El Capitan Safari等に対応した画像やサイズを一括で作成出来ます。
https://realfavicongenerator.net/

head内の記述方法も画像を作成すると、表示されるので
それを参考にhtmlを記述すれば表示されます。

個人的な設定は、
・ Favicon for Desktop Browsers and Google Result Pages
　Use the original image as is.
・ Favicon for iOS - Web Clip
　Add a solid, plain background to fill the transparent regions.
・ Favicon for Android Chrome
　Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube...).
・ Windows Metro
　Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.
・ macOS Safari
　Use a silhouette of the original image. Works well with pictures with significant transparent regions.

また、サイト内のファビコンチェッカーで正常に設定されているかどうかも確認出来ます。
https://realfavicongenerator.net/favicon_checker

OGP

OGP画像のサイズは、1200x840で作成し、
コンテンツは、500x500に収まるように作成しました。

作成した画像のチェッカーです。6種類のサイズでどのように表示されるかを確認出来ます。
http://ogimage.tsmallfield.com/

また、Facebook, Twitter, Line, はてなブックマークでどのように表示されるかを確認出来るサイトです。
https://rakko.tools/tools/9/

参考

OGP画像を設定しよう！Facebook・Twitter・はてなブログ・LINEの最適な画像サイズとは？