favicon.icoの背景を透過タイプにできますか

このQ&Aのポイント
  • Mac OS 10.5.8、Firefox3.5.4、Safari4.0.3でのfavicon.icoの背景を透過させる方法について
  • Photoshopで16px角でデザインしたfaviconを作成し、Generate Favicon.icoツールを使用して背景を透過させる方法について
  • アップルやATOKのウェブサイトのように背景を透過させたfaviconを作成するには、適切なツールを使用する必要があります
回答を見る
  • ベストアンサー

favicon.icoの背景を透過タイプにできますか

Mac OS 10.5.8 ブラウザ Firefox3.5.4、Safari4.0.3 faviconを設定した際、16px角いっぱいいっぱいのベタな柄(例1)なら問題ないのですが、(例2)のように、背景を透過させたい場合、どのようにfaviconを作ればよいでしょうか。どうしても背景が白になってしまいます。 ちなみに、今の作り方は、Photoshopで16px角でデザインしたものを「FavIcon from Pics 2.0」のGenerate Favicon.icoを利用してサーバーにアップロードしています。 http://www.html-kit.com/favicon/ (例1) アップル http://www.apple.com/jp/ (例2) ATOK  http://www.atok.com/

noname#234952
noname#234952
  • HTML
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
noname#98762
noname#98762
回答No.1

透過させるfaviconであればこちらで。 http://ao-system.net/favicon/ 透過部分がある256色以下のPNG、またはGIF画像を指定してあげればOKです。 またPhotoshopのバージョンにもよりますが、わざわざサイトを通さずともPhotoshopから.icoが出力できるプラグインがありますので、そちらを利用しても良いでしょう。 http://2xup.org/log/2006/04/28-2323

noname#234952
質問者

お礼

わかりやすいお答えをどうもありがとうございます。 おかげさまでうまく透過faviconを作ることができました。

