De la crearea imaginii de 16x16 pixeli, chiar conceptul faviconilor sa schimbat. Acum, Favicon ar trebui să funcționeze cu o întreagă serie de icoane, ascuțite pe ecranul tactil, cu o interfață cu tigla de noi versiuni de Windows, cu caracteristici speciale ale ecranelor Retina etc. Soluția complexă (de la realfavicongenerator) include o listă destul de lungă a tuturor opțiunilor posibile:
Deși majoritatea acestor fișiere pot fi pur și simplu puse în rădăcina site-ului dvs. și aplicațiile corespunzătoare aleg ceea ce au nevoie fără a le prescrie în mod explicit în HTML, aceasta nu este abordarea cea mai de succes. Trebuie să creați prea mult conținut și apoi să îl mențineți. Un fișier scalabil va funcționa mult mai bine. De exemplu, sigla site-ului nostru este salvată în formatul favicon.svg:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Favicon poate fi adăugat prin linia de cod între etichetele capului:
Componentele desenului sunt realizate prin cifre separate, care nu se suprapun: pictograma ar trebui să aibă o dimensiune de 16x16 pixeli. Aici, simplitatea și claritatea sunt importante.
Din aceleași motive, fundalul din pictograma SVG este transparent, astfel încât să îl puteți utiliza în situații diferite.
Câmpul de vizualizare pentru SVG trebuie să fie pătrați.
Desenul ar trebui să ocupe cea mai mare suprafață din tabloul de vizualizare (panza în SVG).
etichetă
descrie scopurile pentru care este destinat desenul; merită adăugat <desc> și <title> pentru fiecare poligon <polygon>.</p>
<p>Este necesar să optimizați și să micșorați SVG-ul la maximum, astfel încât fișierul de ieșire să fie cât mai mic posibil.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/131/sozdaniesvgikonokdlyasaytafaviconsvg-b7e9b628.jpg" title="Crearea de pictograme svg pentru site (favicon svg) (pictograme)" alt="Crearea de pictograme svg pentru site (favicon svg)" /></div></p>
<p>Curs practic pe aterizare adaptivă de la zero!</p>
<p>Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile</p>
<p>Pentru ca SVG să funcționeze, este necesar să specificați imaginea de tip MIME / svg + xml.</p>
<h3>Adăugarea de suport pentru iOS</h3>
<p>IOS 9 suportă, de asemenea, faviconile SVG în marcaje încorporate, dar cu unele avertismente:</p>
<p>Elementele SVG trebuie să fie negre.</p>
<p>În referința la favicon, trebuie specificată pictograma mască-atribut neoficial.</p>
<p>Nu neapărat, dar puteți schimba și culoarea utilizând culoarea atributului neoficial. Valorile acceptate sunt hexazecimal, cuvânt cheie și rgb. Nu se recomandă utilizarea culorilor luminoase.</p>
<p>Având în vedere condițiile descrise mai sus, aș folosi un nou fișier SVG fără informațiile de culoare:</p>
<p>Pentru ca acest lucru să funcționeze pe iOS, adăugați linia:</p>
<h3>Colectând gândurile împreună</h3>
<p>Să presupunem că nu mai trebuie să suportați versiunile IE8 și versiunile anterioare, înseamnă că formatul .ico poate fi eliminat, iar browserele pot părăsi fișierul PNG. Pentru ca Favicon să fie afișat în toate browserele și să nu uităm de SVG, vom aranja linkurile în următoarea ordine:</p>
<p>Am refuzat să folosim formatul .ico: dacă am plasa fișierul favicon.ico în rădăcina site-ului, browserele îl vor folosi în locul celorlalte și nu contează ce directive ați specificat în antet.</p>
<p>Pentru iOS și IE, trebuie să specificați în continuare pictogramele individuale; SVG în aceste browsere nu funcționează încă.</p>
<h3>concluzie</h3>
<p>SVG pare să fi fost creată pentru Favicons și rămâne doar să sperăm că în viitorul apropiat și Chrome o va sprijini. Ar fi ideal ca într-un fișier SVG pentru grade diferite de detaliu și dimensiuni să se folosească diferite elemente <symbol> sau <use>... deși deja vrem prea mult.</p>
<p>Ediție: Comanda webformself.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/131/sozdaniesvgikonokdlyasaytafaviconsvg-b7e9b628.jpg" title="Crearea de pictograme svg pentru site (favicon svg) (pictograme)" alt="Crearea de pictograme svg pentru site (favicon svg)" /></div></p>
<p>Curs practic pe aterizare adaptivă de la zero!</p>
<p>Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile</p>
<p>Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame</p>
<br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="8576168847"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-8686842323494376"
data-ad-slot="9162386769"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<br><h4>Articole similare</h4>
<ul>
<li>
<p><a href="/utilizator-131/cautati-de-pe-google-pentru-site.html">Căutați de pe Google pentru site</a></p>
</li>
<li>
<p><a href="/utilizator-131/instalarea-wordpress-pe-gazduire-crearea-unei-baze.html">Instalarea wordpress pe gazduire, crearea unei baze de date si crearea unui site pe o gazduire</a></p>
</li>
<li>
<p><a href="/utilizator-131/structura-corecta-a-site-ului-pentru-promovare.html">Structura corectă a site-ului pentru promovare</a></p>
</li>
</ul>
<div class="vnizine"><p style="text-align: left;"><a href="/utilizator-131/portalul-speleomedical-al-rusiei.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/utilizator-131/complicatii-trombolitice-in-practica-ginecologica.html">Pagina următoare</a></p>
</div>
<h3>Trimiteți-le prietenilor:</h3>
<p>
<script type="text/javascript">(function(w,doc) {
if (!w.__utlWdgt ) {
w.__utlWdgt = true;
var d = doc, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})(window,document);
</script>
<div data-mobile-view="true" data-share-size="40" data-like-text-enable="false" data-background-alpha="0.0" data-pid="1771468" data-mode="share" data-background-color="#ffffff" data-share-shape="round-rectangle" data-share-counter-size="12" data-icon-color="#ffffff" data-mobile-sn-ids="fb.tw.wh.vb.ps.gp." data-text-color="#000000" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-type="disable" data-orientation="horizontal" data-following-enable="false" data-sn-ids="fb.tw.ps.gp.ms.bl.gt." data-preview-mobile="false" data-selection-enable="false" data-exclude-show-more="true" data-share-style="1" data-counter-background-alpha="1.0" data-top-button="true" class="uptolike-buttons" ></div>
</p>
</article>
</div>
</div>
</div>
</div><footer class="akatita-footer clearfix">
<div class="akatita-content-layout layout-item-0">
<div class="akatita-content-layout-row">
<div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p>
<br>
<ul>
<li><a href="/utilizator-197/de-ce-meciul-ars-este-indoit.html">De ce meciul ars este îndoit)</a></li>
<li><a href="/utilizator-127/legislatia-regiunii-bryansk.html">Legislația regiunii Bryansk</a></li>
<li><a href="/utilizator-166/cumparati-un-instrument-de-linoleum.html">Cumpărați un instrument de linoleum</a></li>
<li><a href="/utilizator-198/de-ce-toata-lumea-se-afla-in-jur.html">De ce toată lumea se află în jur</a></li>
<li><a href="/utilizator-115/reproducerea-vegetativa-a-plantelor-erbacee-pe.html">Reproducerea vegetativă a plantelor erbacee pe pajiști</a></li>
</ul>
</div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">locație</p>
<br>
<ul>
<li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li>
<li><a href="/adresa.html">Adresa</a></li>
</ul>
<ol>
<li><a href="/sitemap/sitemap5.html">sitemap</a></li>
<li><a href="/sitemap/sitemap115.html">sitemap</a></li>
<li><a href="/sitemap/sitemap192.html">sitemap</a></li>
<li><a href="/sitemap/sitemap737.html">sitemap</a></li>
<li><a href="/sitemap/sitemap1005.html">sitemap</a></li>
</ol>
</div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
<p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p>
<br>
<ul>
<li><a href="/contactati-ne.html">Contactați-ne</a></li>
<li><a href="/despre-site.html">Despre site</a></li></ul>
</ul>
</div><div class="akatita-layout-cell layout-item-1" style="width: 40%">
<p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2024. Toate drepturile rezervate.</p><br>
<p style="text-align: right;">
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t40.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script><!--/LiveInternet-->
</p>
</div>
</div>
</div>
</footer>
</div>
</div></body>
</html>
