• コメントを書く

ファビコンのHTMLタグを設定して、サイトの顔を作っちゃおう！

って、昭和感満載のオヤジギャグのようなTop画像から始まったわけですが・・(^_^;)　ファミコンは関係ないので気にしないでください。

で、ファビコンとは何か？というのは過去の記事で説明しているのでそちらを参考にしてみてください。同時に、WordPressでサイトやブログを運営している人は、プラグインで簡単に設定できる方法も解説しているのでそちらも参考にしてみてください。

WordPressで運営をしていても、プラグインを導入しすぎると重くなってしまいどうしてもサイトの表示が遅くなってしまいがちです。直接HTMLタグを設定することでそれを軽減することができるようになります。

WordPress以外のサイトやブログを運営している人は同じようにHTMLタグを設定することでファビコンを表示することができます。

この記事ではファビコンのHTMLタグの取得から設置するまでの方法を解説していきますね。

ファビコン用画像を作成する

まずファビコンを設置するには、ファビコンに使用する画像を作成しておく必要があります。

ファイル形式は.png、.gif形式で保存しておきます。ファビコンの形は正方形。

サイズは基本的には16px×16px。もしくはデスクトップのアイコン表示(あまりないですが)も考えて32px×32pxで作成しておくとよいです。

大きいサイズの画像でも自動的にサイズ変更してもらえますが、画質が悪くなってしまうようなので自分でサイズ変更しておくことをオススメします。

ファビコン用画像の形式を変換する

画像の作成が完了したら、ファビコン用の形式に変換する必要があります。.icoという形式です。

.png、.gif形式でそのまま使用することもできますが、Internet Explorerでは対応していないので、一般的な.icoを使用することで表示される幅は広がります。

※.gifなどのアニメーションを使用したい場合は複数設定することもできるので後述します。

このサイトではFavIcon from Picsという変換サイトで行っていきます。

このサイトは簡単に変換させることができるだけでなく、.gifなどのアニメーションを変換させたり、テキストのスクロール表示をサイト内で編集して変換することもできるのでとても便利です。

※アニメーション、スクロール表示は現在はFirefoxのみでしか対応していません。

まず、開いた画面の①ファイルを選択をクリックしてファビコン用に作成した画像を選択します。

画像ファイルを選択したら②Generate FavIcon.icoをクリックします。

選択した画像ファイルが表示されましたね。

違う画像ファイルを見たい時はファイルを選択でさらに画像を増やすことができます。

取り込んだ画像の下に表示されているのが、実際に表示されるプレビューとなります。右側に表示されているのは.gif形式でアニメーションやスクロール表示されるプレビューとなります。

このままでOKであればDownload FavIcon Packageをクリックするとダウンロードが開始されます。アニメーションやスクロールなどの編集を行いたい場合はCustomizeをクリックします。

Customizeを選択した場合の編集方法

まず先にCustomizeを選択した場合の編集方法をお伝えしていきます。

Customizeをクリックすると下に編集項目が表示されます。ページが翻訳されるようであれば大体分かりますが、念のため解説しておきますね。

Customize your favicon:
Add animated favicon	アニメーション用の画像を取得したい場合は、クリックをしてプレビュー表示させておきます。
Add scrolling text and edit animation	テキストを入力してスクロール表示することができます。テキストの色を変更することもできます。
Add iPhone, iPod Touch and iPad icon	iPhone、iPod touch、iPad用のアイコンが追加されます。
Background color	背景色を変更することができます。.png形式などで透過している部分がある場合はtransparent(透明)と入力すると透過して表示されるようになります。
Make image background transparent (corner colors)	背景色のコーナー部分を透明にします。
Add a border around the image	画像の四辺を線で囲みます。色は変更できます。
Convert to grayscale / black and white	画像を白黒写真のようにグレー色に変更します。
Add icon format	表示されている形式をクリックすることで、サイズの違う形式を追加することができます。
Remove icon format	必要のないアイコンを削除することができます。

 

編集が完了したら、最後にDownload FavIcon Packageをクリックするとダウンロードを開始します。.zip形式になっているので解凍して使います。

ファビコンファイルをアップロードする

解凍したファビコンファイルには、.icoファイルや編集した各種ファイルがダウンロードされていますね。

このままではまだ使用することができません。あくまで.ico形式に変換するための作業でした。

ここからファビコンとして表示されるようにするには、ダウンロードしたファビコンファイルをインターネット上にアップロード(http://○○○○○○favicon.ico)する必要があります。

２パターンの方法があるので順に解説していきますね。

サイトやブログからアップロードする方法

簡単です。あなたが使っているサイトやブログからファビコンファイルをアップロードさせてそのURLを取得します。

FTPソフトを使ってアップロードする方法

FTPソフトを起動し、アップロードさせてそのURLを取得します。

この記事では無料で使えるFFFTPソフトを使って解説しています。

ファビコンのHTMLタグをサイトに設置する

最後にあなたのサイトにファビコンのHTMLタグを設置していきます。

場所は内であればOKです。

WordPressであれば、header.php内。無料ブログであれば、HTML編集から行います。

簡単にもしくはを見付けるには、キーボードからWindowsの場合は[Ctrl＋F]、Macの場合は[Command＋F]で検索窓が表示されるようになります。

検索窓にもしくはを入力してEnterをクリックすれば検索した文字に色が付いて表示されるのですぐに見付けることができます。

貼り付けるファビコンのHTMLタグは以下のようになります。

.ico形式、.gif形式とそれぞれアップロードして取得したURLを貼り付けてください。

 

それでは、上記の例を参考に内に貼り付けます。

分かりやすくの真上に貼り付けました。

アニメーションやスクロール表示させたい場合は.gif形式をアップロードしたHTMLタグを貼り付けます。

先にお伝えした通り、.gif形式はFirefoxでしか対応していません。Firefox以外のブラウザからの訪問者への対応は.ico形式と.gif形式のHTMLタグを両方貼り付けておくことでFirefoxでは.gif形式。その他のブラウザでは.ico形式で表示されるようになります。

これでHTML編集の保存をすればファビコン設定は完了となります。試しにあなたのサイトを開いてファビコンが表示されているか確認してみてください。

おまけ

あまり見かけませんが、１つのサイトに複数のファビコンを設置することも可能です。

その場合は画像ファイルをアップロードする前にfavicon.icoの部分をfavi01.icoと名前を変更させてからアップロードさせます。

他に使いたいファビコンはfavi02.ico。さらに使いたい場合はfavi03.icoと名前を変更させてからアップロードさせます。

favi01.ico形式でアップロードしたURLを貼り付け、favi02.ico形式でアップロードしたURLを貼り付け、favi03.ico形式でアップロードしたURLを貼り付け・・

と内に複数貼り付けることで、ページが切り替わるごとにファビコンも切り替わるようになります。ちょっとした遊び心に設定してみるのもいいですね。

［記事公開日］2014/08/01
［最終更新日］2016/07/15