web-dev-qa-db-ja.com

Webサイトにファビコンを追加するにはどうすればよいですか？

私のサイトにファビコンを追加するための最新の標準はどのマークアップですか？標準の画像形式とサイズは何ですか？

htmlimagesfavicon
20
Moshe

すべてのブラウザで動作するには、.icoが推奨されます。サイズに関しては、32x32が最も広く使用されており、16x16も動作します（これはほとんどの場所でブラウザで使用される実際のサイズです）。

また、あなたの質問ではありません、彼らは8または24ビットの色深度でなければなりません。

IWhateverユーザーがサイトをブックマークすることを計画している場合、それは別の<link>であることに注意してください。たとえば、StackOverflowの場合：

<link rel="Apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/Apple-touch-icon.png">

どちらですか：
SO Touch Icon

8
Nick Craver

http://www.favicon.cc/ のようなツールを使用して、画像をインポートしてファビコンに変換するか、ゼロから作成することができます。

その後、ファイルにfavicon.icoという名前を付けてWebサイトのルートに配置すると、ほとんどのWebブラウザーが自動的に取得します。

ただし、次のようにHTMLファイルで明示的に宣言することもできます。

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

ico以外の形式を使用する利点、異なるページで異なるファビコンを使用する、ファビコンを別の場所に配置する、favicon以外の名前を使用するなどの利点があります。

6
Pascal Qyy

http://en.wikipedia.org/wiki/Favicon

4
Maksim Vi.

マークアップIEの完全なドメインhttpパスを使用およびファビコンをドキュメントフォルダーに保持：

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

標準画像形式：

  • .ico
  • 16 x 16ピクセル
2
Marco Demaio

さまざまなデバイス、ブラウザ、OSに対して、さまざまなアイコンを使用できます。たとえば、次のリストは、あなたに刺激を与えるかもしれません。物事の進行に合わせてリストを修正/編集してください。

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="Apple-touch-icon" sizes="57x57" href="/images/icons/Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon" sizes="60x60" href="/images/icons/Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon" sizes="72x72" href="/images/icons/Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon" sizes="76x76" href="/images/icons/Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon" sizes="114x114" href="/images/icons/Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon" sizes="120x120" href="/images/icons/Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon" sizes="144x144" href="/images/icons/Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon" sizes="152x152" href="/images/icons/Apple-touch-icon-152x152.png" />
<link rel="Apple-touch-icon" sizes="180x180" href="/images/icons/Apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/Android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />
1
dankilev

リンクはもう必要ありませんが、便利です。代わりに、favicon.icoという名前のファイル（およびico）をルートに残している限り、ファビコンとして使用されます。

0
dkuntz2

GIMPで.icoファイルを作成するのに少し苦労しましたが、 この投稿 に詳細な指示があります。トリックは、まずGIF形式として保存し、インデックス付きカラーテーブルに変換してから、それをICO形式に変換するように見えます。

0
Don Kirkby