%20--%3e%3csvg%20version='1.1'%20id='レイヤー_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20width='28.9px'%20height='7.3px'%20viewBox='0%200%2028.9%207.3'%20style='enable-background:new%200%200%2028.9%207.3;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{display:none;}%20.st1{display:inline;fill:%23030303;stroke:%23030303;stroke-width:0.25;stroke-miterlimit:10;}%20.st2{fill:%23030303;}%20%3c/style%3e%3cg%20class='st0'%3e%3cpath%20class='st1'%20d='M6,7.1v-5C6,2,6,1.8,6,1.8L5.9,1.9L3.8,4.8H3.4L1.2,2.1L1.1,2c0,0,0,0.1,0,0.2v4.9H0.2V0.3H1l2.6,3.3l2.5-3.3%20h0.8v6.8C6.9,7.1,6,7.1,6,7.1z'/%3e%3cpath%20class='st1'%20d='M8.3,7.1V0.3h3.8v0.9H9.2v2.2H12v0.9H9.2v2h3v0.9H8.3V7.1z'/%3e%3cpath%20class='st1'%20d='M18,7.1l-3.6-4.9c0-0.1-0.1-0.2-0.1-0.2s0,0.1,0,0.2v4.9h-0.9V0.3h0.8l3.5,4.8l0.1,0.2c0,0,0-0.1,0-0.2V0.3%20h0.9v6.8C18.7,7.1,18,7.1,18,7.1z'/%3e%3cpath%20class='st1'%20d='M22.7,7.2c-1.6,0-2.6-1-2.6-2.7V0.3H21v4.2c0,1.3,0.8,1.8,1.7,1.8c0.9,0,1.7-0.5,1.7-1.8V0.3h0.9v4.2%20C25.4,6.1,24.2,7.2,22.7,7.2z'/%3e%3c/g%3e%3cg%3e%3cpolygon%20class='st2'%20points='4.9,3.3%202.5,0.1%202.4,0.1%201.5,0.1%201.5,7.1%202.6,7.1%202.6,2.2%204.6,4.8%204.7,4.9%205.2,4.9%207.2,2.2%207.2,7.1%208.4,7.1%208.4,0.1%207.3,0.1%20'/%3e%3cpolygon%20class='st2'%20points='11,4.2%2013.7,4.2%2013.7,3.1%2011,3.1%2011,1.2%2013.8,1.2%2013.8,0.1%209.8,0.1%209.8,7.1%2014,7.1%2014,6%2011,6%20'/%3e%3cpolygon%20class='st2'%20points='19.6,4.8%2016.2,0.1%2016.2,0.1%2015.2,0.1%2015.2,7.1%2016.4,7.1%2016.4,2.3%2019.8,7.1%2019.8,7.1%2020.8,7.1%2020.8,0.1%2019.6,0.1%20'/%3e%3cpath%20class='st2'%20d='M26.5,0.1v4.3c0,0.8-0.4,1.7-1.6,1.7c-1,0-1.6-0.6-1.6-1.7V0.1h-1.2v4.3c0,1.7,1.1,2.8,2.8,2.8%20c1.6,0,2.8-1.2,2.8-2.8V0.1H26.5z'/%3e%3c/g%3e%3c/svg%3e)
%20--%3e%3csvg%20version='1.1'%20id='レイヤー_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20width='29px'%20height='7.4px'%20viewBox='0%200%2029%207.4'%20style='enable-background:new%200%200%2029%207.4;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23030303;}%20%3c/style%3e%3cg%3e%3cpolygon%20class='st0'%20points='4.9,3.4%202.5,0.2%202.4,0.2%201.5,0.2%201.5,7.2%202.6,7.2%202.6,2.3%204.6,4.9%204.7,5%205.2,5%207.2,2.3%207.2,7.2%208.4,7.2%208.4,0.2%207.3,0.2%20'/%3e%3cpolygon%20class='st0'%20points='11,4.3%2013.7,4.3%2013.7,3.2%2011,3.2%2011,1.3%2013.8,1.3%2013.8,0.2%209.8,0.2%209.8,7.2%2014,7.2%2014,6.1%2011,6.1%20'/%3e%3cpolygon%20class='st0'%20points='19.6,4.9%2016.2,0.2%2016.2,0.2%2015.2,0.2%2015.2,7.2%2016.4,7.2%2016.4,2.4%2019.8,7.2%2019.8,7.2%2020.8,7.2%2020.8,0.2%2019.6,0.2%20'/%3e%3cpath%20class='st0'%20d='M26.5,0.2v4.3c0,0.8-0.4,1.7-1.6,1.7c-1,0-1.6-0.6-1.6-1.7V0.2h-1.2v4.3c0,1.7,1.1,2.8,2.8,2.8%20c1.6,0,2.8-1.2,2.8-2.8V0.2H26.5z'/%3e%3c/g%3e%3c/svg%3e)
- Vol.5
- WEB
- Vol.5
- WEB
- 2014.12.10
FAVICONとWEB CLIP ICONの実装方法
今回はWebサイトを制作する際に忘れてしまいがちなFAVICONとWEB CLIP ICONについてお話します。
デザイナー
Y.T.
はじめに
どちらもブランディングないし製品やサービスのアイデンティティを発信するという観点では、とても有効です。
またこれを使うとスマートフォンなどでWebサイトへ簡単にアクセスできるようになります。
FAVICONとは？
サイトのシンボルマーク
サイトを開くとURLやタブの左側に、ロゴマークなどのアイコンが表示されているのを目にしたことはありませんか？小さいものですが、ブックマークしたサイトを探すときに判別しやすくなります。 簡単なhtmlと画像作成で実装することができ、FAVICON実装については主流となっています。
Retina対応のFAVICONの作りかた
3つのサイズをつくる
Retina対応の“Retina”とは？簡単にいうと、高解像度のディスプレイのことを指します。 解像度が高いため、今までのサイトと同じサイズの画像だと滲んで見えてしまいます。 そこで大きい画像データを作り、縮小して表示させることで高精細な画像に対応させます。
では、Retina対応のFAVICONの簡単な作り方をご紹介します。 まず16×16px、32×32px、48×48pxの画像を作成します。 そして、Webサービス Favicon ジェネレーターにお世話になります。ブラウザ上で利用することができて、画像ファイルをアップロードしてファビコンを作成できるツールです。対応フォーマットは、.jpg（.jpeg）、.png、.gifに対応しています。拡張子が.icoのファビコン用画像を作成してくれます。ファビコン用画像はその場でプレビュー表示できます。生成されるファビコンのサイズは16 × 16pxから256 × 256pxまでの7種類の中から選ぶことができます。 選ぶときは大きいサイズの画像から選んでください。 選択し終えたら、「画像を変換する」をクリックすると、 各サイズのファビコンイメージをひとつにまとまてダウンロードすることができます！
実装方法
簡単！記述を貼付けるだけ
<link rel="shortcut icon" href="FAVICONまでのパス/名前.ico" />上記の記述を<head>タグ内に入れるだけです。 iconを入れた場所の階層を間違えないように注意してくださいね。
次はWEB CLIP ICONの作りかた
WEB CLIP ICONとは？
モバイルのホーム画面にあるアイコンのことを指します。 設定を何もしないとサイトのキャプチャー画面になります。 アイコンは最短でサイトにアクセスできるツールなのでちゃんとしたものを作りたいですね！
方法は”画像を用意するだけ”
WEB CLIP ICON作成サービス
WEB CLIP ICONを作るのは面倒だなって方には、 アイコンを作ってくれるWebサービスで簡単に作成できるのでオススメです！
iphone style icon generator
アイコンを実装する
アイコンの入れる場所に気をつけよう
実装はこれまた簡単です！<link rel="apple-touch-icon" href="example-icon.png" />上記をFAVICONと同じ<head>タグ内に入れるだけです！ ここでの注意点は、作成したアイコンはサイトのルートディレクトリ※1※1階層型ファイル構造における最上階層のファイルの管理情報のこと。に置くこと。
FAVICONもWEB CLIP ICONも簡単に実装できるので、サイトを作る際は忘れずに設定してみましょう。
※1 階層型ファイル構造における最上階層のファイルの管理情報のこと。
TAGS
RECENT POSTS
TRENDING
%20-%20https://sketch.com%20--%3e%3ctitle%3eiconfinder_rss_246005%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='iconfinder_rss_246005'%20fill='%23302f30'%20fill-rule='nonzero'%3e%3cpath%20d='M5.2906221,26.4153571%20C2.37047354,26.4153571%201.77635684e-15,28.7833571%201.77635684e-15,31.7063571%20C1.77635684e-15,34.6293571%202.36783087,36.9973571%205.2906221,36.9973571%20C8.21341333,36.9973571%2010.5812442,34.6293571%2010.5812442,31.7063571%20C10.5812442,28.7833571%208.21341333,26.4153571%205.2906221,26.4153571%20Z%20M3.72880509,13.2169286%20C1.67545175,13.2169286%200.0132133419,14.8792857%200.0132133419,16.9327857%20C0.0132133419,18.9836429%201.67545175,20.6486429%203.72880509,20.6486429%20C10.6948789,20.6486429%2016.3634026,26.3175714%2016.3634026,33.2841429%20C16.3634026,35.335%2018.025641,37%2020.081637,37%20C22.129705,37%2023.7972288,35.335%2023.7972288,33.2841429%20C23.7972288,22.2185%2014.7936576,13.2169286%203.72880509,13.2169286%20Z%20M3.80015713,0%20C1.70187844,0%200,1.702%200,3.80042857%20C0,5.89885714%201.70187844,7.60085714%203.80015713,7.60085714%20C17.914649,7.60085714%2029.3996857,19.0840714%2029.3996857,33.1995714%20C29.3996857,35.298%2031.0989215,37%2033.1998429,37%20C35.3007642,37%2037,35.2953571%2037,33.1995714%20C36.9973573,14.8925%2022.1032783,0%203.80015713,0%20L3.80015713,0%20Z'%20id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
MORE FOR YOU
今日もあなたに気づきと発見がありますように
画面を回転してください