知恵袋

favicon


<link rel="icon" href="/favicon.ico" sizes="any">


<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">


<meta name="theme-color" content="#ffffff">

実際に必要なファイル

/favicon.ico（16×16 と 32×32 を含むマルチサイズの .ico）

/favicon-32x32.png（32×32 PNG）

/apple-touch-icon.png（180×180 PNG）

この3つを置けば、
Windows PC・Android・iPhone の
主要環境で正しく表示されます。

ICOだけでも昔ながらのPCでは動きますが、
「スマホの高解像度アイコンをきれいに
出すためにはPNGも必要」ということです。

.ico（favicon.ico） → 伝統的。
PCブラウザはまずこれを探します。

.png（32×32, 180×180） →
新しいブラウザ・スマホ用。
高解像度でもきれいに表示される。

Windows 11 の Chrome/Edge では
* .ico が優先される
のは正常動作。

iPhone/Android では PNG が使われる。

Android の Chrome では、
PC版のようにアドレスバーにファビコンを
出さない仕様になっています。

Androidでファビコンを確認できる場所
右上の「□」や下のスワイプでタブ一覧を開くと、
各ページの小さいアイコンとして
ファビコンが出ます。

同じHTML記述でも
xrea → 履歴クリア後も残る、
FC2 → 頭文字に戻るという差
が出たのは、まさにサーバー側の実装や
Google との連携の違いによるものだと思います。

xrea はファビコンを正しくキャッシュさせる
HTTPヘッダーを返しているか、
あるいは Google 側で収集されている。

FC2 はその部分が弱く、
履歴消去時にローカルキャッシュが
飛んでしまうとアイコンが消える。

（旧）
/HEADの直前に以下を記載する。
画像*.icoは別途freeアプリで作る。
*.pngは自作画像で可。
if IEはIEがサポート終了となった為に今後は不要。

<link rel="icon" href="favicon.ico">　（注意・下段QRコードの項参照）
<link rel="apple-touch-icon" href="apple-touch-icon.png">

</HEAD>

ファビコン生成
https://ao-system.net/favicongenerator/
favicon.ico　16x16　32x32　48x48推奨　
apple-touch-icon.png　180x180推奨