2016.07.10 · 技術と道具

ロゴとファビコンをWebサービスで作った

このブログは、もともとINOCCU VISIONというタイトルで長くやっていたのですが、7月からinoccu.comというドメインを使うようになって、タイトルも変更しました。記事も基本的に引き継いでいるのですが、カテゴリーは整理し直しました。

タイトルについては、いちおうKen’s Pubという名前にしているのですが、これは今後、柔軟に変えていくかも知れません。inoccu.comというドメインさえ変えなければ、パーマリンクは変わらないので、タイトルについてはそこまでこだわらなくて良いのでは・・・と思っています。

ロゴはSquarespace Logo

Ken's Pub-logo
こんなロゴです。

Ken’s Pubのロゴは、Suqarespace Logoで作成しました。Squarespace Logoは、海外のサービスでWebブラウザ上でロゴを作成することができます。

Squarespace Logoのサイトで、タイトルを入力するとロゴ作成が始まります。ロゴは、タイトル、簡単な説明、アイコンの3つの要素で構成され、タイトルと簡単な説明は文字列です。アイコンは、キーワードを入力すると関連するアイコンがいくつか表示されるので、その中から選択します。

ロゴの作成は無料で、気に入ったロゴができてダウンロードする場合に課金されます。SquarespaceはオンラインのWebサイトビルダーなので、そのサービスを使用している場合は無料、ロゴ作成のみを行う場合は有料です(Squarespaceの透かしが入っていても良ければ無料でダウンロードできます)。有料と言っても、10ドル程度なので、気に入ったロゴができたのであれば、支払っても良いでしょう。ダウンロードするロゴは横5000pxと高解像度なので、実際は解像度を下げて使用するでしょうが、ジャギーが気になるようなことはありません。

ファビコンはReal Favicon Generatorで変換

ロゴは完全にWebだけで作成したのですが、ファビコンはWebでは変換サービスを使用しました。ドット単位で塗りつぶしていくタイプのサービスはあったのですが、それでは満足いくファビコンが作れそうではなかったので、ローカルPC上のPhotoshopで作成して、Webの変換サービスを使用することにしました。

Photoshopで作成したファビコンは、こんな感じ。260×260ピクセルのPNGファイルです。

favicon

使用したファビコン変換サービスは、Real Favicon Generator。フランスのWebサービスのようです。

ファビコン変換サービスはWeb上に数多ありますが、Real Favicon Generatorの特徴は、260×260ピクセル以上の画像をアップロードすれば、すべてのブラウザ、すべてのOSに対応するアイコン(ファビコン)を作成してくれます。

ファビコンは通常16×16ピクセルのicoファイルですが、たとえばiPhoneのホーム画面にショートカットを作成する場合は57x57px(Retinaディスプレイでは114x114px)のアイコンが必要だし、いろいろな解像度のアイコンを作っておく必要があるのです。

Real Favicon Generatorを使うと、そのさまざまな解像度のアイコンを一括して作ってくれるのです。さらに、そのファビコンを使用する場合のHTMLタグも生成してくれるので、それをWordPressのテーマで出力できるようにすれば、どんなブラウザ、OSが来ても大丈夫なファビコンが設定できます。

ちなみに、Kの文字はこの辺の話と同じ感じで持ってきました。

ということで、このロゴとファビコンにも馴染みをもっていただいて、当ブログを今後ともよろしくお願いします。

2016/07/10 19:14
← 【献本】こどもパソコンIchigoJam はじめてのでんし工…
中小企業の経営者がITの相談をまずITベンダーにするのは是か… →
井上 研一
経済産業省推進資格ITコーディネータとして中小企業のDX・AI活用の現場で伴走支援を行う。「ITCプロセスガイドライン4.0」および「中小企業向けAI活用ガイド」執筆メンバー。著書・講演多数。ITエンジニアとして25年以上の実務経験。AI導入の実務に10年以上携わる。自ら開発したAIサービス「Gen2Go」が北九州発!新商品創出事業の認定を受ける。2026年4月より北九州市立大学大学院マネジメント研究科の学生としての顔も持つ。

本サイトおよびブログに掲載している内容は、特に明記のない限り、井上研一個人の見解に基づくものです。所属・関与する組織、団体、企業、研究会等の公式見解を示すものではありません。