ファビコンの設定方法

ブラウザのタブのサイト名の左側に表示されるマークをファビコンと言います。

下の画像の赤い円の部分のことです。

ブックマークしたときにも左側に表示されていますね。スマートフォンでホーム画面に追加すると、表示されるアイコンの事をアップルタッチアイコンといいます。

ファビコンが設定されていない場合、紙きれのような一定の画像が表示されます。アップルタッチアイコンが設定されていないと、画面のキャプチャーを表示します。

簡単に設定できるものなので、ロゴが用意できるなら、ぜひ設定しましょう。

ファビコンはブラウザによってGIFやPNGもサポートされていますが、IEではICO形式になっている為、「ICO形式」で作成した方が良いです。

また表示される環境によっていくつかのサイズを用意した方が良いです。

16Ⅹ16，32Ⅹ32があるだけでも、ある程度の対応は出来ますが、スマートフォンでは152Ⅹ152が必要です。

これらを一気に作成してくれて、背景も透過してくれるサイトがありますので、そちらを利用します。

Free Online Favicon and Apple Icons Generator - iconifier.net

iconifier.net is a free online icon generator for Apple launcher icons and favicon files zipped into one easy download file

1つのロゴデータ（JPEG,PNG,GIF)をアップしてクリックするだけです。

右上の設定からサイズ指定することもできます。

たったこれだけで、IE用のICOファイルと180Ⅹ180まで8サイズのPNGファビコンと、おまけにアップルタッチアイコンまでも作成してくれます。

後は、希望のファイルをダウンロードするだけです。一括でダウンロードする場合は、左上のZIPファイルをダウンロードします。

画面の下には、HTMLファイルも表示してくれるので、コピーして画像のパスを変更し貼り付けるだけで完了します。


&amp;amp;lt;link rel=&amp;amp;quot;shortcut icon&amp;amp;quot; href=&amp;amp;quot;/favicon.ico&amp;amp;quot; type=&amp;amp;quot;image/x-icon&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;57x57&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-57x57.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;72x72&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-72x72.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;76x76&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-76x76.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;114x114&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-114x114.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;120x120&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-120x120.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;144x144&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-144x144.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;152x152&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-152x152.png&amp;amp;quot; /&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;apple-touch-icon&amp;amp;quot; sizes=&amp;amp;quot;180x180&amp;amp;quot; href=&amp;amp;quot;/apple-touch-icon-180x180.png&amp;amp;quot; /&amp;amp;gt;

関連

コメント