[Hur] Skapa ett Favicon och Apple Ikon för din webbplats

Apple iPhone / iPad

Sedan några år tillbaka har favikoner som tappat mycket av sin relevans återuppstått eftersom fler och fler webbläsare nu stöder dem, och faktiskt gör dem till en mycket visuell del av deras användares upplevelse. Surfplattor och smartphone-webbläsare använder också dessa ikoner. Detta har lett till en ökad betydelse av att ha en bra favicon. Hur dessa ikoner presenteras varierar dock beroende på vilken klient som surfar på webbplatsen. Stationära datorer kräver en viss ikon, Apple enheter kräver något annat, olika storlekar komplicerar också saken. 

 

Innehåll[Show]

En enkel lösning - Gratis Online Icon Generator för Apple och Favicon -ikoner

 Iconifier.net är en enkel lösning som ges en kvadratisk JPG, GIF eller PNG genererar en ikonuppsättning av olika storlekar så att du kan använda och välja de du vill stödja på din webbplats. Du behöver bara ladda ner de genererade ikonerna och bädda in i din webbplats kod. Du kan integrera dessa steg i din webbdesignprocess.

Bädda in ikonerna för favicons på din webbplats

Efter att ha skapat ikonen favicon.ico med Iconifier.net ovan och placerat den i roten på din webbplats, lägg till följande kod mellan och på din webbplats

Du har nu möjlighet Apple Ikoner

Efter att ha skapat de olika ikonerna med ovanstående webbplats måste du också inkludera en något annorlunda kod för Apple iPhone/iPad (och möjligen Android) enheter. Ladda upp igen ikonfilerna som genereras till roten på din webbplats och placera följande kod mellan HEAD -taggarna.

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

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

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

iOS-enheter hanterar detta automatiskt i sin webbläsare och ändrar storlek och lägger till några effekter därefter så att det matchar utformningen av den enhet de ses på.

För övrigt är det inte enkelt att anställa bra iOS- och Android-utvecklare - om du vill anställa en bra apputvecklare och vet hur du hittar en bra kandidat vi har täckt dig CollectiveRay. - Vi visar dig alla fantastiska platser för att hitta bra kandidater.

Ikoner för Android-enheter

Android har byggt på Apple peka på ikoner men förvänta dig att ikonerna redan finns i sin slutliga version. Den här sista versionen är "FÖRESKRIVEN", och Android -enheter förväntar sig att den här taggen ska vara på plats. Så ladda upp nya versioner, med lite olika namn (som att lägga till förkomponerat i namnet) och lägg sedan till följande markering. Den viktiga delen är rel =apple-touch-ikon-förkomponerad. Lägg filerna i roten på din webbplats och lägg till den här koden mellan och taggar i din html

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

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

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

Mer information om Favicons finns på Wikepedia: https://en.wikipedia.org/wiki/Favicon

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.
 

 

Bästa rankade cacheplugin

Gör din webbplats snabbare 

Steg för steg-gratis e-postkurs, hur du får din webbplats att ladda in less än 1 sekund  

 

vilka är vi?

CollectiveRay drivs av David Attard - arbetar i och runt webbdesignnischen i mer än 12 år, vi ger användbara tips för människor som arbetar med och på webbplatser. Vi driver också DronesBuy.net - en webbplats för drönare.

David attard

 

 

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...