関連するQ&A

  • テーブル背景のpng画像を透過したい

    テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。  <table>   <tr>   <td background="(png画像URL)">    ここに文字   </td>   </tr>  </table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。(ちなみにpng-24です) WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。 私はIE6.0でも透過されるように表示させたいのです。 欲を言うと、MacのSafariでも透過させたいです。 一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、 <スタイルシート指定部分> .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } </スタイルシート指定部分> <画像部分>  <span class="ail">  <img src="(png画像URL)">  </span> </画像部分> で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。 他にも色々な方法を検索したのですが有効なものが見つからず、、、 そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…?というところまで考えてしまいます。 もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。 この部分だけクリアできれば、Webサイトも完成します。 切実に宜しくお願いします。

  • アイコンの背景色を操るには?

    WIN Xpでbmp→icoと単純にアイコンを作ってみました。 プレビューで見てもbmpの時点でどのソフトで開いても、きれいにできているのにショートカットアイコンの変更・登録をしてみるとバックが真っ黒のやつがあります。 きれいに出来ているものとプロパティの比較をしてみましたが、32×32ピクセル、解像度96dpi、8ビット、フレーム数1と両者全く同じです。 透過色がいけないのかと、べたに塗ったりしましたが、絵柄のアウトラインが少し白く縁取りされた程度の変化です。(白地に黒のドット絵なんて最悪!) どうすれば背景の色をコントロールできるのでしょうか? また、32×32の中に15×15ぐらいの絵をぽつんと置いて作ったものはアイコンの変更をすると絵が32×32の枠に目いっぱい拡大されてしまうようです。 アイコン作りは初めてで、できるだけ既存のツールで簡単に出来る範囲で、と思っています。 アドバイスよろしくお願いします。

  • favicon.icoが無い

    お気に入りのアイコンがeマークに変わってしまいます。 過去の質問から、「インターネット一時ファイルの中のfavicon.icoを・・・」との回答を読んで探してみたんですが、favicon.icoが無いんです。。。 なぜなんでしょう??? NEC LC7006 XPです。

  • ファビコンの画像がうまく表示されないくて困っています。

    下のサイトを参考にしてトップページにファビコンの画像が出るように したいと思って試しに使用例をコピーペーストしたのですがうまく行かないです。 ファビコンの画像拡張子もicoで間違えてないのですが http://www.tagindex.com/html_tag/page/link_favicon.html どうしたらいいのでしょうか? 詳しい方教えてください。

  • favicon.ico

    CGIファイルでfavicon.icoでお気に入りアイコンを 乗せようとしましたが、エラーになりました。 記述は以下です。 sub do_read { print "Content-type: text/html\n"; print "\n"; print "$doctype\n"; print "<HTML>\n"; print "<HEAD>\n"; print "$contenttype\n"; print "<TITLE>$title</TITLE>\n"; print "<LINK REL="SHORTCUT ICON" href="favicon.ico">\n"; print "</HEAD>\n"; :::::::::::::::::::::::::::::::::::::::: print "<LINK REL="SHORTCUT ICON" favicon.ico">\n"; perlではfavicon.icoは使えないのでしょうか? 使えるとすればどのように記述すればよいのでしょうか?

    • ベストアンサー
    • Perl
  • favicon.icoは有効ですか?

    gooの無料ホームページで、favicon.icoは有効ですか? 今日転送しましたが、どうも表示されないようなのです。 他のサイトにも転送しましたが、そちらでは表示されています。 もちろん、キャッシュはクリアして試していますし アイコンの作り方にも、問題は無いと思います。 表示されるには、時間がかかる等の問題があるのでしょうか? また、gooの無料ホームページでfavicon.icoがちゃんと 表示されているサイトがありましたら、お教え下さい。 よろしく、お願い致します。

    • ベストアンサー
    • HTML
  • HP作成 HTML CSS 背景 重ね合わせ

    HPを作成していて、わからないことがあります。 HP全体の背景を画像にし、bodyの部分の背景をさらに画像にして、画像を重ねた形でHPを作りたいと考えました。 htmlファイルを作成し、自分のPCからhtmlファイルをブラウザに開いたところ背景がしっかりと表示されました。 しかし、htmlファイルをアップロードし、HPを開いたところ、一番奥の背景の画像が反映されませんでした。 どうすれば反映されるのか教えていただきたいです。 CSSです。 html{ background-image:url(http://pomo.vis.ne.jp/bg/corkboard/bg_corkboard200_04.jpg); } * { padding : 0px ; margin : 0px ;} #my_body { margin: 5px auto; width : 900px ; background-image:url(http://hide.kanari.info/sozai/ico/memo001/kabe.gif); } #my_header { width : 100% ; height : 110px ; border-bottom : 2px solid #000000 ; padding-top:10px; } #my_navigation { float : left ; width :188px; height:1500px; border-left : 1px solid #000000; border-right : 1px solid #000000; } #my_contents { float : right ; width :709px; height:1500px; border-right : 1px solid #000000; } #my_footer { width : 100% ; clear : both ; border-top : 1px solid #000000; } html要素の中で、一番奥の背景を設定しています。 body要素の中に、二番目の背景を設定しています。 HTML要素の中に背景を設定すると適応されないのでしょうか? アップロードして、背景を正しく表示される方法を教えてください。 HPのURLです。 http://10t4047f.web.fc2.com/ よろしくお願いいたします。

    • 締切済み
    • CSS
  • CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。

    テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • gif画像でたまに背景がグレーになってしまいます。

    はじめまして。 現在、ホームページの画像を作成しています。 photoshopで作成しているのですが、「web用に保存」でgifでしたところ、背景に色がついてしまうときがあります。 ちなみに、背景に色がついてしまうときはかなり小さい範囲の背景を残した時です。 たとえば、四角の枠に画面いっぱいの角丸長方形を作成したときの角の部分などです・・・ これはphotoshop側の問題なのでしょうか? それともWEB表示上の問題なのでしょうか? また、1px単位の境界線を引いた時もカーブがかかっているとかなりギザギザに表示されるときとされないときがあります。 同じレイヤースタイルのものを文字だけ変えて画像にしたときなどにも起こるのですが、これも原因不明で困っています。 どなたか原因と解決方法に心当たりのあるかたはどうかよろしくお願致します。

  • CSSを使って、背景色をブラウザの縦100%につづかせたいです。

    こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100%になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 (ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。) --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100%; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>

専門家に質問してみよう