Share
Med fler mobila webanvändare än någonsin är det viktigt att hålla varumärket starkt. Låt oss gå ett steg längre än standardfavicon och hjälpa din webbplats att sticka ut genom att skapa ikoner för användning på iOS och Android-hemskärmar.
* Fantastisk våffelikon av Eddie Lobanovskiy
Innan vi ens tänker på våra ikoners dimensioner finns det några viktiga saker du behöver tänka på när du utformar dem (specifikt där Apple-enheter berörs).
Det är också värt att tänka på när du utformar din ikon att det är möjligt att åsidosätta dessa vanliga iOS-beteenden. Vi ska titta på hur detta görs inom kort.
Varje Apple-enhet har en annan skärmstorlek och upplösning. Det betyder för bästa resultat, du behöver en separat ikon för olika storlekar för varje enhet. Oroa dig inte för Android - någon storleksikon sparas automatiskt.
Här är allt du behöver veta för varje Apple-enhet:
IOS bestämmer vilken ikon som ska användas beroende på dess storlek. Genom att använda större ikoner för skärmar med högre upplösning kan vi öka kvaliteten på våra bilder. Ta en titt på extra uppmärksamhet på detaljer om dessa exempel:
Som tidigare nämnts, lägger iOS automatiskt till effekter som avrundade hörn, släpp skuggor och den klassiska Apples "reflekterande glans". Om du utformar ikoner för att dra nytta av detta, gör du helt enkelt din ikon och gör effekterna till iOS. Om du hellre vill göra egna rundade hörn, var medveten om att det kanske slutar bli rörigt och inkonsekvent.
För att åsidosätta dessa iOS-standard, använd -förkomponerat inom rel attribut när du länkar till din ikon. Så här kan det tyckas:
Du kommer att märka ovanför att vi visade en ikon med -förkomponerat sökord i slutet av filnamnet. Detta är rent som en påminnelse för oss själva.
Namngivna dina bilder på detta sätt är inte nödvändigt, men det är användbart för att komma ihåg de omständigheter som du definierade ikonen för. Om du planerar att gå all-out och skapa ikoner för så många enhetstorlekar som möjligt, är det klokt att namnge dem alla i enlighet därmed. Till exempel:
Lägga till ikonerna på din webbplats är väldigt enkelt - allt som krävs är en rad kod för varje ikonstorlek. Låt oss anta att du har gjort ikoner med storlekarna 57x57px, 72x72px och 114x114px. Det är viktigt att definiera ikonens storlek korrekt så att de kan användas för rätt enhet - oavsett det faktum att de alla kommer under beteckningen "apple-touch-icon".
Glöm inte, om du vill åsidosätta standardinställningarna för iOS-skärm behöver du -förkomponerat sökord efter "apple-touch-icon" i rel attributfält.
Och det är allt det finns! Nu har du en skarp ny uppsättning ikoner som är redo att förstärka ditt varumärke på den växande mobilmarknaden. Om någon lägger till din webbplats på deras iOS-startskärm, visas i stället för en skärmdump en ikon. Med många iOS-användare som sparar webbplatser för senare läsning är det viktigt att ha en bra ikon så att din webbplats sticker ut från resten.
Om du funderar på hur detta gäller för Android-användare, oroa dig inte.
Android stöder också "Apple-touch-icon-förkomponerat'länk rel attribut, så det finns inget behov av att lägga till någon återgångskod. OS kommer att skala den lämpligaste ikonen till rätt storlek, så du behöver inte skapa ikoner med specifikt storlek för Android-enheter. Även om du inte använder någon av alternativen Apple-Touch-Icon, använder Android OS standardbilden (favicon) från din webbplats för din startsida.
Alla användare av mobila enheter är inte medvetna om att de kan lägga till webbsidor på deras startsida, så du kan överväga att uppmana dem att göra det. Det finns några JavaScript-utdrag för att hjälpa dig att göra det här, till exempel Matteo Spinelli's Add to Home Screen-skript.
Som alltid är det värt att överväga prestandaffekten av att dra i en annan .js-fil.
Jag hoppas att det här snabba tipset har inspirerat dig att få ett tag på att skapa egna ikoner för iOS. De kan visa sig vara mycket användbara för dina användare, och anpassade ikoner kommer att tjäna ditt varumärke mycket bättre än en oläslig skärmdump.
Accentsconagua