くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

faviconの作成方法

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である」
Wikipediaより)

 

現在鋭意作成中のウェブサイト用につくってみました。

 

そもそも、なぜfaviconが必要なのか?

  • 目立つため
  • スマートフォンではほとんど検索をせず、アプリやお気に入りからウェブサイトに移動するため、そのシンボルとして必要
  • ファビコンを設定していない場合、同じサーバー内で他のファビコンを探してくるので、今やファビコン設定は必須

 

ファイル形式について

 ICO形式:IEで使われている形式

 その他 GIFPNGもサポートされている

 

今回はICO形式とPNG形式で作ります

 

サイズについて

スマートフォンタブレットの普及化により、20種類以上あると言われる。

Webサイトに必要なfaviconが21個になっていた

 

今回つくるのは3種類

 16×16px(PC用)
 32×32px
 144×144px(スマートフォン用)

 

つくり方

f:id:pleasure10501:20150604171045p:plain

①まず144×144pxのサイズで、イラストレーターやPhotoshopを使って作成

丸や角丸の場合は、拡張子pngにすること。

ファイル名は「favicon.png」にしておく

 

 

②他のサイズはジェネレーターで作成します

 ジェネレーターは有料無料、色々ありますが、
 上の3つのサイズを1つのICOファイルに収めてくれるジェネレーターを使います。

http://ico.bradleygill.com/

 

f:id:pleasure10501:20150604172314p:plain

③「BROWSE」をクリックして、ジェネレーターにかけるファイルを選択する

 

OKを押すと、ほんの数秒で出来上がります

 

 

 

f:id:pleasure10501:20150604172701p:plain

④BROWSEボタンの下に表示されたものをクリックして、ファイルを保存。
この時にはランダムに名前がついているので、「favicon.ico」とファイル名を変更

 

 

⑤これで2種類のfaviconができました。
faviconの置き場所は、imgフォルダ内ではなく、トップページのindex.htmlと同じ階層にします。

 

⑥HTMLへの記述方法  ※IE10以下にも対応できる方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>〜〜〜</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/><link rel="apple-touch-icon" href="touch-icon-png"/>
</head>

 

⑦ブラウザでページを開いて、ブラウザのタブに表示されているか確認しよう。

f:id:pleasure10501:20150604234514p:plain

 

広告を非表示にする