スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/19-f21c3db5

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

ファビコンの作り方と設定方法

 

2014.09.16

ファビコン(黒)
ブラウザのタブとブックマークにオリジナルのアイコンを表示したいと思って
ファビコン(favicon)を作ってみたっ!!

そして、せっかくなのでタイトルロゴっぽくページ最上部にもボタンみたいに埋め込んでみた^^;  ロゴ?の部分が数字の「9」にしか見えないけど...
これはブログタイトル「INTEREST」の頭文字「 I 」を「Milano LET」と言うフォントで書いた物で、数字の「9」ではありません...w

「ファビコン(Favicon)」とは、Webブラウザのアドレスバーやタブ、それにブックマーク(お気に入り)やショートカット等にも使われるアイコン画像で、“favorite icon”の略。 元々は「Internet Explorer」の機能の一つだったが、現在では他のほとんどのWebブラウザでも利用できるようになっていて、一般的には「16×16px」のICO形式が用いられるが、ブラウザによってはGIF形式やPNG形式も利用可能。

ファビコンとは?
Google Chromeで、幾つか代表的なサイトを見てみるとこんな感じ →
タブのタイトルと、ブックマークに付いてるアイコンがファビコンで
このアイコンは自分で好きに作る事が出来て、簡単に表示出来ます。 

そして、オリジナルのファビコンがあると他のサイトと区別しやすくなるので結構実用的。特に沢山のタブを開いてる時なんて、ページのタイトルとかタブで見えないしね^^;



【ファビコンの作り方と設定手順】

  1. 1.ファビコンに使う画像を用意する
  2. 2.「.ico」形式に変換してマルチアイコンを作る
  3. 3.「.ico」ファイルのアップロードとhead要素内への書き込み


1.ファビコンに使う画像を作る


まずは、ファビコン(Favicon)で使う画像を、画像編集ソフト等を使って用意します。
どんな感じにするかは個々のセンス次第ですが、ロゴや良いネタが無いって場合は単純に●や■に色を付けるだけでも良いと思います。
また、画像のサイズはこの後の手順で自動的にサイズの調整がされるので基本的には何でもOKですが、内容次第では、自動で縮小された時に画質が乱れたりする場合もあるようなので、そんな場合は16×16px、24×24px、32×32px等、サイズ毎に画像を用意しておく方が綺麗に仕上がります。
一番基本のサイズは「16×16px」でとにかく小さくて、繊細な表現は見え辛くなるので、それを考慮して作ると良いですね
そして、画像のフォーマットは「.jpg」「.gif」「.png」等でOKです。
※この後の手順で、最終的にマルチアイコンに出来る「.ico」に変換します。





2.「.ico」形式に変換してマルチアイコンを作る


上記で作った画像を、複数サイズのアイコンをまとめて1つのファイルに収められる「.ico」形式に変換してマルチアイコンにします。
そうする事によって複数サイズのアイコンを用意する場合でも1つの「.ico」ファイルがあればOKです。
複数サイズのアイコンを用意するのは、使われる場所によって「16×16px」「24×24px」「32×32px」等、表示されるアイコンの大きさが異なる為で、綺麗に表示する為には少なくともその3サイズを含む「.ico」ファイルを用意しておくと良いです。

その「.ico」形式のアイコンファイルは、ソフトを使ったり、サイト上で手軽に作成出来ますが、その中でも操作が簡単で、作成したアイコン(ファビコン)をプレビューで確認出来る下記のサイトが便利です。

favicon.icoを作ろう! ‐ 16x16px、32x32px、48x48pxのマルチアイコンが簡単に作れます。
x-icon editor ‐ 英語表記ですが、読込んだ画像の修正も可能で4種類のマルチアイコンが作成可能。

※両サイトとも、それぞれのサイズごとに画像を指定出来ます。

「x-icon editor」の編集画面
ちなみに私は「x-icon editor」で「.ico」ファイルを作ったのですが、その際の編集画面が右の画像です →
「x-icon editor」の方では読み込んだ画像の修正も可能なので、プレビューを見てから、修正したい時などに便利です。また右の画像では一番大きなサイズのアイコンだけ表示される内容を変えてます。





3.「.ico」ファイルのアップロードとhead要素内への書き込み


上記のサイトで「.ico」ファイルを作ると、ファイル名は「favicon.ico」となってると思います。
通常は、この「favicon.ico」を自分のサイトのルートディレクトリにアップロードすれば、自動的にファビコンと認識されるので基本的には、ファイル名は変えずそのまま使用します。

しかし、ルートディレクトリにファイルが置けない場合や、ページごとに違うファビコンを表示させたい場合はHTMLのhead要素内(<head>~</head>内)にlink要素を使ってファイルの場所を指定します。
※FC2ブログでファビコンを表示する場合は、この方法になります。
管理画面の「ファイルアップロード」で「favicon.ico」をアップロードして以下の記述をします。

<head>
<link rel="shortcut icon" href="http://○○○/favicon.ico"> 
</head>
※http://~の部分はアップロードした「favicon.ico」のURLです。
例えば、私の場合は「http://blog-imgs-68.fc2.com/i/n/t/interest2014/favicon.ico」
また、この方法の場合は「favicon.ico」以外のファイル名でも使用出来ます。

以上の手順でファビコン(favicon)が表示されると思いますが、反映に多少時間が掛かったりする場合もあります。 そんな時は、ページの再読み込み(リロード)をしたり、キャッシュを削除してみてください。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-16 | 画像系 | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/19-f21c3db5

「ファビコンの作り方と設定方法」へのトラックバック

- TrackBack -


「ファビコンの作り方と設定方法」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。