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

Apple iPhone / iPad

Siden et par år siden er favicons, der har mistet meget af deres relevans, været genoplivet, 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 at have et godt favicon. De måder, hvorpå disse ikoner præsenteres, varierer dog efter klienten, der gennemsøger 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.

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
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig 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.
 

 

Bedst bedømte caching-plugin

Gør dit websted hurtigere 

Trin for trin-gratis e-mail-kursus, hvordan du får dit websted til at indlæse less end 1 sekund  

 

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 ...