デベロッパーツールをみたが、faviconが探せない。

faviconの探し方を調べたら、

<head>の中に<link>として書くことは調べました。しかし、以下のサイトにその記述がないにも関わらず、faviconが設置されています。 [ファビコンが見つからないサイト](http://www.udon-kuranosuke.com)

このように<link>に記述しなくても、faviconは設置できるものなのでしょうか？
このサイトのfaviconがどこにあるのかがわからず、困っています。

ご教授ください。
よろしくお願いします。

行動規範の内容に同意します

回答2件

このように<link>に記述しなくても、faviconは設置できるものなのでしょうか？

はい。https://example.com/...だったら自動的にhttps://example.com/favicon.icoを探しに行きます。しかし、明示的に示すためにもlink要素で指定することをお勧めします。

投稿2021/01/13 23:02

編集2021/01/13 23:02

kyoya0819

総合スコア10429

幾つか方法があるようです。

引用元：
Webサイトのファビコンやアイコンを設定するには？作成方法を解説

①ルートディレクトリに画像をアップロードする方法
まずはWebサイトのルートディレクトリに画像をアップロードする方法です。

先ほどファビコンジェネレーターで作った以下の素材

favicon.ico
apple-touch-icon-180x180.png
を、名前を変えずにルートディレクトリへアップロードします。これだけでOKですが、画像のファイル名> を変えたりルートディレクトリ以外に画像を置いたりすると、設定が反映されない点に注意してください。

②headタグ内にHTMLを記述する方法
Webサイトのheadタグ内にHTMLを記述する場合、以下のコードを該当箇所へコピペしてください。

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

ファビコン
<link rel="icon" type="image/x-icon" href="./favicon.ico">

この方法なら、ルートディレクトリ以外に画像を置いても構いません。

③WordPressの付属機能で設定する方法
自社のWebサイトをCMSで構築しているならより手軽に設定できます。まずはWordPressの場合。手順は以下の通りです。

外観
↓
カスタマイズ
↓
サイト基本情報
↓
サイトアイコン
↓
用意した画像をアップロード

ただし、ver.4.3以降のみ対応である点に注意してください。

④Wixの付属機能で設定する方法
Wixでの設定手順は以下の通りです。

【ファビコン】＊プレミアムプランのみ
「サイトダッシュボードの設定」
↓
「ファビコン」の横にある「管理」をクリック
↓
「画像をアップロード」
↓
ファビコンにしたい画像を選ぶか、新しく画像をアップロード
↓
「画像を追加」をクリック

【アイコン】＊無料プランでも設定可
画像をサイトにアップロード
↓
「サイトを管理」
↓
「SEO」
↓
「SEO詳細設定」
↓
「エディタから追加するにはこちらをクリックしてください」の「こちら」をクリック
↓
「ヘッダーコード - メタタグ」下に次のコードを記述

Apple機器用
<link rel="apple-touch-icon" sizes="180x180" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" />
Android機器用
<link rel="icon" type="image/png" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" sizes="192x192">