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. 豆鉋と切り屑
    豆鉋ってご存知ですか?掌にちょこんと乗るサイズの本当に可愛らしい鉋です。 [caption i…
  3. 切り抜き作業の後
    綺麗な曲線で木の板を切断する事が出来れば、diyであってもワンランク上の作品を目指す事が出来ますよね…
  4. 吊戸棚にキッチンペーパーホルダーを取付け
    余分な油を吸い取ったり、野菜の水をきったりするのに欠かせないキッチンペーパーですが結構かさばりますし…
  5. ブロアー
    木材加工の際の切り屑対策ですが、皆さまどのようにされていますか? na工房は木工を始めた当初、ホウ…
  6. トラックの荷台で荷物をロープで強く縛りたい時、またアウトドアで木に張力(テンション)をつけてロープを…
  7. 外れ止めをドライバーで緩める
    世の中に出回っている網戸掃除の情報は、基本的に網戸サッシをレールから取り外さない事を前提に取り上げら…
  8. 今日は石粉粘土(ねんど)の紹介です。 今まで特に使用していなかったのですが、これが使い始めると…

スポンサーリンク

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

  1. 切り絵作品「翡翠(かわせみ)」
    以前市販のテキストを使用した切り絵の練習方法を紹介したことがありましたが、いくつか作ると今度は欲が出…
  2. 壁に跳び付くネコ
    前回からの続きでネコの木彫りです。 今回のは「壁に向かって跳ぶ(ジャンプ)するネコ」を木彫りで…
  3. フクロウ(羊毛フェルト)完成
    普段は木工ばかり手掛けているna工房ですが、今回は初めて繊維に取り組みます。羊毛フェルト(フェルティ…
  4. たくさんフクロウのマトリョーシカを作りました
    今回は市販のマトリョーシカキットを用いてフクロウモチーフのマトリョーシカを作ったお話しです。結構フク…
  5. ミニチュア小屋とぽれぽれバイソン
    ミニチュアって良いですよね?今回は市販品のミニチュアにハンドメイドの小屋をコラボさせようという企画で…
  6. 玄関脇のワイヤーネット
    ワイヤーネットって便利ですよね。 ちょっと壁に掛けておくだけで色々楽しめます。ホームセンターや…
  7. 和室の棚(大入れ継ぎで作成)
    皆さまは棚を自作するとしたらどのような材料を用いて作られますか? 例えばホームセンターに行けば…
  8. 今回は木彫りの手順を紹介します。前回は部分的に木を面取する方法を紹介しましたが、木彫りというのはそれ…

リンク

ガーデニングやエッセイ

  1. 今の私の仕事は何なのか?優先順位は何か? よく考えることがあります。悩むというニュアンスではな…
  2. 独りで何をするわけでもなくボーとしているのが好きな私はちょっと変わってるかもしれないが、人影を眺めて…
  3. 金魚鉢に金魚
    夏が美味しいビールの季節であるように、金魚鉢で泳ぐ金魚を眺めるのもまた夏が良い。夏というのはそう、冷…
  4. カフェの風景
    クレーム対応の電話って受けたことありますか?結構精神的にキツイものがありますよね‥体調を崩す方だって…
  5. 溝堀
    趣味の一環で木工や日曜大工等のdiyを始めたのは、今から3年ほど前になります。 柵で庭に目隠し…

リンク

応援お願いします!

RSSフィード登録できます!

follow us in feedly

back number 100

ページ上部へ戻る