Webデザイン

Favicon(ファビコン)を作成しました

投稿日:2011年4月25日 更新日:

Favicon(ファビコン)は今までも何度か作成したことあるんですけど、画像が荒かったり、背景が透過してなかったりで、なんとなく気に入らなかったので、 思い切って新しく作成しなおしました^^

まず最初に、Favicon(ファビコン)って何?それ美味しいの?Σ( ̄。 ̄ノ)ノってぐらいの人もいると思うので、どのようなものか、簡単な説明からしておきます。

この赤で囲った部分の画像がファビコンというものです。

だいたい、企業のホームページとかだと、その企業のロゴなんかが使われてたりしますよね^^これが使われているサイトをお気に入り(ブックマーク)等に入れると、サイトの名前の頭の部分に、この画像がついたりするので、名前知らなくても「見たことある!」という方がほとんどだと思います。

私が作成しようと思ったときに、オンラインで簡単にファビコンを作成するサイトとかをいくつか使ってみたんですけど、画像の空白部分を透過する方法がわからず・・・。透過GIFとか用意してやってもダメでした。頑張れば出来るかもしれないけど、やり方わからなかったので断念。

んー、困ったなー、どうしようかなーって思ってググッてみたら、ものすごく古いページで「@icon変換」使ったらできるみたいなのを見つけて、「おっ?これはいけるかも??」とか思いつつ、動作環境を見たら「WindowsXP SP2 にて動作確認しています。(95+IE4/98/ME/2000でも動いたとのご報告をいただいています)」って書いてあって、「ちゃんと動くんかな?(ーー;)」って不安になりながらもダウンロード。で、Windows7(64bit)でもやってみたら動きました^^

やり方は・・・

  • 使用するための画像を16×16のビットマップ形式で用意
  • @icon変換で開く
  • 「編集>透過マスクの編集」を開く
  • 色から自動生成のボタンを押して、透過したいところをクリック
  • 「ファイル>単独aiconとして保存」を選択して保存

簡単に書くとこんな感じです。

まあまあ納得いく感じで作れたので、しばらくは今回作ったのでいこうかなぁと思います^^

-Webデザイン
-,

執筆者:

関連記事

no image

Googleアドセンスのクリック測定もできるアクセス解析

アクセス解析でクリックを測定 ホームページやブログサイトを運営してい …

WordPressに『この記事を読むのに必要な時間の目安』を入れてみた

この記事読むのにどれぐらい時間かかるんだろうなーっていう目安を1つ1 …

no image

403エラーページを自作する方法

403エラーページを自作する方法って書きましたが、404でも、500 …

no image

Movable Type 5.0 RC 1・CKEditor・MultiBlogなどを使ってみた感想

Movable Type 5.0のベータ版のBeta 1~Beta …

no image

Movable Typeでcron使って記事を日付指定で予約投稿する(heteml)

まず、シェルスクリプトというファイルをメモ帳などで作成します。 #! …