ロゴなどの要素をデザイン・設定する

デザインテンプレートWEBフォントWEBアイコンを設定してもどうしても自社のロゴやLINEなどの日本に特化した特別なものは自作するしかありません。

LINEなどのWEBアイコンを作成する

自社のロゴなどかなり特殊なもので無ければ殆どの場合「Simple Icons」でSVG形式のファイルで入手が可能です。
https://simpleicons.org/

SVG形式のアイコンを入手したらWEBアイコンを作成します。作成にはFontelloというWEBサービスを使います。
http://fontello.com/

FontelloはアイコンをジェネレートできるWEBサービスでfont-awesomeなどのアイコンライブラリから必要なアイコンをピックアップして「軽いWEBアイコンを作る」というサービスです。
もちろん既存のアイコン以外にもSVGをインポートしてカスタムアイコンを生成することもできます。

使い方は至って簡単で出来上がったWEBアイコンをダウンロードしてソースからfontello.cssを読込むだけです。

自社のロゴやファビコンWEBクリップアイコンなどを作成する

ここまで来て幸いにも自社の社名やロゴがWEBフォントやWEBアイコンで表現可能であればそれを使うのが好ましいです。
しかし大半の場合はAdobe社製のPhotoshopやIllustratorで制作しなければなりません。製品自体も高価で使いこなすのにかなりの日数を要します。
もし印刷物でロゴがあるのならばスキャニングして使う事も検討すると良いでしょう。
あとはロゴとファビコンWEBクリップアイコンのみ制作会社に料金をお支払いして作成して貰うのも手です。

ロゴ制作に当たって

ロゴはデザインテンプレートによってサイズが様々です。またホームページだけでは無く名刺や会社リーフレットなどにも共通で使うものなのでよく検討しなければなりません。

ファビコン制作に当たって

ファビコンには以下の4サイズがありそれぞれpngで作成して4つのファイルをまとめてマルチアイコン化(icoで保存)するのが一般的です。
サイズ 用途
16px×16px IEのタブやブックマーク
32px×32px chromefirefoxsafariなどのタブやブックマーク
48px×48px Windowsのサイトアイコン
64px×64px 高解像度のWindowsサイトアイコン

設置方法は以下の様に記述します。

<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

Webクリップアイコン制作に当たって

Webクリップアイコンはスマホでショートカットを作成した時など様々なシーンで使われます。また機種により表示できる画像サイズが異なるため様々なサイズの画像を用意しなくてはなりません。
例えば16px×16px, 32px×32px, 96px×96px, 57px×57px,…, 144px×144px, 152px×152px, 180px×180pxです。
ただし全部を作成しなければならない訳ではありません。代表的な57px×57px, 72px×72px, 144px×144pxのみっつがあれば十分です。
あとは自動的に必要なサイズに補正してくれます。

設置方法は以下の様に記述します。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon57.png">

コーディング講座」に進む
WEBアイコンの設定」に戻る