web-dev-qa-db-ja.com

SVGファビコンが機能しない

私は自分のサイトでSVGファビコンを取得しようとしていますが、私が何をしようとも、それはうまくいきません。

次のコードを通常のファビコンの場所に.svgファイルとして保存しましたが、ファビコンパスを.icoではなく.svgに変更すると、何もロードされません。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve"  width="100%" height="100%">

<style type="text/css">
    .shape1 {fill: #DB6B2A;}
    .shape2 {fill: #AE1A31;}
</style>

<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>

<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>

これは、ファビコンを設定するために使用しているコードです。

<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">

.svgコードに問題がある場合、または何かが足りない場合、解決できません。ありがとう

htmlhtml5svgfavicon
49
Sam Willis

SVGファビコンは、Firefox、Safari、およびEdgeでサポートされていますが、Chromeは引き続き問題です： https://caniuse.com/#feat=link-icon-svg

サポートが改善されるまで、単に.pngを使用することもできます。

49
staypuftman

SVGアイコンをサポートしていないブラウザー（現在のところほとんどのブラウザー）のSVGをラスタライズする必要があります。 サポートされていないブラウザでSVGファビコンをレンダリングする方法はありますか？ を参照してください。

5
Stuart P. Bentley

まず、ファビコンに使用しているコードの一部が欠落しているため、どこかに含める必要があります。それは言う：type = "image/x-icon"。したがって、ファビコンの場合、.jpgまたは.gifなどの他の標準画像を使用すると、コードは次のようになります。

<link href="someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1。画像の拡張子については、.jpgが機能します[または、同等の別のファイル拡張子を使用できます。 .gifも機能します。]2。 relの場合、「アイコン」で十分です[ただし、必要に応じて、「アイコン」の隣または前に「ショートカット」という単語を置くこともできます。]

SVGの「ファビコン」の場合、いくつかの理由で少し複雑です。これはオプションですが、最適に機能させるには、SVG画像のサイズを256平方ピクセル（16ピクセルx 16ピクセル）未満にする必要がありますが、SVGは通常スケーラブルであるため、試す直前に高さと幅の両方を16ピクセル以下に設定することをお勧めしますそれらを「ファビコン」として使用するには、高さを16ピクセル以下にするために必要な数値で高さを除算する必要があり、幅も同じです。 、画像全体のサイズをパーセンテージで変更するだけで、正方形の形状を維持したまま、画像全体を大きく歪ませることなく縮小できるはずです。正方形の形状がない場合は、画像を歪ませる必要があります。ファビコンは16x16ピクセルの正方形であるため、正方形に近い形に変換するプロセスの一部です。 「ファビコン」：

<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

上記のようにSVG画像のサイズが既に縮小されている限り、これは機能するはずです。このコードが機能することを示す優れたJsfiddle（私のものではありません）を次に示します。 https://jsfiddle.net/Daniel_Hug/YawSn/ そして、私が説明した最初の方法で動作する従来のファビコンに多くの経験があります。

お役に立てれば！ファビコンの使用方法や設定方法がまだわからないときに、誰かがこれを見せてくれたらいいのにと思います！ :-)

3
Sean Tank Garvey

このように試すことができます

<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

しかし、ブラウザのほとんどはサポートしていません

1
Malith

最適化されたSVGファビコン は100-200バイト程度であるため、外部リクエストを作成しても意味がありません。先に進んで、ページに埋め込みます。そうすることで、画像がリクエストされたときにクッキーが送信されるため、予想よりも大きい外部画像リクエストを保存します。

他の人が指摘しているように、ブラウザーのサポートはまだ素晴らしいものではありませんが、SVG Faviconsは、CSSやJSベースのアニメーションを介したスタイリングなど、PNGではできないことを提供します。

ここに Chrome issue があります。サポートを追加します。2013年以来、ブロッカーによる実質的な進展はありません。

0
Josh Habdas