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

プログラミング

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

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

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

このFavicon。

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

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

ChromeデフォルトのFavicon

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

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

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

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

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

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

Faviconを設置する

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

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

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

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

Faviconにする画像

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

様々なファビコンを一括生成
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計

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

favicon generatorに元となる画像をアップロード

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

favicon generatoで各種faviconを一括生成

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

生成されたfaviconをダウンロード

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

ダウンロードしたファイルには沢山のfaviconが

ゆんつ
ゆんつ

沢山の僕がいます

グロテスクだなあ

ゆんつ
ゆんつ

だまれ!

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

・favicon.ico

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

の2つだけです。

沢山画像ファイルがあるけれど使うファイルは2つだけ

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

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が表示されるようになりました。

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

それでは、またー。

コメント