【HTML】headタグ内でファビコンを設定しよう!

HTML

サイト作成にほぼほぼ必須(?)なファビコンを設定する方法を解説していきます。

画像から適切なサイズ・ファイル形式に変更する方法も紹介します。

※基本コーダー向け、自分向けの記事になります。

実際に設置する

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

上のコードをheadタグ内に設置してください。ファイル名は適宜変更をお願いします。

以下サイトでファビコン用画像に変換することも可能です。

ファビコン favicon.ico を作ろう! リアルタイム版

(あるといいかも)アップルタッチアイコン

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

↑ ファイル名は適宜変更をお願いします。

ファビコンと似たような機能で、ホームページをスマホのホーム画面に追加したときに表示されるアイコンです。

こちらも念のため設定しておくとよいでしょう。

タイトルとURLをコピーしました