アトム-サイト
[ アトム-サイト ] - 管理人さんのページです。
feed-icon RSS2.0   feed-icon Atom
[ ブラウザ ] 一覧へ
favicon
管理人さんのブログ 2011-09-04 09:45:47

こんな感じで、HPにアイコンを設置してみた。
ブラウザ favicon (.jpg)
やり方は簡単!
ペイントで16×16ドットのPNGファイルを作成する(GIFでもいいです)。
ブラウザ favicon (.jpg)
faviconファイルを生成してくれるサイトにこのPNGを読み込ませる。
http://www.html-kit.com/favicon/
ブラウザ favicon (.jpg)
出来上がったのは圧縮されているので、ダウンロードして解凍。
ブラウザ favicon (.jpg)
<head>タグ内に、
<link rel="shortcut icon" href="/img/atomic-blog-favicon.ico" />
と書いてやると、出る様になります。

面白いサイト
URLを指定してやると、faviconを立体にしてくれます。
http://favicon2dots.com/
自分のはこうなりました。
ブラウザ favicon (.png)
かっこいいじゃん!
※残念ながら、このサイトは閉鎖された様です。

補足
faviconは一度ブラウザで読み込むとキャッシュされるので、置き換えても反映されません。
そんな時は、
インターネットオプションで、
ブラウザ favicon (.jpg)
一時ファイルを消してあげる。
ブラウザ favicon (.jpg)
ブラウザ favicon (.jpg)
そうすると、新しく修正したfaviconがブラウザに反映されます。

透過favicon
四角いfaviconだけでなく、透過のあるfaviconが必要な時は…。
・フォトショップにfavicon用プラグインがある。
・@icon変換 という透過に対応したfavicon作成ソフトがある。
どちらも試しましたが、何故だかうまくいきませんでした。

結局、以下のサイトで透過付きGIFファイルを読ませたあげたら出来ました。
http://ao-system.net/favicon/
最初に紹介したとこは透過にならないので、コチラのサイトの方がいいですね(コチラは、3種類の大きさを内包するアイコンを作る事ができますし…)。

ちなみに、透過付きGIFファイルの作り方ですが、Windows標準アクセサリのペイントでは保存できないので、他のペイントソフトをインストールする必要があります。
フォトショップとかが一般的なんでしょうが、自分はオープンソースのOpenOfficeを使っています(この中の、OpenOffice Drawです)。
メニューバーの[ツール]-[スポイト]で色を指定してあげて「塗りつぶしなし」に置換すればできますね(保存自体は[ファイル]-[エクスポート]でGIFを選択)。


※ 『favicon』に繋がる関連物を 視覚的に探しだせるサイトを作ってみました(よろしければクリックしてみてくださいね)。

 月間ページ閲覧者数:5人

[ ブラウザ ] 一覧へ


<< 2018年6月
2018年6月18日(月)
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

 最近の書き込み

SMTP
  <2016-04-06 12:03:21>
S.M.A.R.T.
  <2015-05-07 08:03:36>
POP
  <2015-04-21 11:33:37>
Linuxコマンド
  <2015-04-21 11:03:04>
アルバートオデッセイ
  <2014-08-04 23:12:12>
トイレ
  <2014-01-31 08:58:16>
(*)調光スイッチ
  <2013-09-30 10:46:11>
(*)調光スイッチ
  <2013-09-20 01:26:34>
(*)調光スイッチ
  <2013-09-17 12:21:11>
(*)調光スイッチ
  <2013-09-15 20:13:59>


 カテゴリー

おでかけ(83)
サッカー(45)
旅(45)
DIY(43)
食べ物(39)
映画(36)
家(35)
季節(34)
健康(32)
地元(29)
本(29)
家族(29)
モバイル(23)
生物(23)
学校(22)
家電(21)
ドラマ(21)
風景(18)
Web(18)
PCハード(17)
通勤(16)
ゲーム(16)
Winアプリ(15)
ブログ(14)
Linux(13)
飲み物(13)
自転車(13)
ゴルフ(11)
ブラウザ(11)
 ・ favicon
 ・ Google Chrome
 ・ opera
 ・ IE ソースの表示
 ・ IE 画像が出ない
 ・ safari
 ・ firefoxで落ちる?
 ・ Yahoo! 動画
 ・ Windows2000
 ・ フィード
 ・ ダウンロード
ネットワーク(10)
javascript(10)
足技(9)
php(9)
会社(8)
感銘映像(8)
税金(6)
空想(5)
VMware(5)
Ruby(4)
データベース(3)
perl(1)