ブックマークアイコン・ファビコン作成、設定を変更する【スマホ対応】

ブックマークした時に、表示される、
サイトの目印にもなるファビコン。
ブラウザの上部、アドレスバーや、サイトタイトル横、
ブックマーク表示のサイト名の左に表示され、
スマホでは、ホーム画面に追加したときにも表示されます。

このブックマークアイコン、ファビコンの
オリジナルアイコンの作成から、設定変更の方法をご紹介します。

ワードプレスの場合はこちらへどうぞ
ワードプレスでファビコンを簡単に設定

ファビコン作成

まずファビコンにする画像を用意します。
サイズは自動で変換してくれますが、
透過画像を使用する場合は、
サイズに合わせて作成する
ことをお勧めします。

サイズは 16X16,32X32,48X48 サイズの三種類あればOKです。
対応しているファイルタイプはJPG,GIF,PNGです。

※スマホのホーム画面用のアイコンは
別途、114X114サイズで用意します。

画像が用意出来たら、
こちらのサイトで.ico タイプに変換します。

favicon.ico を作ろう

それぞれのサイズファイルを選択したら、
「favicon.icon 作成」ボタンを押します。

3つのサイズを一括してまとめれるので、
全てのサイズファイルを選択してから、
作成ボタンを押しましょう。

成功したら、赤枠のダウンロードボタンが出るので、
作成した.icoファイルをダウンロードします。

icon 変換ツール

ファイルを選択し、作成サイズを選んだら
アイコン作成をクリックします。
こちらは１サイズづつの作成になります。

ファビコンを設定・変更する

無事に.ico の画像を用意出来たら、サーバーにアップロードします。
場所はサイトドメインのルートディレクトリにアップします。

エックスサーバーであれば、
ドメイン名/public_html/favicon.ico
というようにアップします。

ICO形式のファイルで favicon.ico というファイル名であれば、
ブラブザが、自動でファビコンを読み取ってくれるようになります。

またディレクトリ、ページごとに違うファビコンを表示させる場合や、
ファビコンのファイル名を変更する場合は、
<head>内に以下のタグを入れる事で、表示させる事が出来ます。
※タグを指定する場合はjpg,gif,png形式でも可能です。

<link rel=”shortcut icon” href=”http://ドメイン名/ファイル名.ico” type=”image/vnd.microsoft.icon”>

ワードプレスでファビコンを設定する

ワードプレスの場合でも、やり方は基本的には同じで、
ドメインのルートディレクトリに、ICO形式のファイルを
favicon.ico というファイル名でアップすれば、
自動で認識してくれます。

しかし、先ほどの解説のように、
ファイル名を変更やディレクトリ指定したり、
ico以外のファイルタイプを使用したい場合は、
function.phpへ下記のコードを追加します。

function add_favicon_link(){ ?>
<link rel=”shortcut icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>http://ドメイン名/ファビコンファイル” />;
<?php }
add_action(‘wp_head’, ‘add_favicon_link’);