オリジナルな「 Favicon 」を表示する

オリジナルな「 Favicon 」を表示する

Faviconは、ブラウザのURLアドレスの前に表示される icon の事です。
但し、iPhone の Safari には表示出来ないです(‥;)
FC2ブログの場合はチェスのような馬のアイコンが付きますが、それをカスタマイズして自分専用のアイコンに入れ替えました。
Web で簡単に作れるサイトも在ります
作成方法は 奇麗に透過させたいので Photoshop を使用しました。
最初にここからPhotoshop のプラグイン「ICO (WINDOWS ICON) FORMAT」をダウンロードしてプラグインのファイル形式にインストールしておきます。
Photoshop で
透過させるために画像のみ選択します
1favicon.jpg
新規でサイズを指定し、カンバスカラーを「透過」にします
そこに先程の画像をペーストし余分なところを切り抜きます。
1favicon1.jpg
実際は 16px X 16px になるので解像度で変更して確認しておきます。
別名で保存を選択しファイル名は「favicon」、フォーマットは「 ICO (Windows Icon) 」にし、次のダイアログで「 Standerd ICO 」を選択し保存します
1favicon2.jpg
FC2ブログにログインし、ファイルのアップロードから先程の「favicon.ico」をアップロードします。
アップロードすると「 http://xxxxx.fc2.com/xxxxxxxxxx/favicon.ico 」の様に表示されるのでこれをコピーしておいて
<link rel=”shortcut icon” href=”xxxxxx” />
「xxxxxx」の処にペーストします。
作成された「<link rel=”shortcut icon” href=”xxxxxx” />」を FC2 のテンプレートの設定からテンプレートの
「</head>」の直前にペーストし更新します。
出来上がりは
1favicon3.jpg
になります。


LEAVE A REPLY

*
*
* (公開されません)