【コピペ可】最新のファビコンの設定方法

サイトのアイコンとして使われるファビコンの設定方法を改めてリサーチしてまとめました。ブラウザのバージョンや種類によって仕様が異なっています。調べてもサイトごとに教えている内容が違っていたため、改めて情報を整理し直しました。

favicon（ファビコン）とは？

favicon（ファビコン）は、そのサイトのシンボルとして設定されているアイコン画像のことです。ブラウザのタブ部分に表示されたり、スマホのホーム画面に追加した時のアプリアイコンとして設定されます。スマホ版の一部のGoogle検索結果でも使われているのをみかけます。

Wikipediaに詳しい情報（うんちく）がのっていましたので、参考として紹介しておきます。faviconは”favorite icon”の略らしいです。

シンプルなfaviconの設定方法

favicon設定用の雛形を用意しました。ルートディレクトリにfavicon.pngを設置して、以下のコードをHTMLに貼り付けて使用してください。

ファビコン画像にgifを使いたい場合にはtypeにimage/gif を指定してください。icoファイルの場合はtype属性は指定しなくても問題ありません。

<link rel="apple-touch-icon" sizes="180x180" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">

詳細にfaviconを設定したい方向けの方法

モダンブラウザやレガシーブラウザ向けの対応も含めて、しっかり対応したい方は以下の記事の内容をもとにfaviconを設定することをおすすめします。

最新のfaviconの設定方法が丁寧に解説されており、他の記事もいろいろ調べてみたところ、ここが最も詳しく解説されていました。

favicon作成ツール（ファビコンジェネレーター）の紹介

画像からファビコンを自動で作成してくれるサイトです。テキストや絵文字からもファビコンを生成してくれます。

参考文献

そもそもapple-touch-iconって何？って思って調べたところappleに説明がありました。

記事内でも紹介しましたが、こちらのサイトがfavicon設定を理解する上でとても詳しく解説されていました。