素材

意外と簡単!ファビコン(favicon.ico)の設置

普段何気なくブックマークを見ているとリンク名称の脇にアイコンがありますよね。いつか設置しようと思いながらいつもいつも先送りになってしまうアイコン。「ファビコン」ですがインターネット上のサービスを使えば簡単に作成する事ができますので紹介します。


ファビコンって何?聞いたこと無いんだけど・・・。

Favorite icon(お気に入りのアイコン)」という言葉から来る造語です。ホームページにアイキャッチのために設置するアイコンと思って下さい。主に、ブラウザのお気に入りや タブ、スマートフォンでホームページを”ホーム画面”に置いた際に表示されるアイコンなどを指します。

上の画像はアフィリエイトをはじめてみようのファビコンですが、「ア」をモチーフにした簡単なものです。一番小さなもので16×16ピクセルのもので作らなければいけないのであまり難しいデザインはできません。割り切りとバランスが大切です。

ファビコン作成手順

元になる画像ファイルを作り、それを縮小して読めるか確認するを繰り返すだけです。私はgimpで元データを作成し作業を行いました。手順としては以下のとおりです。

  1. 48×48ピクセルで元データを作成する
  2. 32×32ピクセルに縮小し、読めるかを確認する
  3. 16×16ピクセルに縮小し、読めるかを確認する
  4. インターネット上のサービスでfavicon.icoを作成する(ファイル名はfavicon.ico固定です)
  5. ftpでWebサイトのルートにアップロードする
元データの作成

gimpで画像を新規作成しました。48×48ピクセルで背景は透明を選んでおくと良いと思います。

文字の追加で「ア」を追加。フォントサイズを微修正し色を緑にしたものをpng形式で出力します。それを次々縮小し32×32ピクセルと16×16ピクセルを作成します。サイズ感は以下のとおりです。

48×48ピクセル
32×32ピクセル
16×16ピクセル
インターネットサービスでfavicon.icoを作成する

今回「ファビコン favicon.icoを作ろう!」さんのサービスを使ってfavicon.icoを作成しました。

それぞれのサイズの画像ファイルを選択し、[favicon.ico 作成]ボタンをクリックするとアイコンのファイルが作成されます。

ftpでWebサイトのルートにアップロード

ftpでWebサイトのルートフォルダーに favicon.ico をアップロードします。

Webサイトにブラウザからアクセスするとファビコンが反映されます。ごくまれに反映されない場合がありますが、その時はキャッシュをクリアしてからWebサイトにブラウザからアクセスして下さい。

ここまでやったらスマホ用のアイコンもですよね。すみませんそれは別記事でまとめます。

ピックアップ記事

  1. サイトマップをグーグルに登録してクローラーを呼び込む
  2. 低価格レンタルサーバー比較:JETBOY vs ロリポップ
  3. Windows10でHDD不具合、SSDに交換でアクティベーションは必要か?

関連記事

  1. Web力強化

    アイキャッチ画像に使える無料素材サイト

    アイキャッチ画像って自分で作ろうとするとかなり面倒で時間がかかります。…

  2. Web力強化

    撮影ボックスを使って撮影すると綺麗な写真が撮れる

    素材を撮影する時は撮影ボックスを使うと1ランク上の写真が簡単に撮影でき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. アフィリエイトの始め方

    実録:ロリポップライトプラン→JETBOYミニSSDプラン引越顛末記
  2. GoogleAdSense

    【まとめ】GoogleAdSense収益計算と最重要7用語について
  3. アフィリエイトの始め方

    アフィリエイトを始めるときに準備するもの
  4. アフィリエイトの始め方

    アフィリエイトで稼ぐために書くことを考える
  5. GoogleAdSense

    GoogleのAdSenceプログラムポリシーを理解し安定運用する
PAGE TOP