<仙台高専広瀬アドベントカレンダー><html>webサイトのアイコン作ろう

はじめに

このエントリは仙台高専広瀬アドベントカレンダー14日目の記事です。

webサイトのアイコン作ろう

やりたいこと

webサイト開くとアイコンってあるじゃないですか。 あるとないとで極端に変わるかって言われるとそこまでではないんですけどあったほうが、良さげな感じあるじゃないですか。うん それをやります。

目次

  1. 使うソフトウェア
  2. アイコンを作ろう
    2.1 アイコンの元画像を作ろう
    2.2 アイコンとして出力しよう
  3. 実際のサイトに反映しよう
    3.1 タブのところにアイコンが出るようにしよう
    3.2 (iPhone向け)ショートカットのアイコンを指定しよう

1.使うソフトウェア

まずは何を使うか簡単に書きます。 このブログは基本的にMacユーザーなのでmacを使ってやります。 多分windowsでも同等の動きをするものはいっぱいあるんで全体の流れは共通で、個々のソフトウェアについては対応するものと使い分けていけばいいのかなと思ってます。

  • 元画像作成
  • アイコン出力
    • プレビュー

特に特別なのを使わなくてもある程度の作れます。 実際に作ってみましょう

2.アイコンを作ろう

アイコンを作ります。元になる画像を作るところと実際にicon形式にしていく2つの段階に分けていきます。

2.1 アイコンの元画像を作ろう

まずはKeynoteを開きます。
テーマ選択画面ではテキトーなテーマ選びます。
blackかwhiteにすると一番いい気がします。
それ以外でできないわけではないですが、準備がめんどくさくなります。

2.1.1 スライドの設定

作る前準備です。 最初に開くとこのような画面です。

f:id:poolbooyer:20181214023733p:plain
Keynoteを開いた画面
この画面の"マスターを変更"から"空白"を選択します。
背景は塗りつぶしなし(透過)しておきます。
そして、スライドの形を変えます。
f:id:poolbooyer:20181214023956p:plain
サイズ変更
まずは"書類”メニューから"スライドのサイズ"→"カスタムのスライドサイズ"を開きます。
ここで、サイズを1:1にします。
今回は1024×1024(pt)にしました。
ここからは実際にアイコンを作成していきます。

2.1.2 実際のアイコンを作ろう

まずは大枠を作ります。 図形の"角丸四角形"を挿入します。 そして、大きさの調整をします。 パラメータはこんな感じ

f:id:poolbooyer:20181214024100p:plain
パラメータ
で、背景色は自由です。
後は、中身を入れてきます。
今回は夏に作ったMoney slicerに使うアイコンを作ります。
ここの作るところはオリジナルでいろいろやってください。
角丸四角形の中に収まれば特にルールとかはないと思ってます。
で、今回できたのがこんな感じ
f:id:poolbooyer:20181214024134p:plain
完成したアイコン
これをpng形式で書き出します。
"ファイル"、"書き出す"の"イメージ"を選んでpng形式出力をします。
f:id:poolbooyer:20181214024202p:plain
実際に作成したアイコン

2.2 アイコンとして出力しよう

ここまでに作成したpng画像をプレビューで開きます。
開いたら"マークアップ"をクリックします。
//ここはしなくてもいいかも
最初に"ツール"、"サイズ調整"を開きます。
ここで、実際に使うようの大きさに調整します。
64×64でやるとショートカット用にも使えるので今回はそれで吐き出しときます。
で、"ファイル"の"書き出し"を開きます。
そうすると出力用のダイアログが開かれるのですが、ここで"alt(option)"を押しながら形式を選ぶとデフォルトより多くの形式が選べるようになります。

f:id:poolbooyer:20181214024232p:plain
選べる形式
ここで"Microsoftアイコン"を選ぶことで、ico形式で出力できるようになります。 これで、iconの作成は完了です。

3. 実際のサイトに反映しよう

3.1 タブのところにアイコンが出るようにしよう

3.1.1 htmlの記述を追加しよう

まずはサイトのソースに記述を追加します。 こんな感じのことを追加します。

<link rel="shortcut icon" href="/iconのパス" type="image/vnd.microsoft.icon">

サイトのアイコンはMSの形式らしいのでそこの定義の記述もします。

3.1.2 アイコンを配置しよう

上で記述したパスのところにアイコンのファイルを置きます。 そこまでやった上でブラウザで開くとこんな感じでiconが適用されます。

f:id:poolbooyer:20181214024315p:plain
タブ表示

3.2 (iPhone向け)ショートカットのアイコンを指定しよう

3.2.1 htmlの記述を追加しよう

前述のコードに追加でできるかと思ったんですけどtypeが効いてるおかげでできないので以下の記述を追加します

<link rel="apple-touch-icon" href="/iconのパス" />

これをやったら完成です。

3.2.2 実際に確かめよう

ホームに追加してみます。

f:id:poolbooyer:20181214024346p:plain
追加する画面
f:id:poolbooyer:20181214024402j:plain
実際に追加されたアイコン
良きですね。

参考資料