Web アプリのファビコンは code_html/css_WEB-ITnose をどのように構成する必要がありますか

非常に多くのインデックス ページを処理したので、このページ専用のファビコンについて詳しくまとめます

これは Web サイトのアバターであ​​り、ブラウザのお気に入り (タイトルの横) に表示され、左上で参照しますブラウザタブの隅、WeChat公式アカウントのロゴ、Webページのショートカットをデスクトップに保存すると、デスクトップアイコンなどになります。

一般的に使用されるサイズは、16×16、32×32、48×48、もちろん、場所によって異なります。win8 の Metro メニューに表示されるなど、さまざまなサイズが必要です。

以下の意見は百科事典に記載されています。 SEO に有利な mce_href 属性を追加します

<link rel="icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon"><link rel="icon" href="animated_favicon1.gif" type="image/gif" >

でも、私は通常このように書きます (mce_href は追加しません)。以下が私の計画です

<link rel="shortcut icon" href="/favicon.ico"><link rel="icon" href="/favicon.ico"><link rel="apple-touch-icon-precomposed" href="/favicon.ico"><link rel="Bookmark" href="/favicon.ico" >

他のことを考慮したくない場合は、このようなコード行を追加できます を先頭に

これでも、最新のブラウザは Web ルート ディレクトリに積極的にアクセスして favicon.ico という名前のファイルを見つけるため、手間が省けます。やるべきことは、そのディレクトリに 32X32 の favicon.ico を置くことです

でも態度が無いのは、言わずにずっと言ってるようなものなので、こんな事はあり得ません

はっきりさせましょう

。

<link rel="shortcut icon" href="http://a.com/favicon.ico" type="image/vnd.microsoft.icon">  <br />//第一行是几乎必需的 告诉浏览器去找哪个文件 shortcut 其实是为ie而加的    <br /><link rel="icon" href="http://a.com/favicon.ico" type="image/vnd.microsoft.icon"> <br />//第二行是给浏览器的备用图像,当第一个文件找不到或者怎样挂了时,第二行发挥作用, <br />//note: type的mime格式并不重要,不写type也没关系,所以我不写<br /><br />

<link rel="apple-touch-icon-precomposed" href="xxx.png"><br /> //这一行代码是给苹果设备用的 可以在iPhone/iPod Touch上将网页"添加至主屏幕"时，去掉icon上那难看的透明层．<br />//note: favicon不只支持ico文件,它也支持png文件,非常自由. 火狐等主流浏览器上 还支持 gif动图<br /><br />如:<br /> <link rel="icon" type="image/gif" href="animated_favicon.gif" >   // icon是动画的gif<br /><br /> <link rel="Bookmark" href="favicon.ico" /> //特别指明 收藏夹中的使用的icon图标 <br /><br /><link rel="icon" type="image/png" href="/path/image.png">        //png格式的icon 不加type也可以<br /><br />此外关于苹果还可以设置的更详细些 使用苹果的私有属性 apple-touch-icon<br /><link rel="apple-touch-icon" href="/custom_icon.png"/>   <br /><br />同时支持sizes属性，可以用来放置对应不同的设备。<br />

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />  <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />  <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />    <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" /> 

57×57 (デフォルト値) のアイコンは 320×640 に対応します。 古い iPhone デバイスの場合、72×72 は iPad に対応し、114×114 は Retina スクリーンの iPhone および iTouch に対応します。 ipad3は144×144の高解像度に対応しています。

実際、Apple はアイコンを自動的に拡大縮小するので、114x114 と 144x144 の 2 つのサイズを作成するだけで済みます。

この時点で、apple-touch-icon を使用する場合は、その必要はありません。もちろん、デフォルトの処理効果で生成された透明レイヤーは、システムによって処理されます。属性ですが、この時点では画像の丸い角とハイライトは自分で画像上で行う必要があります

それについては、ここで詳細を確認することもできます

http://www.uisdc.com /design-perfect-favicon-icon

http://www .w3cplus.com/css/question-the-favicon.html

さらに、それを生成するための 2 つのオンライン ツールが提供されています

http:// www.faviconico.org/favicon

http://realfavicongenerator.net /