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/