0%

Designデザインワークショップ

Posted:2015.12.04

ウェブサイトにファビコンを設定する

ウェブサイトのシンボルとなる小さなアイコン「ファビコン」ですが、あるか無いかでウェブサイトの存在感は大きく変わってきます。今回は実際にファビコン制作のコツからサイトへ設置するまでの流れをまとめてみました。

ファビコンとは?

ファビコンとは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

ウェブサイトにファビコンを設定する

 

 

先ほど書き出したそれぞれのファビコン用画像を、一つにまとめた『マルチアイコン』としてICO形式で保存します。保存するときのファイル名はなんでもOKですが、favicon.icoなどにしておくとわかりやすいです。

※PNGやGIF形式でも表示されますがブラウザに依存するのでICO形式で保存する方がいいです

 

4. サーバーにファビコンをアップロードし、HTMLでリンクします

 

出来上がったファビコンをサーバーの所定の場所にアップロードし、下記のHTMLタグをheadタグ内に挿入します

    
<link rel="shortcut icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon">
    

 

これでウェブサイトにファビコンが設定されました!
小さなアイコンですが、ファビコンがあるとウェブサイトの存在感がアップしますし、見つけてもらえやすくなるというメリットもあります。

ファビコンをデザインする上での注意点

ファビコンは小さいもので数十pxほどのサイズになります。なので複雑なデザインは向いていません。
また、色数が多いとキレイに表示させるのも難しくなります。シンプルな形で使用する色などもある程度絞った方がキレイなものに仕上がるので、デザインを決める際には注意が必要です。

 

 

小さなサイズでも大きな存在感があるファビコンですが、ウェブサイトのブランディングや認知を高めるのにも大変有効です。オリジナリティ溢れるものを設定してみてはいかがでしょうか。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】