サイトのアイコンサイズってどれくらい何だろう？
サイトのアイコン、通称ファビコンの制作の仕方についてわかりやすく解説し、気になるサイトのアイコンを制作するときの画像サイズ、ワードプレスでの設定方法も手順をふまえて説明します。
しんしゃこんにちは、しんしゃです。
サイト制作において、画像サイズで困ることってありますよね。
インターネットを閲覧しているときに、ブラウザのタブやページをブックマークをするときに、ページ名と一緒にアイコンが表示されるときがあります。
そのアイコンを元にページを認識していることもあるかと思います。
このアイコンのことを「favorite icon」といい、「favicon」と呼ばれています。
このブックマークに表示されたアイコンを見て「自分も設定したい」と考えたことありませんか？
そこで今回は、サイトのアイコンについて、作り方や設定方法を解説します。
- サイトのアイコン(ファビコン)の制作の仕方
- サイトのアイコンを制作するときの用意する画像サイズ
- ワードプレスでの設定方法
今回の記事は、以下のような人に向けた記事となっています。
- サイトのアイコンを作りたい人
- 作ったアイコンを設定したい人
- 使いたいアイコンを設定したい人
- サイトを本格的にweb活用したい人
この記事を読めば、サイトにあなたの好みの種類のアイコンを設定できます。
自分の好きなアイコンにすることで、自分のサイトに自信がつくこともあるかもしれません。
また、これからサイトを制作する人へ向けた、アイコンを設定するメリットや、法人利用を前提としたときの注意点も紹介しています。
サイトのアイコンとは
サイトのアイコンとは、わかりやすくいうと「シンボル」になります。
例えば、企業にはロゴマークがあります。マクドナルドは黄色いMの文字、Twitterは青い鳥みたいなマークのことです。
そういったシンボルがあれば、何となく「このマークはこのページだな」とユーザもイメージがしやすくなります。
サイトのアイコンは、さまざまな場所で表示されます。
どのようなところでアイコンが表示されるのかは以下の通りです。
- ブラウザのブックマーク
- ブラウザのタブ
- デスクトップへのショートカット
- ホーム画面へのショートカット
- スマホの検索結果
また、サイトのアイコンやファビコンを設定したからといって、SEOの効果になるということはなく、webサイトの評価が上がることはありません。
サイトのアイコンを設定するメリット
サイトのアイコン設定することは、サイトを構築する上で必須ではありません。
実際に設置していないサイトはいくつもあります。急いでサイトを公開したいときは、後回しにしてもかまいません。
サイトにはアイコンを設定するメリットがあります。
- ユーザが判別しやすくなる
- ユーザの記憶に残りやすくなる
- ユーザにサイトの信頼性をもたせる
アイコンはあなたにとっては必要ないかもしれませんが、ユーザにとってはこれだけの価値があります。
設置しておいたほうが良いでしょう。
サイトのアイコンを作るために行うこと
メリットが整理できたところで、サイトのアイコンを作成する準備を始めていきます。
設定ためのアイコンの素材データが必要です。
企業のロゴデータがある場合は、そのままサイズを加工し、使用すれば良いので新たにデザインを考える必要はありません。
アイコンのデザインと企業のロゴマークが違うとユーザが困惑するかもしれません。
ない場合は先にロゴマークを作ります。
企業向けの場合は、プロのデザイナーに依頼しても良いかもしれません。
個人のサイトやブログのアイコンの場合は自分で準備しても良いでしょう。
サイトのアイコンを設定するときに注意すること
アイコンのデザインには使いやすいもの、使いにくいものがあります。
作ってから後悔してしまってはもったいないので、ここからは実際に作るときの注意点を解説していきます。
作るときに注意したい点は次のようなときです。
- 複雑なデザインは非推奨
- 画像は正方形を使用する
- Apple製品向けにも対応できるようにする
ロゴが文字だけの場合や、複雑なデザインは控えるようにしましょう。
ホームページのアイコンが表示される場所は比較的小さなところが多く、せっかくのデザインが潰れてしまい、何と書いてあるか読めなくなるからです。
サイトのアイコンは正方形で表示されるのが一般的なので、制作段階から正方形で作成するようにしましょう。
また、iosのsafariではアイコンの角が丸く表示されます。
そのため、サイズにきっちりしたデザインで作成した場合、角が削れてデザインが崩れてしまいます。
制作するときは全体的に余白を作っておきましょう。
サイトのアイコン制作方法
ここからは、サイトのアイコンを作る方法を説明します。
- 自分の扱う画像編集ソフトを準備する
- サイズとファイル形式を把握する
- 画像編集ソフトでデザインを描く
- リザイズをして調整する
- ファイル形式を変更して保存する
手順①：自分の扱う画像編集ソフトを準備する
まずはソフトを準備します。
- 「Adobe Illustrator」「Adobe Photoshop」などのグラフィックツール
- 「favicon.cc」「Favicon generator」などの拡張子「ico」に変換するツール
いつも使っている画像編集ソフトで構いません。無料のものでも十分です。
手順②：サイズとファイル形式を把握する
アイコンとファビコンの画像には2つの画像形式があります。
どちらの画像アイコンも「512px × 512px〜700px × 700px」のピクセル画像で制作しますが、最終的にそのサイズにリザイズすればいいので、制作段階では正方形であればどのサイズでも構いません。
- favicon.ico
- apple-touch-icon.png
favicon.ico
favicon.icoは拡張子「ico」で、用途別に自動的にリザイズされます。
- IE：16px×16px
- Chrome・Firefox・Safari：32px×32px
- Windows：48px×48px
画像1つで3つの役割を兼ねるため、複数のサイズを作る必要はありません。
apple-touch-icon.png
apple-touch-icon.pngは拡張子「png」です。
iPhoneやiPadなどのIOSやAndroidのホーム画面に使われます。
サイズは180px×180pxの1サイズだけで用意します。
WordPressでサイトを制作した場合は512px × 512pxのpng画像1つだけでも設定できますが、この設定をしてもスマホのショートカットアイコンには適用されません。
適用したい場合は上記のサイズ分を用意しましょう。
手順③：画像編集ソフトでデザインを描く
用意していない人はここでアイコンのデザインを描きます。
自分に合った画像編集ソフトを使ってください。
手順④：リザイズをして調整する
手順②のところで説明した画像サイズにリサイズします。
手順⑤：ファイル形式を変更して保存する
それぞれのアイコン画像を保存して完成です。
サイトのアイコン設定方法
実際に設定していきます。
- ルートディレクトリに画像をアップロードする
- headタグ内にHTMLを記述する
- WordPressで直接設定する
ルートディレクトリに画像をアップロードする
ルートディレクトリに画像をアップロードします。
作成した2つの画像をアップロードするのですが、ここで2点注意が必要です。
1つ目は名前を変えないこと。
2つ目はルートディレクトリ以外に保存しないこと。
これらの点に気をつけてください。
headタグ内にHTMLを記述する
headタグ内にHTMLを記述するのですが、難しいプログラミングは必要ないので安心してください。
以下のコードを<head></head>タグ内へコピペするだけです。
この方法ならルートディレクトリ以外に保存しても構いません。
- アイコン
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">- ファビコン
<link rel="icon" type="image/x-icon" href="./favicon.ico">WordPressで直接設定する
WordPressで構築した人は簡単に設定できます。
用意したpng画像を管理画面から「外観」→「カスタマイズ」→「サイト基本情報」を開きます。
「サイトアイコン」を指定できるところがあるので、そこでアップロードしてください。
スマホのショートカットアイコンに適用させたい場合はheadタグ内に上記のHTMLを記述してください。
最後に
今回はサイトのアイコンの制作の仕方、およびワードプレスでの設定方法を解説しました。
- サイトのアイコンはユーザの認識を向上させる手段
- サイトのアイコンは、ブックマーク、タブ、スマホの検索画面に表示され、サイトを表すシンボルであり、「アイコン」や「ファビコン」と呼ばれる
- サイトのアイコンは設定するほうが良い
- サイトのアイコンを作る際は、アイコンに設定するイメージの著作権に注意し、自分のサイトだとすぐにわかるようなシンプルなアイコンが望ましい
- サイトのアイコンを自作する場合は「無料の画像編集」というツールもあり、こちらで作るのもおすすめ
Webサイトのシンボルとなるファビコンは、表示サイズは小さいですが、ユーザビリティに大きな影響を与えるため、まだ設定されていない人はぜひ本記事を参考にしてみてください。
素敵なデザインでご自身のサイトを飾りましょう。
▼関連記事
以上