素材

意外と簡単!ファビコン(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サイトにブラウザからアクセスして下さい。

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

CSSでタブ付き強調見出しを付ける方法前のページ

キーワード選定ってどうやるの?脱初心者への第一歩次のページ

ピックアップ記事

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

関連記事

  1. Web力強化

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

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

  2. Web力強化

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. 雑記帳

    【備忘録】JETBOYメール設定、Beckey! 2.0 編
  2. 素材

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

    CSSでタブ付き強調見出しを付ける方法
  4. Wordpress

    【2018年】Lazy Load 設定徹底解説
  5. ASPアフィリ

    【図解】A8.netに登録してみよう
PAGE TOP