TechRachoのロゴが新しくなりました

既にお気づきになっている方も多いと思いますが、TechRachoのロゴが新しくなりました。
BPSスタッフが技術に関して自由に発言しているイメージから吹き出しをイメージしたデザインになっています。
まだ、不慣れなため不格好な部分もあると思いますが、気に入って頂ければ幸いです。
これからもTechRachoをどうぞよろしくお願いします。

 

さて、web制作でロゴ用意すると、それを使ってfaviconを作成する事も多いと思います。折角ですので、今回はマルチアイコンのfaviconを簡単に作成する方法をご紹介します。

マルチアイコンのfaviconを簡単に作成する方法

faviconはブラウザーでURLの左側やブックマークリストに表示されるアイコンですが、マルチアイコンにしておくとデスクトップにショートカットを作成した場合でもアイコンが表示さる様になります。
それぞれサイズも異なり、

  • ウェブブラウザでの表示は16×16
  • デスクトップにショートカットでの表示は32×32
  • エクスプローラーでのアイコン表示は48×48

となります。

今回は、X-Icon Editorというサービスを利用してfaviconを作成します。

tech0

X-Icon Editorは、既存の画像から4種類のサイズのアイコンを作成する、もしくはドット打ちを行いアイコン作成する事が出来るwebサービスです。
今回は既存画像から作る方法をご紹介します。

まず、アイコンにしたい画像を用意しましょう。 jpg, gif, bmp, png, ico形式のものが対応しています。
今回はあらかじめ背景透過png形式 180x180pxの画像を用意しましたので、これを使います。

tech1

手順

1. importボタンをクリックし画像をアップロードします。

tech2

2. 作成したいアイコンのサイズにチェックを入れ表示具合を調整し、OKをクリックします。

tech3

するとEdit画面になりますので、アイコンの調整が行えます。調整が必要な所があれば調整します。
tech4

3. プレピューをクリックします。

tech5

プレピューをクリックする事で、アイコンの見え方を確認する事が出来ます。
tech6

4. プレピューでの確認で問題が無ければ、1つ前の画面へ戻り、exportをクリックします。

tech7

そうすると、ico形式のマルチアイコンがダウンロードできます。エクスポートボタンをクリックしダウンロードしましょう。
tech9

 

これで完成です。
tech10

あとはTIPSに書かれた通りに設置すれば完了です。
素材さえ用意出来れば10秒もかからないでfaviconを作成する事ができます。
是非お試し下さい。

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

スギヤマ

2012年4月エンジニアとして入社。主業務であるバックエンド開発を担当しがてら、当時会社全体が弱かったフロントエンドも兼務。 元より「絵を描く」「デザインする」事が好きであり、プライベートな時間ではそれらをすることがもともとあり、徐々に社内のデザイナ業務も拾いながら実績と経験を積み上げる。 2017年現在、新たに2名のデザイナが入社し、ともに切磋琢磨中。

スギヤマの書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