一般社団法人 全国個人事業主支援協会

COLUMN コラム

WEBサイトのfavicon(ファビコン)について書かせていただきます。

faviconはご存知でしょうか?

WEBサイトをパソコンのブラウザで開くと、タブの左端に表示されている小さな画像アイコンです。
サイトを目立たせることにも役立ちます。

ただしこの画像はWEBサイトで故意に設定しないと未設定のままになります。

今回は、このfavicon画像の作成方法について書かせていただきます。

【favicon画像の作成方法】

※今回は既にお持ちの画像をアイコン化する手順を紹介します。
※Windowsで無料ツールを使って簡易的に画像を作成する手順になります。

①画像を正方形にする
Windowsに元々インストールされている「Paint」ツールを使用します。

1)ホームタブの選択をクリック
2)切り取りたい画像の範囲を選択
3)ウィンドウ下部にピクセル数が表示されるため、正方形になる大きさに範囲指定
4)コピーして別のPaintウィンドウに貼りつけ保存

※少々コツがいる作業になります。別のツールを使うともう少しやりやすいかもしれません。

参考サイト

【初心者向け】商品登録に最適!商品画像を"正方形"にしたい(ペイント利用)

②画像サイズを変更

faviconアイコンは64px×64pxのサイズに変更する必要があります。

1)「画像を縮小する!」サイトで希望のサイズに変更可能なため、以下のサイトにアクセス
https://resizer.myct.jp/
2)画像サイズ選択のラジオボタンエリアにて、テキストボックスに「64」、単位を「px」にセット
3)「縮小する!!」ボタンを押す
4)しばらくすると、「 全ての画像をZIP形式でダウンロード」

また、iPhone、Andoroid用のアイコンは別のサイズで作成する必要があるため、詳細については以下の参考サイトをご確認ください。
参考サイト

スマホ向けのファビコンを設定する

③アイコンファイル(icoファイル)作成方法

フリーソフトの「@icon変換」を使用します。

1)「@icon変換」を起動
2)画面左ペインに変換したい画像をセット(開くボタンから選択できます)
3)ツールバーの「単独アイコンに保存」ボタンを押下

参考サイト
https://qiita.com/Kosen-amai/items/4700100342c76f9fda78

今回の方法は一例ですので、他にも効率的なやり方があるかもしれません。

参考になれば幸いです。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア