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

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

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

ファビコン作成

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

ファビコン作成

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

ことをお勧めします。

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

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

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

favicon.ico を作ろう

ファビコン作成

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

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

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

 

icon 変換ツール

ファビコン作成

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

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

無事に.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’);

スマホアイコン・ホーム画面の設定

続いて、スマホでブックマークしたときに、
ホーム画面に表示されるアイコンを変更します。

これまで用意した、icoファイルとは別途で、
114X114サイズの画像を用意します。
ファイルタイプはGIF,PNG なら間違いないでしょう。

サイトやページの<head></head>内に以下のタグを記載します。
ワードプレスの場合は、header.phpファイルの<head></head>内に記載します。

<link rel=”apple-touch-iconprecomposed” href=”http://ドメイン名/ファイル名”>

これでファビコンの設定は完了です。
自分のブラウザでファビコンが表示されない場合は、
最読み込みをしたり、キャッシュを削除することで反映されます。

 
ワードプレスでファビコンを設定する場合はこちらへ

 

このエントリーをはてなブックマークに追加


ビジネスメール講座を無料で配信中!

多湖弘明

はじめの一歩

アフィリエイトとは?
自分の得意な事、好きな趣味などをブログやインターネットを使って発信し、広告収入を得てみませんか?特に難しい技術や知識はいりません。その方法を知っているか、知らないか。ただそれだけの差です。
実践して報酬を手にしよう!
こんなに簡単!広告収入の仕組みを解説します。実際にやってみてください。パソコンとインターネットがあれば、誰もが数万円のお小遣いならすぐ稼げます。一度限りの贅沢に使うか、継続した数万円の為に使うかは、自分次第。
チェンジザワールド!!
この先、このままでは不安。何かしなきゃと、わかってはいるけど、何もしていない。 何をしていいのか、わからない。 考えてるだけじゃなく、空いた時簡に収入を得れるように、今こそ、はじめの一歩を踏み出しましょう。

コメントを残す