タグ付けされた質問 「favicon」

ファビコンは通常16x16ピクセルの小さなグラフィックですが、大きくなることもあり、ブラウザのアドレスまたはタブバー(URLの左側)に表示されることがよくあります。

4
すべてのWebサイトに必要なファイル
すべてのWebサイトに存在するはずのファイルのリストが必要です。アイデアは、ほとんどのブラウザとボットを満足させ、ログ内の404メッセージの数を把握することです。 これまでのところ、次のファイルがあります。 /favicon.ico /robots.txt /sitemap.xml /apple-touch-icon-72x72-precomposed.png /apple-touch-icon-72x72.png /apple-touch-icon-precomposed.png /apple-touch-icon.png 頻繁にリクエストされ、すべてのWebサイトに存在する必要がある他のファイルはありますか?

2
ファビコン、アイコン、ショートカットアイコン、apple-touch-icon:他に何かありますか?
私は、Webサイトの2つの基本的な種類のデフォルトWebアイコンを知っています。 Favicon:.ico指定したサイトのルートにフォーマット済みファイルを配置するfavicon.icoと、ほとんどのデスクトップブラウザーがそれを見つけて、さまざまなコンテキスト(ブックマーク、タブ)で表示します。コードに追加することもできます。これにより、他の名前や他のグラフィックタイプをファイルに指定できますが、ブラウザにはタイプとサイズの制限があります。 <link rel="shortcut icon" href="/webmasters//favicon.ico" /> <link rel="icon" href="/webmasters//favicon.ico" /> Webクリップアイコン:サイトのルートまたはルートにpngフォーマット済みファイルを配置すると、SafariのiPhone OS / iOSバージョンがそれらを選択し、サイトがホーム画面に追加されたときにそれらを保存します。次のようなコードでも追加できます。apple-touch-icon.pngapple-touch-icon-precomposed.png <link rel="apple-touch-icon" href="/webmasters//custom_icon.png" /> ウェブマスターが含めることができるウェブサイトの他のデフォルトアイコングラフィックはありますか?
24 favicon  icon 

1
fluid-iconメタタグの目的は何ですか?
私は知らなかったHTMLメタタグに出くわし、それが何のためにあるのか疑問に思いました。 <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" /> 私はグーグルで探しましたが、説明が見つかりませんでした。これは何ですか?新しいファビコンのアプローチ?そして、私がすでに知っているものとの違いは何ですか: <link rel="icon" href="images/2/mail_icon_32.png" sizes="32x32"> <link rel="shortcut icon" href="https://www.google.com/a/scoop-gmbh.de/images/favicon.ico" type="image/x-icon">


6
アニメーション化されたfavicon.icoは悪い考えですか?アニメ化されたfavicon.icoのクールな用途はありますか?
html-kit.comfavicon.icoを使用してを生成するたびに、アニメーションバージョンを取得するオプションが提供されます。アニメーション化されたファビコンを使用したことはありませんが、「視覚的にうるさい」という以外に、それが悪い考えである理由はありますか? アニメーション化されたファビコンの創造的または興味深い使用法はありますか? 編集明確にするために、アニメーションバージョンのhtml-kitはGIFであり、メタタグを使用してポイントすることができます。favicon.ico画像形式がアニメーションをサポートしていることを暗示して申し訳ありません!

1
ファビコンを検索しないようにブラウザに指示できますか?
ファビコンがない/必要のないウェブサイトがあります。 /favicon.icoを探しているリクエストを無駄にしないようにブラウザに指示する方法はありますか? ログをフィルタリングするつもりはありませんが、次のようなクライアント側の何かです: <link rel="shortcut icon" href="about:blank" /> それはうまくいくように見えますが、私は包括的なテストを行う立場にありません(そして検索エンジンは役に立たないです)。 これが有効な方法であるかどうかを確認したり、適切な代替手段を提供したりできますか? 更新:詳細な調査では、それは機能しません(少なくともローカルドメイン以外のChromium 18 では機能しません)。部分的な解決策は、data:URLを使用してbase64空白の画像を提供することです(ここからの例): <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" /> これは機能していますが、2つの欠点があります。 データURLをサポートしていないブラウザではおそらく失敗します。 その結果、ファビコンはまったくなくなります。つまり、ブラウザのデフォルトアイコンが非表示になります。
19 html  favicon 

