<link rel="icon">

به سادگی کد زیر را به عنصر  <head> اضافه کنید:

<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://example.com/favicon.png"</span>&gt;</span>

بهترین موردی که من پیدا کردم favicomatic.com است. من بهترین آن را می گویم زیرا واضح ترین فاکتور را به من داد و پس از تغییر شکل به ویرایش نیاز نداشت. این فاکتورها را با ابعاد 16×16 و 32×32 تولید می کند و به آنها نقل می کند “آقا هر اندازه لعنتی!” همچنین ، سایت آنها جالب به نظر می رسد و استفاده از آن آسان است.

آنها همچنین HTML را ایجاد می کنند که شما باید برای پرونده هایی که تولید می کنید استفاده کنید.

<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"57x57"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-57x57.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"114x114"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-114x114.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"72x72"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-72x72.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"144x144"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-144x144.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"60x60"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-60x60.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"120x120"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-120x120.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"76x76"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-76x76.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"152x152"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-152x152.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-196x196.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"196x196"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-96x96.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"96x96"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-32x32.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"32x32"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-16x16.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"16x16"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-128.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"128x128"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"application-name"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"<span class="hljs-symbol">&amp;nbsp;</span>"</span>/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-TileColor"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"#FFFFFF"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-TileImage"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-144x144.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square70x70logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-70x70.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square150x150logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-150x150.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-wide310x150logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-310x150.png"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square310x310logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-310x310.png"</span> /&gt;</span>

من حدود 20 نتیجه اولیه گوگل را بررسی کردم و این بهترین نتیجه بود.

این صفحه git توضیح می دهد که بیشتر این نمادها برای چه مواردی استفاده می شود: github.com/audreyr/favicon-cheat-sheet


0 Comments

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

fa_IRفارسی