ブラウザタブのページタイトルの横にある画像-ここで画像をリンクするにはどうすればよいですか?
6 に答える
その画像は「ファビコン」.ico
と呼ばれ、ファビコンの標準ファイルタイプである小さな正方形のファイルです。.png
またはを使用することもできます.gif
が、互換性を高めるために標準に従う必要があります。
Webサイトに設定するには、次のことを行う必要があります。
ロゴの正方形の画像(最大サイズ*がないことがわかっている限り、32x32または16x16ピクセルが望ましい)を作成し、
.ico
ファイルに変換します。これは、Gimp、Photoshop(プラグインを使用)、またはFavicon.ccやRealFaviconGeneratorなどのWebサイトで実行できます。次に、それを設定する2つの方法があります。
A)Webサイトのルートフォルダ/ディレクトリ(の横
index.html
)に。という名前で配置しfavicon.ico
ます。また
B)次のように、サイト上
<head></head>
のすべてのファイルのタグ間でリンクします。.html
<head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>
あなたがどんなウェブサイトからでも見たいならばfavicon
、ただ書くだけwww.url.com/favicon.ico
で、あなたはそれを(おそらく)見るでしょう。Stackoverflowのファビコンは16x16ピクセルで、ウィキペディアは32x32です。
*:ファイルサイズの制限がないブラウザの問題もあります。非常に大きなファビコンでブラウザを簡単にクラッシュさせる可能性があります。詳細はこちら
これは「ファビコン」と呼ばれ、Webサイトのヘッダーセクションに以下のコードを追加する必要があります。
<head>
これをセクションに追加するだけです。
<link rel="icon" href="/your_path_to_image/favicon.jpg">
これはファビコンであり、リンクで説明されています。
例:W3Cから
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
さらに、もちろん、適切な場所にある画像ファイル。
「favicon.ico」という名前のアイコンファイルをWebサイトのルートに追加します。
<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">
- これを追加
**<HEAD>**
< link rel="icon" href="directory/image.png">
その後、実行してお楽しみください