フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

ページのアイコン画像(ファビコン)をHTMLで設定する

そろそろ自分のポートフォリオ作りを始めないといけないなぁと思ったので
簡単なところから備忘録。

ファビコンとは

ブラウザのタブやブックマークに表示されるアイコンのこと。
fabicon1.png

まずはファビコン用の画像を用意

オリジナルアイコンを作るのも良し。フリー素材を使用するも良し。
私はこちらのTopeconheroesさんのICOON MONOを使用させていただきました。
icooon-mono.com/
ICOOON.png

ギターのアイコンを選んでみました!(ICOOONでは色も微調整できました)
※画像形式はなんでもいいと思いますが、IEはICO形式しか対応してないようです
favicon_guitar.png

HTMLのヘッダーでファビコンを設定

画像を任意のフォルダに配置したらHTMLのヘッダー内に下記のようなリンクを加えます。

<head>
  <title>Portfolio</title>
  <link rel="icon" href="files/image/favicon_guitar.png" type="image/png">
</head>
  • rel … ”icon”を指定
  • href … 画像の配置先パス
  • type … ”image/○○” ※○○は画像形式の拡張子を指定。ICOの時はvnd.microsoft.icon。

ファビコンを表示できました!
Fabicon設定.png

[紹介元] HTMLタグが付けられた新着投稿 – Qiita ページのアイコン画像(ファビコン)をHTMLで設定する

コメント

記事に戻る

コメントを残す