[Sådan] Opret et Favicon og Apple Ikon for dit websted

Apple iPhone / iPad

Siden et par år siden er favicons, som havde mistet meget af deres relevans, genopstået, da flere og flere browsere nu understøtter dem, og faktisk gør dem til en meget visuel del af deres brugers oplevelse. Tabletter og smartphone-browsere gør også brug af disse ikoner. Dette har ført til en øget betydning af have et godt favicon. Måden, hvorpå disse ikoner præsenteres, varierer dog afhængigt af den klient, der browser på webstedet. Desktops kræver et bestemt ikon, Apple enheder kræver noget andet, forskellige størrelser komplicerer også sagen. 

 

Indhold[show]

En simpel løsning - Gratis Online Icon Generator til Apple og Favicon -ikoner

 Iconifier.net er en enkel løsning, der giver en firkantet JPG, GIF eller PNG vil generere et ikon sæt i forskellige størrelser, så du kan bruge og vælge dem, du vil understøtte på dit websted. Du skal bare derefter downloade de genererede ikoner og integrere i dit websteds kode. Du kan integrere disse trin i din webdesignproces.

Integrer favicons-ikonet på dit websted

Efter at have oprettet ikonet favicon.ico ved hjælp af Iconifier.net ovenfor og placere det i roden på dit websted, tilføj følgende kode mellem og af dit websted

Apple Ikoner

Efter at have oprettet de forskellige ikoner ved hjælp af ovenstående websted, skal du også inkludere en lidt anden kode for Apple iPhone/iPad (og muligvis Android) -enheder. Upload igen de ikonfiler, der genereres til roden på dit websted, og placer følgende kode mellem HEAD -tagsene.

<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-ikon ”href =” /touch-icon-iphone.png ” />

iOS-enheder håndterer dette automatisk i deres browser og ændrer størrelsen og tilføjer nogle effekter i overensstemmelse hermed, så det matcher stylingen af ​​den enhed, de ses på.

I øvrigt er store iOS- og Android-udviklere ikke lette at ansætte - hvis du ønsker at ansætte en god appudvikler og ved hvordan man finder en god kandidat vi har dækket dig til CollectiveRay. - vi viser dig alle de gode steder at finde gode kandidater.

Rød Mere: Sådan Reset Apple ID og adgangskode, hvis du har glemt det

Ikoner til Android-enheder

Android har bygget på Apple berør ikoner, men forvent, at ikonerne allerede er i deres sidste version. Denne sidste version er "FORUDSTILLET", og Android -enheder forventer, at dette mærke er på plads. Så upload nye versioner med lidt forskellige navne (f.eks. Tilføjelse af forhåndskomponeret i navnet), og tilføj derefter følgende markup. Den helt vigtige del er rel =apple-touch-ikon-på forhånd sammensat. Sæt filerne i roden på dit websted, og tilføj denne kode mellem og tags i din 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 ”>

Flere detaljer om Favicons kan findes på Wikepedia: https://en.wikipedia.org/wiki/Favicon

Om forfatteren
David Attard
David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

 

Hvem er vi?

CollectiveRay drives af David Attard - arbejder i og omkring webdesign -nichen i mere end 12 år, og vi giver tips til mennesker, der arbejder med og på websteder. Vi driver også DronesBuy.net - et websted for drone -amatører.

David attard

 

 

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...