株式会社マリエッタ

透過favicon.ico(ファビコン)の作成

64 views

ブラウザのアドレスバーの左にあるあの野郎。。
そう、、ファビコンっていうちっちゃなやつ。。

フォトショップで過去に作った記憶があったので、

フォトショップでのicon作成を検索してみた。。


書いてあるとおりにフォトショップにプラグインを入れたんだけど

ん??保存の項目にico形式が出てこない・・・。

間違ってないはずなのになー・・・


困った困った・・・

色々調べてみたが原因分からず、、、

困り果てたところにこんなHPを見つけた!!!

「favicon.icoを作ろう!」
http://ao-system.net/favicon/index.php

ここでは自分のパソコンの画像(PNG,GIF,JPG,JPEG)を指定するのみ

16×16,32×32,48×48のマルチアイコン(複数の大きさを1ファイルで保持)を

作ってくれます。


しかも透過に対応しているみたい!!

便利便利

あとは、HTMLのタグの中に

<<span class=start-tag>link</span><span class=attribute-name> rel</span>=<span class=attribute-value>"shortcut icon" </span><span class=attribute-name>type</span>=<span class=attribute-value>"image/x-icon" </span><span class=attribute-name>href</span><span>="</span><A href="view-source:http://sv1.marietta.co.jp/erocube/htdocs/favicon.ico"><font color=#0066cc>favicon.ico</font></A><span>" </span><span class=error><span class=attribute-name>/</span></span>>
と書いて出来上がったfavicon.icoファイルをルートに置くだけ。

階層が違うHTMLファイルには

<<span class=start-tag>link</span><span class=attribute-name> rel</span>=<span class=attribute-value>"shortcut icon" </span><span class=attribute-name>type</span>=<span class=attribute-value>"image/x-icon" </span><span class=attribute-name>href</span><span>="../</span><A href="view-source:http://sv1.marietta.co.jp/erocube/htdocs/favicon.ico"><font color=#0066cc>favicon.ico</font></A><span>" </span><span class=error><span class=attribute-name>/</span></span>>

ってな感じかなー。

ちょっと嬉しかったので自分用メモとお知らせでしたー

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly
Send to LINE