1
Firefoxの新しいタブトップサイトに大きなアイコンを表示するにはどうすればよいですか?
Quantumと呼ばれるFirefoxの最新の安定版リリース(バージョン57)では、新しいタブのユーザーが制御するトップサイト機能が変更されました。以前は、部分的なスクリーンショットの粗いサムネイルのみがWebサイトに関係なく表示され、制御できませんでした。一部のWebサイトは大きなアイコンで表示されますが、他のWebサイトは前述のサムネイルと隅にオーバーレイされたファビコンとしてのみ表示されます。大きなアイコンの扱いを受けるサイトの例:Amazon、TechCrunch、Slack、およびGitHub。ファビコン処理でサムネイルを取得するサイトの例:Slashdot、Steam、Kongregate、Gizmodo。 私が知る限り、これには特定の韻や理由はありません。また、Top Sites機能のドキュメントも見つけていません。 Firefoxのソースコードをしばらく掘り下げた後、次browser\extensions\activity-stream\lib\TopSitesFeed.jsmのコードセクションがあるを見つけました。 /** * Get an image for the link preferring tippy top, rich favicon, screenshots. */ async _fetchIcon(link) { // Check for tippy top icon and rich icon. this._tippyTopProvider.processSite(link); let hasTippyTop = !!link.tippyTopIcon; let hasRichIcon = link.favicon && link.faviconSize >= MIN_FAVICON_SIZE; if (!hasTippyTop && !hasRichIcon) { this._requestRichIcon(link.url); …
13 firefox  favicon 

1
Apple-touch-iconにファビコンを使用するとどうなりますか?
File does not exist: apple-touch-icon...error.logのすべての行の取得を停止したいが、アイコンファイルの作成に時間を費やしたくありません。 iOSデバイス上で自分のホーム画面に私のURLを保存し、誰のために少し-ブロッキーアイコン以外にも、ただのそれぞれをシンボリックリンクに何らかの欠点があるapple-touch-icon{-120x120,76x76,}{-precomposed,}.png私の20x21にはfavicon.ico?
11 favicon  icon  ios 

3
IE 10で最も人気のあるサイト画面-アイコンが表示されない
次のコードを使用して、ファビコン、タブレット、スマートフォン、Windows 8タイルなどのアイコンを追加します。 <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/> <meta name="msapplication-TileColor" content="#17151a"/> 残念ながら、これはIE9とIE10の「あなたの最も人気のあるサイト画面」では機能しないようです。Google検索は啓発的ではありません。 Stackは<link rel="apple-touch-icon" href="apple-touch-icon.png">、うまくいくように見えますが、私たちには使えません。 解決策への手がかりはありがたいです。

3
Herokuにファビコンをデプロイするにはどうすればよいですか?
Hello worldHerokuアプリ用に次のコードがあります。また、私のプロジェクトのルートフォルダーには、favicon.ico。 import os from flask import Flask app = Flask(__name__) html = ''' <!doctype html> <html> <head> <link rel="shortcut icon" href="/webmasters//favicon.ico"> <title>Hello world!</title> </head> <body> <p>Hello world!</p> </body> </html> ''' @app.route('/') def index(): return html if __name__ == '__main__': port = int(os.environ.get('PORT', 5000)) app.run(host='0.0.0.0', port=port) アプリを参照しても、が表示されませんfavicon。また、を確認するheroku logsと、次の404行が表示されます。 2012-02-14T05:23:29+00:00 app[web.1]: …
11 favicon  heroku 

4
サイトにファビコンへの2つのリンクがある理由は何ですか?
私が見ているサイトには、そのファビコンへの次の2つのリンクがあります。 <link rel="shortcut icon" type="image/ico" href="/webmasters//_assets960/media/favicon.ico" /> <link rel="icon" href="/webmasters//favIcon.ico"/> 質問:これら2つのわずかに異なる方法でアイコンを2回指定することには、十分な理由がありますか?
11 favicon 

6
ファビコンはSEOに影響を与えますか?
ファビコンとその検索エンジンへの影響に関するアドバイスを探しています。最近、ファビコンスタイルの全体的な認識を失うことなく、別のページをロードするたびにファビコンを変更するサイトに気づきました。これも自分のサイトに組み込みたいのですが、SEOのリスクはありますか?
9 seo  favicon 

3
Webサイトのブラウザータッチアイコン、ファビコン、タイルのセットをテストする方法は?
さまざまなブラウザーとデバイスには、Webページを表すために使用するファビコンのようなアイコンの種類に関する独自の仕様と標準があります。グラフィックデザインサイトのこの回答は、かなり良い概要を提供します。 HTMLで適切な宣言を使用してこれらのアイコンファイルを多数提供するために問題に遭遇したと仮定します。それらすべてをテストします。 必要なすべてのデバイスを渡さずに、構成をテストし、さまざまなデバイスとブラウザにあるファイル(存在する場合)を確認する簡単な方法はありますか? 明確にするために編集します。「最もアクセスされた」、「お気に入り」などのブラウザー機能でWebページを表す場合、またはWebページで宣言されて<head>いるが表示されないホーム画面ショートカットを作成する場合にブラウザーが上に移動して使用するアイコンを意味しますウェブページのどこにでも<body>。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.