サイトをお気に入りに登録したときなどに、アイコンとして使われる画像があります。

種類

favicon.ico

favicon.icoは「Favorite icon」の略で「ファビコン」と呼ばれています。IEで使われるようになって広がりました。当時は、16x16の小さな画像でした。今でも拡張して現役です。

例
<link rel="shortcut icon" href="/favicon.ico" />

apple-touch-icon

もちろんアップルの端末のためのアイコンです。ファビコンの解像度が低かったことから、多くのブラウザでapple-touch-iconを採用しています。

例
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

OGP(Open Graph Protocol)

Facebookが提唱したもの。投稿記事にリンクをしたものを入れると、この画像が使われるというもの。

例
<meta property="og:image" content="https://www.xxx.com/og_img.png">

Twitterカード

X(旧Twitter)が使用する画像。

例
<meta name="twitter:image" content="https://www.xxx.com/tw_img.png"/>

ブラウザの対応

Safari

apple-touch-icon

Edge

favicon

Firefox

apple-touch-icon
favicon

Vivaldi

スクリーンショット

Chrome

favicon

Opera

OGP
Twitter
apple-touch-icon
favicon

Orion

apple-touch-icon