[Hvordan] Opprette et Favicon og Apple Ikon for nettstedet ditt

Apple iPhone / iPad

Siden noen få år siden har favicons som hadde mistet mye av sin relevans blitt gjenoppstått siden flere og flere nettlesere nå støtter dem, og faktisk gjør dem til en veldig visuell del av brukerens opplevelse. Nettbrett og smarttelefonlesere bruker også disse ikonene. Dette har ført til en økt betydning av å ha et godt favikon. Måtene disse ikonene presenteres på varierer imidlertid avhengig av klienten som surfer på nettstedet. Stasjonære datamaskiner krever et bestemt ikon, Apple enheter krever noe annet, forskjellige størrelser kompliserer også saker. 

 

innhold[Forestilling]

En enkel løsning - Gratis Online Icon Generator for Apple og Favicon -ikoner

 Iconifier.net er en enkel løsning som gitt en firkantet JPG, GIF eller PNG vil generere et ikon sett i forskjellige størrelser slik at du kan bruke og velge de du vil støtte på nettstedet ditt. Du må bare da laste ned de genererte ikonene og legge inn i nettstedets kode. Du kan integrere disse trinnene i webdesignprosessen.

Bygg inn favorittikonene på nettstedet ditt

Etter å ha opprettet favicon.ico-ikonet ved hjelp av Iconifier.net ovenfor, og plassert det i roten til nettstedet ditt, legg til følgende kode mellom og på nettstedet ditt

De Apple ikoner

Etter å ha opprettet de forskjellige ikonene ved hjelp av nettstedet ovenfor, må du også inkludere en litt annen kode for Apple iPhone/iPad (og muligens Android) -enheter. Last opp ikonfilene som er generert igjen til roten på nettstedet ditt, og plasser følgende kode mellom HEAD -taggene.

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

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

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

iOS-enheter håndterer dette automatisk i nettleseren og endrer størrelse og legger til noen effekter i samsvar med det for å matche stylingen til enheten de blir sett på.

Forresten, store iOS- og Android-utviklere er ikke enkle å ansette - hvis du ønsker å ansette en god apputvikler, og vet hvordan du finner en god kandidat vi har dekket deg CollectiveRay. - vi viser deg alle de flotte stedene for å finne gode kandidater.

Ikoner for Android-enheter

Android har bygd på Apple berør ikoner, men forvent at ikonene allerede er i den siste versjonen. Denne siste versjonen er "FORESLAGT", og Android -enheter forventer at denne taggen er på plass. Så last opp nye versjoner, med litt forskjellige navn (for eksempel å legge til forhåndskomponert i navnet), og legg deretter til følgende markering. Den viktigste delen er rel =apple-touch-ikon-forhåndskomponert. Sett filene i roten til nettstedet ditt og legg til denne koden mellom og tagger av html

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

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

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

Mer informasjon om Favicons finner du på Wikepedia: https://en.wikipedia.org/wiki/Favicon

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.
 

 

Best rangerte hurtigbuffer-plugin

Gjør nettstedet ditt raskere 

Trinn-for-trinn-gratis e-postkurs, hvordan du får nettstedet ditt til å laste inn less enn 1 sekund  

 

hvem er vi?

CollectiveRay drives av David Attard - som jobber i og rundt webdesignnisjen i mer enn 12 år, gir vi nyttige tips for folk som jobber med og på nettsteder. Vi driver også DronesBuy.net - et nettsted for dronehobbyister.

David attard

 

 

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...