favicon(ファビコン)の素材を自作しよう!ペイントで作れちゃうよ。

  • 2015/9/14
ファビコン(favicon)変換イメージ

ブラウザのタグの部分やブックマーク登録されたサイト名の片隅にたたずむ可愛らしいシンボルアイコン達。あれって一体何だろう?とサイト作り初心者のna工房はしばらく解らずに過ごしてきましたが、どうやらファビコン(favicon)という名称のものらしい。

faviconイメージ

faviconイメージ

こんなやつですね。なんとなく可愛らしい存在ですよね?

どうしてもあれが作りたい!でもどうやって作ればいいの?早速google検索してみました。

たくさん出てきました。いわゆる素材さえあれば勝手にfaviconデータとして変換してくれて、自動的にwebサイトに落とし込んでくれるプラグイン達。なるほどjpeg素材さえあれば何とかなるわけね。

ちなみにna工房はワードプレスを使って作成されています。プラグインとは追加でいろいろな機能を加えるプログラムだと思っていただければ大丈夫かと思われます。

早速ワードプレスに「Favicon by RealFaviconGenerator」なるプラグインをインストールしました。インストールして分かったことを簡単に説明すると「260×260サイズのjpegデータ下さい。後はこっちでやります。」ということらしい。

ところで、素材ってどうやって作るの?これに関してはgoogle検索してもなかなか出てこない。検索方法が悪いのか?しかし、何度も挑戦しているうちに、Windowsに始めから入っている「ペイント」で十分対応可能ということが分かりました。何かデザイン専門のツールを入手しないといけないのかと心配していた自分がちょっと恥ずかしくなりました。

ただ、これができずに四苦八苦している方も世の中にはいるかも知れないと思ったna工房は柄にもなく、ペイントでのfavicon素材作りを記事にしようと思い立ちました。悩んでいる人が無事にこのサイトに辿り着けたら良いですね。

ペイント始めの画面

ペイント始めの画面

はじめにペイントを開くとこのような画面が出てきます。ただ、これだとサイズが違うので変えないといけません。変え方は簡単でした。白枠の端の部分を左クリックでつまんで移動させるだけ。画面の下の方にサイズが出てくるのでそれを見ながら調整するだけです。

サイズ調整

サイズ調整

白い枠がだいぶ小さくなりましたね。後はこの枠をはみ出さないようにデザインするだけ。試しに丸を描いて文字をイラストすることにしました。

faviconデザイン過程

faviconデザイン過程

お、いい感じになってきましたよ。素人なのにデザイナーになった気分です。とりあえず、サイト名であるna工房のnaの文字だけを入れ込みます。

na工房favicon

na工房favicon

できたものをjpeg形式で保存するとこんな感じになります。少し画像が荒いように思いますが、結局小さくなって多少の粗さは気にならなくなりますので安心を。早速さきほど紹介したプラグインにこの素材を落とし込むと次のような画面が出ました。

ファビコン(favicon)変換イメージ

ファビコン(favicon)変換イメージ

あとはあれよあれよという間に自動的に設定終了。

faviconイメージ

こんな感じでタグの左端にファビコンちゃんが出てきました。これでwebサイトに愛着が湧くこと間違いなしです。

今回は日曜大工から離れましたが、自作(diy)であることに変わりはないということで投稿しました。結構楽しかったので挑戦してみてはいかがですか?

 

仲 高宏「na工房」の管理人

投稿者プロフィール

主に日曜大工(diy)やハンドメイドに関するお役立ち情報を発信しています。
電動工具の扱いや、木材の加工方法、便利な補助道具の紹介を記事にしています。
最近は「木彫り」や「切り絵」も始めました。

この著者の最新の記事

リンク

スポンサーリンク

おすすめ記事1(技術系)

  1. 今回は壁掛けタイプの飾り棚の作り方を紹介します。 市販の棚受け金具さえあれば簡単に自作できます…
  2. 金具とステンスリーブに紐を通す
    革で出来たネックストラップが私のお気に入りです。 仕事中は携帯電話を首からぶら下げて行動してい…
  3. 手伝い
    我が家の玄関先はコンクリートの土間が打ち付けられた形で駐車スペースになっているんですが、およそ10c…
  4. LABRICO(ラブリコ)を使用した玄関脇の棚
    素人diyだけどプロっぽく仕上げたい‥ これまで数多くの棚や机なんかを自作してきたna工房です…
  5. 鍵のトラブルは厄介です。 何せ出掛ける時は大体急いでいる時だし、帰ってきて早々鍵が開かなければ…
  6. 部分的に丸みを帯びた面取
    木材を全体的に面取するにはトリマーが便利だという事は何度か紹介しておりますが、今回は趣向を変え、部分…
  7. 精密ドライバーセット
    通常のドライバー(ねじ回し)セットと違ってそれほど出番は無いのですが、持っていて良かったなと思う工具…
  8. 床拭きに挑戦
    ここ数日の話ですが急に床(フローリング)がつるつる滑る様になりました。床の塗装の具合が悪いのか、冬と…

スポンサーリンク

おすすめ記事2(アートワーク系)

  1. アイロン接着フェルトを切抜き、ワンポイント作り
    無地の生地に何かしらの目印、ワンポイント的な何かを付けたいなという時に便利だなと思うものに、“アイロ…
  2. カッターで切り抜き
    今回は珍しくスプレーを使用したdiyです。家にある無地のゴミ箱にシルエットデザインを施そうという試み…
  3. ウェルカムドール
    この度めでたいことに妹が結婚する運びとなり、na工房としてはウェルカムドールを自作して提供することに…
  4. バイスで固定
    何かとdiy好きの中ではネタにされる題材として「天空の城ラピュタの飛行石ペンダント」の再現があります…
  5. 壁に跳び付くネコ
    前回からの続きでネコの木彫りです。 今回のは「壁に向かって跳ぶ(ジャンプ)するネコ」を木彫りで…
  6. 木彫りのネコ(背伸びのポーズ)
    手作り、ハンドメイドって楽しいですよね? また木彫りでかわいい置物作りがやりたくなってきました…
  7. 花瓶と木彫りのすずめ
    周りの余計なモノが被写体と一緒に写真画像に写ってしまう。画像をアップする工程では避けたいポイントです…
  8. 消しゴムはんこ「ふたば」完成
    今回はトレーシングペーパーを用いた「消しゴムはんこ」の作り方を紹介したいと思います。材料や道具も10…

リンク

リンク

back number 50

ページ上部へ戻る