X-Icon Editorでファビコンを作りました【サイトアイコン作成】



ファビコンとはタイトルの左横に付いているアイコンのこと。
Chrome などのブラウザで開いた時のタブ・アドレスバー、スマホでページをホーム画面に置いた時に表示されます。

ファビコンはオンラインで簡単に作成することができます。

◆X-Icon Editor

文字を入れて作成したい場合は、左側にあるアイコンをクリックします。
色や太さなどを調整しながらブラシや鉛筆機能を使って文字を入れていきます。
直接文字を入れることもできますが上手くできませんでした(日本語OK)。

「Line Tool」と「Brush Tool」を使ってこんな感じに作ってみました・
(ダッサいけど小さい画像なので粗は目立ちにくいかと)

既にある画像をファビコンにしたい場合は、
右にある「Import」をクリックしてアップロードしてから仕上げます。

画像のサイズは右にある「Edit」から指定できます。
「64×64」で良いかと。
作成したら右下にある「Preview」→「Preview your icon」をクリック。

別ウィンドウで開きます。
完成の様子を確認することができて分かりやすい。

これで OK の場合は元の画面に戻って、右下にある「Export」→「Export your icon」をクリックすると「.ico」形式の画像がダウンロードされます。

設置方法と場所

WordPress の場合は指定の場所にアップロード。
HTML サイトの場合は <head>から</head> の間にコードを差し込んで完成!

<link rel="icon" href="favicon.ico">