web-dev-qa-db-ja.com

Webサイトのロゴをブラウザタブのアイコン画像にするにはどうすればよいですか。

ブラウザタブのページタイトルの横にある画像 - ここで画像をリンクする方法を教えてください。

htmlfavicon
86
jay

その画像は ' favicon 'と呼ばれ、小さな正方形の.icoファイルです。これは標準ファイルですファビコンのタイプ。 .pngまたは.gifも使用できますが、互換性を高めるには標準に従う必要があります。

Webサイトに設定するには、次を行う必要があります。

  1. ロゴの正方形の画像（できれば32x32または16x16ピクセル、最大サイズ*がない限り）を作成し、.icoファイルに変換します。これは、Gimp、Photoshop（ plugin の助けを借りて）、または Favicon.cc または RealFaviconGenerator のようなWebサイトで実行できます。

  2. 次に、2つの設定方法があります。

    A）index.htmlという名前のWebサイト（favicon.icoの横）のルートフォルダー/ディレクトリに配置します。

    または

    B）次のように、サイト上のすべての<head></head>ファイルの.htmlタグ間でリンクします。

    <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

任意のWebサイトからfaviconを表示する場合は、www.url.com/favicon.icoと書くだけで（おそらく）表示されます。 Stackoverflow's faviconは16x16ピクセルであり、 Wikipedia は32x32です。

*：ファイルサイズの制限がないブラウザの問題さえあります。ファビコンが非常に大きいブラウザを簡単にクラッシュさせる可能性があります。詳細 here

153
LasagnaAndroid

これは 'favicon'と呼ばれ、あなたのウェブサイトのheaderセクションに以下のコードを追加する必要があります。

これを<head>セクションに追加するだけです。

<link rel="icon" href="/your_path_to_image/favicon.jpg">
12
Dulith De Costa

これは favicon であり、リンクで説明されています。

例えばW3Cから

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

もちろん、画像ファイルは適切な場所に置いてください。

7
Vincent Ramdhanie
<link rel="Apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'Apple-touch-icon-retina.png')}">

またはあなたはこれを使うことができます

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
2
user3680001

あなたのウェブサイトのルートに "favicon.ico"という名前のアイコンファイルを追加してください。

1
Mike Fulton