ウェブサイトにファビコンを設定する
最終更新日: Update!!
ウェブサイトのシンボルとなる小さなアイコン「ファビコン」ですが、あるか無いかでウェブサイトの存在感は大きく変わってきます。今回は実際にファビコン制作のコツからサイトへ設置するまでの流れをまとめてみました。
先ほど書き出したそれぞれのファビコン用画像を、一つにまとめた『マルチアイコン』としてICO形式で保存します。保存するときのファイル名はなんでもOKですが、favicon.icoなどにしておくとわかりやすいです。
※PNGやGIF形式でも表示されますがブラウザに依存するのでICO形式で保存する方がいいです
4. サーバーにファビコンをアップロードし、HTMLでリンクします
出来上がったファビコンをサーバーの所定の場所にアップロードし、下記のHTMLタグをheadタグ内に挿入します
[code language="html"]
<link rel="shortcut icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon">
[/code]
これでウェブサイトにファビコンが設定されました!
小さなアイコンですが、ファビコンがあるとウェブサイトの存在感がアップしますし、見つけてもらえやすくなるというメリットもあります。
ファビコンとは?
ファビコンとはFavarite iconの略でウェブサイトのシンボルとなる小さなアイコンのことです。ブラウザのタブやブックマークのリストマークとして表示されます。ウェブサイトの識別や存在感を上げることができ、ユーザーにウェブサイトを印象付けるためのアイコンです。
ファビコンに使用されるサイズ
ファビコンは表示される箇所やデバイスによってサイズが異なります。必ずしも全てを揃える必要はありませんが、近年ではスマートフォンの利用も増えてきていることもあり、できるだけ揃えている方が賢明かもしれません。とりあえずは下記の4サイズがあれば十分です。16px*16px | IEのブラウザタブやブックマークのアイコンで表示される |
---|---|
32px*32px | ChromeやFirefox、Safariなどのブラウザで表示される |
48px*48px | Windowsのデスクトップショートカットアイコンなど |
152px*152px | iOS、Androidのホーム画面用のアイコン |
ファビコンを設置するまでの流れ
ファビコンは表示される箇所によって大きさが異なるため、いくつかのサイズをまとめたICOファイルという形式で保存する必要があります。まずはアイコンをデザインを制作し、ファビコンのICOファイルが用意できたらサーバーへアップロードしHTMLで設定します。 1. ファビコンをデザインする まずはファビコンの元になるアイコンをデザインします。制作はAdobe IllustratorやPhotoshop、Fireworksなどのデザインツールで行いますデザインはファビコンの各サイズ分を作成します。 2. ファビコンのサイズごとに画像として書き出す 各サイズごとに作成したデザインをそれぞれ画像として書き出します。背景を透過にする場合はGIFやPNG形式で書き出します。 3. ファビコン作成ジェネレータを利用してICO形式のファビコンを作成 ファビコンの作成は便利なWEBサービスを利用します。いろんなファビコン作成ジェネレーターがありますがこちらのサイトが分かりやすくてオススメです。 半透過マルチアイコンfavicon.icoを作ろう! http://ao-system.net/alphaicon/index.php
ファビコンをデザインする上での注意点
ファビコンは小さいもので数十pxほどのサイズになります。なので複雑なデザインは向いていません。 また、色数が多いとキレイに表示させるのも難しくなります。シンプルな形で使用する色などもある程度絞った方がキレイなものに仕上がるので、デザインを決める際には注意が必要です。 小さなサイズでも大きな存在感があるファビコンですが、ウェブサイトのブランディングや認知を高めるのにも大変有効です。オリジナリティ溢れるものを設定してみてはいかがでしょうか。sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories