[Kuinka] Luo Favicon ja Apple Verkkosivustosi kuvake

Apple iPhone / iPad

Muutama vuosi sitten tärkeät merkityksensä menettäneet suosikkikuvakkeet ovat heränneet kuolleista, koska yhä useampi selain tukee niitä ja tekee niistä todella visuaalisen osan käyttäjän kokemuksistaan. Tabletit ja älypuhelimen selaimet käyttävät myös näitä kuvakkeita. Tämä on lisännyt hyvän favikonin merkitystä. Näiden kuvakkeiden esitystavat vaihtelevat kuitenkin verkkosivustoa selaavan asiakkaan mukaan. Pöytäkoneet vaativat tietyn kuvakkeen, Apple laitteet vaativat jotain erilaista, myös eri koot vaikeuttavat asiaa. 

 

Sisällys[show]

Yksinkertainen ratkaisu - ilmainen online -kuvakkeiden generaattori Apple ja Favicon -kuvakkeet

 Iconifier.net on yksinkertainen ratkaisu, joka antaa neliön muotoisen JPG-, GIF- tai PNG-kuvakkeen erikokoisille kuvakkeille, jotta voit käyttää ja valita ne, joita haluat tukea verkkosivustollasi. Sinun on sitten ladattava luodut kuvakkeet ja upotettava verkkosivustosi koodiin. Voit integroida nämä vaiheet web-suunnitteluun.

Upota suosikkikuvakkeet kuvakkeisiin verkkosivustollesi

Kun olet luonut favicon.ico-kuvakkeen yllä olevalla Iconifier.net-sivustolla ja asettanut sen verkkosivustosi juuriin, lisää seuraava koodi ja verkkosivustollasi

- Apple Kuvakkeet

Kun olet luonut eri kuvakkeet yllä olevalla verkkosivustolla, sinun on myös lisättävä hieman eri koodi Apple iPhone/iPad (ja mahdollisesti Android) -laitteet. Lataa uudelleen luodut kuvaketiedostot verkkosivustosi juureen ja aseta seuraava koodi HEAD -tunnisteiden väliin.

<link rel=”apple-touch-icon ”koko =” 114 × 114 ″ href = ” /touch-icon-114 × 114.png” />

<link rel=”apple-touch-icon ”koko =” 72 × 72 ″ href = ” /touch-icon-72 × 72.png” />

<link rel=”apple-touch-icon ”href =” /touch-icon-iphone.png ” />

iOS-laitteet käsittelevät tämän automaattisesti selaimessaan ja muuttavat kokoa ja lisäävät joitain tehosteita vastaavasti, jotta se vastaa laitteen tyyliä, jolla he näkevät.

Erinomaisia ​​iOS- ja Android-kehittäjiä ei ole helppo palkata - jos haluat palkata hyvän sovelluskehittäjän ja osaat löytää hyvän ehdokkaan meillä on sinut peitossa CollectiveRay. - näytämme sinulle kaikki hyvät paikat hyvien ehdokkaiden löytämiseen.

Android-laitteiden kuvakkeet

Android on rakennettu sen päälle Apple kosketa kuvakkeita, mutta odota, että kuvakkeet ovat jo lopullisessa versiossa. Tämä lopullinen versio on "PRECOMPOSED", ja Android -laitteet odottavat tämän tunnisteen olevan paikallaan. Lataa siis uusia versioita hieman eri nimillä (kuten lisäämällä valmiiksi kirjoitettu nimi) ja lisää sitten seuraava merkintä. Kaikki tärkeä osa on rel =apple-kosketus-kuvake-valmiiksi. Laita tiedostot verkkosivustosi juureen ja lisää tämä koodi ja html -tunnisteesi

<link rel=”apple-touch-icon-precomposed ”koko =” 114 × 114 ″ href = ”/apple-touch-icon-114 × 114-precomposed.png ”>

<link rel=”apple-touch-icon-precomposed ”koko =” 72 × 72 ″ href = ”/apple-touch-icon-72 × 72-precomposed.png ”>

<link rel=”apple-touch-icon-precomposed ”href =”/touch-icon-iphone-precomposed.png ”>

Lisätietoja Faviconsista on Wikepediassa: https://en.wikipedia.org/wiki/Favicon

kirjailijasta
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.
 

 

Paras luokiteltu välimuistilaajennus

Tee verkkosivustostasi nopeampi 

Vaihe vaiheelta-ilmainen sähköpostikurssi, jolla saat verkkosivustosi latautumaan less kuin 1 sekunti  

 

keitä me olemme?

CollectiveRay on David Attardin johtama - työskennellyt web -suunnittelualalla ja sen ympärillä yli 12 vuotta, tarjoamme toimivia vinkkejä ihmisille, jotka työskentelevät verkkosivustojen kanssa ja niillä. Meillä on myös DronesBuy.net - sivusto drone -harrastajille.

David Attard

 

 

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...