芝浦が好きなので、ずっとここで暮らすことにしたBlog

IT関連の記事のメモ書きです。たまにAndroidとか、PCネタとか、港区芝浦のご近所情報を書いてます

スポンサーサイト

投稿日: --/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Newer

Older

Trackback

FC2ブログリニューアルのメモ1 - favicon画像の変更

投稿日: 2008/12/09(火)
自分用メモを兼ねて、FC2ブログリニューアルTipsを書きます。

まずは、ブックマークやタブバーに表示されるアイコンを変える手順です。

faviconを変更した例

上記はFirefoxでオリジナルのfavicon画像を表示した例です。

左側タブがオリジナルで、右側タブが何もしない時のFC2デフォルトのfavicon画像です。個人的にどうしてもFC2のユニコーン?だかお馬さん画像が好きになれないので、真っ先に変更したい項目でした。

では、作り方をご紹介します。

まずは、アイコン画像を用意します。フリー素材のサイトから拾うか、画像加工ソフトで自作してください。

やろうと思えばWindowsに付属する「ペイント」でも作れます。最終的に16x16のサイズに加工しておいてください。

イラスト・アイコンのフリー素材
http://www.soozai.com/

アイコンの作り方
-ペイントで描くアイコン作成方法・アニメーション素材作成方法など
http://1kb-sozai.com/icon/index.html


僕は、こんな感じのアイコンを作りました。
斜め半分塗りつぶして4Xの文字に影を付けただけですけどね(^^;

4x_logo.jpg

最終的な16x16はこんな感じです。

4x_favicon16.jpg

次は、その画像からicoファイルを作成します。

FavIcon from Pics -- free favicon.ico for your website
http://www.html-kit.com/favicon/

http://www.html-kit.com/favicon/

1. 上記サイトにアクセス
2. フォームの「参照」ボタンを押して画像を指定
3. 「Generate FavIcon.ico」を押す
4. 「Download Favicon」を押す
5. ダウンロードしたzipを開いてfavicon.icoを取り出す

最後に、favicon.icoをFC2へアップします。

6. FC2のファイル管理でサーバに転送する
7. 画像のパスをコピーしておく
8. FC2のテンプレート管理を開く
9. ヘッダタグ内に以下を記述する

<link rel="shortcut icon" href="画像のパス/favicon.ico">

ウチのサイトの場合はこんな感じで記述しています。

<link rel="shortcut icon" href="http://blog-imgs-26.fc2.com/s/u/p/superrush/favicon.ico">


faviconの変更は、簡単な割に目立つのでおススメのデザイン変更ですよ。

Newer

Older

Trackback

FC2Ad

Powered By FC2ブログ. Copyright ©芝浦が好きなので、ずっとここで暮らすことにしたBlog All Rights Reserved

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