faviconは、完璧を目指すと深みにはまりますね。
IEも認識するノーマルな指定、高解像度ディスプレイ用、iOSホーム用、Android用などなどあり、どこまで対応すればよいのやらという気分になってきます。
以下のURLでfavicon.ico の画像を置いておけば、ブラウザのタブに表示されたり、ブックマークのアイコンに使われたりはしますので、これで済ませたくなってきます。
http://ドメイン名/favicon.ico
どうしてもこだわりたいときは、こちらで作ってもらうと楽だと思います。
https://realfavicongenerator.net/
アップロードするべきファイルが一式もらえるので、テーマファイルの中か一番上の階層にアップロードして、以下のようにheadタグ内にHTMLを追記することになります。
<link rel="apple-touch-icon" sizes="180x180" href="/アップロードした場所/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/アップロードした場所/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/アップロードした場所/favicon-16x16.png"> <link rel="manifest" href="/アップロードした場所/site.webmanifest"> <link rel="mask-icon" href="/アップロードした場所/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
HTMLにあまりごちゃごちゃ書きたくない。
把握しきれない。
ホームアイコンだのは気にしない。
シンプルに1行で済ませたい。
そんな時は以下のみでよいと思います。
<link rel="icon" type="image/x-icon" href="/アップロードした場所/favicon.ico">
ico画像を作れないときなど、png画像を使うときは以下のようにtypeをpngにすると良いです。
<link rel="icon" type="image/png" href="/アップロードした場所/favicon.png">
さらに手抜きすると、favicon.ico は16×16でなく、64×64でも認識してもらえるようなので、64×64で作ったfavicon.ico を置いておくと、ある程度の範囲できれいに表示されると思います。