TIPS

201412.10.2014
vol.5

FAVICONとWEB CLIP ICONの
実装方法

FAVICONとWEB CLIP ICONの実装方法

こんにちは。デザイナーの寺田です。
今回はサイトを作る際に忘れがちなFAVICONとWEB CLIP ICONについてお話します。
どちらもブランディングないし製品やサービスのアイデンティティを発信するという観点で
とても有効です。
またこれを使うとスマートフォンなどでサイトへ簡単にアクセスできるようになります。


FAVICONとは?

FAVICONって?

サイトのシンボルマーク


サイトを開くとURLやタブの左側に、ロゴマークなどのアイコンが表示されているのを
目にしたことはありませんか?
小さいものですが、ブックマークしたサイトを探すときに判別しやすくなります。
簡単なhtmlと画像作成で実装することができ、FAVICON実装については主流となっています。


Retina対応のFAVICONの作りかた

Retina対応のFAVICONを作ろう!

3つのサイズをつくる


Retina対応の"Retina"とは?簡単にいうと、高解像度のディスプレイのことを指します。
解像度が高いため、今までのサイトと同じサイズの画像だと滲んで見えてしまいます。
そこで大きい画像データを作り、縮小して表示させることで高精細な画像に対応させます。

では、Retina対応のFAVICONの簡単な作り方を
ご紹介します。
まず16×16px、32×32px、48×48pxの画像を作成します。
そして、WebサービスBradiconにお世話になります。
緑色のBrowseボタンを押して画像を選びます。
選ぶときは大きいサイズの画像から選んでください。
全て選択し終えたら、リストにのっている大きい画像をクリックすると、
3サイズのデータが
ひとつにまとまったiconの完成です!


実装方法

簡単!記述を貼付けるだけ!

簡単!記述を貼付けるだけ


<link rel="shortcut icon" href="FAVICONまでのパス/名前.ico" />
上記の記述を<head>タグ内に入れるだけです。
iconを入れた場所の階層を間違えないように注意してくださいね。


次はWEB CLIP ICONの作りかた

WEB CLIP ICONとは?

WEB CLIP ICONとは?


スマートフォンのホーム画面にあるアイコンのことを指します。
設定を何もしないとサイトのキャプチャー画面になります。
アイコンは最短でサイトにアクセスできるツールなので
ちゃんとしたものを作りたいですね!


方法は"画像を用意するだけ"

WEB CLIP ICON作成サービス

WEB CLIP ICON作成サービス


WEB CLIP ICONを作るのは面倒だなって方には、
アイコンを作ってくれるWebサービスで簡単に作成できるのでオススメです!

iphone style icon generator


アイコンを実装する

アイコンの実装

アイコンの入れる場所に気をつけよう


実装はこれまた簡単です!
<link rel="apple-touch-icon" href="アイコンファイル名" />
上記をFAVICONと同じ<head>タグ内に入れるだけです!
ここでの注意点は、作成したアイコンはサイトのルートディレクトリに置くこと。

FAVICONもWEB CLIP ICONも簡単に実装できるので、
サイトを作る際は忘れずに設定してみましょう。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2015
December(2)
November(2)
October(1)
August(2)
July(3)
April(1)
March(7)
February(3)
January(8)

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。