初心者でも簡単にできるFavicon設定

こんにちは、ゆんつです。

ブラウザでWEBサイトを閲覧している時のタブや、スマホでお気に入りのWEBサイトをホーム画面に追加した場合、そのWEBサイトに設定されているアイコンが表示されることがあります。

このようなサイト独自のアイコンを「Favicon」と言います。

このFavicon。

別に未設定でも何の問題もありません。

何も設定しなければブラウザでWEBサイトを閲覧する場合にFireFoxならタブに何も表示されませんし、ChromeはChromeデフォルトのFaviconが表示されます。

でも、ひと手間かけてサイトオリジナルのFaviconを設置しておけば、ブラウザのタブを沢山開いたときでも自分のサイトを見つけてもらいやすくなります。

また、お気に入りに入れた時でも一覧の中から自分のサイトをFaviconの画像を頼りに見つけてもらうことができます。

画像さえ用意すればFaviconの作成と設置自体は難しいものではないので、自分のサイトをPRするためにもFaviconは設置しておいた方が良いと思います。

というわけで、今日は簡単なFaviconの設定方法について書きたいと思います。

ちなみにWordPressを使っていてブログのテーマがCocoonの場合は、とても簡単にFaviconを設定することが出来るのでそちらの記事をご覧ください。

Cocoonでfaviconを設定する

こんにちは、ゆんつです。ブラウザを使ってネットを閲覧していると、タブ左側の部分にそのサイト独特のシンボルマークが表示されます。そのサイトをブックマークした時にも、お気に入り一覧に表示されたサイト名の左側にシンボルマークが表示されます。

Faviconを設置する

まずFaviconにしたい画像を準備します。

ファイルの形式はPNG、JPG、GIFのいずれか。

画像の大きさは正方形で、幅と高さは512x512～700x700の間で設定します。

僕はこんな感じの幅512px高さ512pxの正方形の画像を用意しました。

1枚の画像からワンクリックでマルチアイコンを作成してくれるとても便利なサイトがありますので、そちらのサイトに飛びます。

様々なファビコンを一括生成

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-ch

「画像ファイルを選択」ボタンをクリックして、元となる画像をアップロードします。

Faviconの元になる画像のアップロードが完了したら「ファビコン一括生成」ボタンをクリックすると各種Faviconが自動的に生成されます。

「ファビコンダウンロード」ボタンをクリックしてzipファイルをダウンロード。

ダウンロードしたファイルを解凍すると、ファイルには色んなサイズのアイコンが大量に出来ています。

ゆんつ

沢山の僕がいます

グロテスクだなあ

ゆんつ

だまれ！

沢山ファイルがありますが、使うのは

・favicon.ico

・apple-touch-icon-180×180.png

の2つだけです。

ですので、この2つの画像を自分のWEBサイトの画像を格納しているフォルダにアップロードします。

画像のアップロードが完了したら、HTMLのヘッダ内に以下のコードを記入してfaviconと画像を読み込めるようにしたらFaviconの設置は完了です。


    <link rel="icon" href="favicon.icoがあるフォルダのパス/favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.pngがあるフォルダのパス/apple-touch-icon.png" sizes="180x180">

ブラウザでWEBサイトを確認するとタブにFaviconが表示されています。

そして、このサイトをお気に入りに入れると、一覧に作成したFaviconが表示されるようになりました。

ゆんつ

小さすぎて元画像の面影がほとんどありませんせんね(笑)

Faviconは表示が小さいので、キャラクターをFaviconにするなら「顔だけ」とか特徴のあるパーツだけにしておいた方が無難です。

まあでも、何はともあれこれで世界で一つだけのFaviconが表示されるようになりました。

以上が初心者でも出来る簡単なFaviconの作成と設置方法です。

それでは、またー。

Faviconを設置する

コメント