favicon追加

Webにfaviconを設定していないのが気になったので、早速作って適応してみました。

1. faviconの作り方

専用ソフトを使用して作る方法もありますが、今回はWebサービスを利用して簡単に作ります。
まず、適当な画像を準備します。faviconは、透過も出来るので、透過を利用した画像を準備しました。
サイズは、適当で大丈夫ですが、64px以上にしておいたほうが良いでしょう。

次に、Webを利用して、先程準備した画像をベースにfaviconを作成します。
まず、X-Icon Editor(http://www.xiconeditor.com/)にアクセスします。

こちらのサービスを使用して、作っていきます。
まず、画像を読み込みますので、「1 Import」を押します。

すると、Image Uploadというポップアップが表示されるので、「Upload」を押します。

画像の選択画面が表示されるので、準備した画像を選んで、「選択」を押します。

アップロードされると元の画面に戻り、アップロードした画像が、適応されています。

左側の画面で、アイコンにする範囲を調整します。

右側の画面に、実際のサイズで表示されているので、参考にしながら調整すると、やりやすいです。

「3 Preview」を押すと、Preview iconとポップアップが表示されます。

「Preview your icon」を押します。

以下のようにアイコンがプレビューされますので、確認したら戻ります。

問題なければ、「4 Export」をクリックし、Export iconのポップアップが表示されます。

この画面で、「Export your icon」を押し、ダウンロードします。

これで、favicon.icoの準備が出来ました。

続いて、Webにアップロードします。ドメインの直下にアップロードすると良いでしょう。
ここの方法は、それぞれの環境で方法が違うし、Webサイトを持っている人には、通常の画像のアップロードと同じですので、割愛します。

通常のWebであれば<head>〜</head>の間に、下記コードを挿入。
<LINK REL=”SHORTCUT ICON” HREF=”http://ドメイン名/favicon.ico” />

WordPressを利用している場合は、WordPress管理画面で
「外観」 → 「テーマ編集」 → 「ヘッダー」をクリック。

<head>〜</head>の間に、下記コードを挿入。
<LINK REL=”SHORTCUT ICON” HREF=”http://ドメイン名/favicon.ico” />

挿入後、「ファイルを更新」を押して終了です。
あとは、実際にサイトを表示して確かめてみましょう。

もし宜しければ、この記事をソーシャルメディアで共有してください!!