[Hoe] een favicon maken en Apple Icoon voor uw website

Apple iPhone / iPad

Sinds een paar jaar geleden zijn favicons die veel van hun relevantie hadden verloren, weer tot leven gewekt sinds steeds meer browsers ze ondersteunen en ze in feite een zeer visueel onderdeel van de gebruikerservaring maken. Ook tablets en smartphone browsers maken gebruik van deze iconen. Dit heeft geleid tot een groter belang van het hebben van een goed favicon. De manier waarop deze pictogrammen worden weergegeven, is echter afhankelijk van de klant die op de website surft. Desktops vereisen een bepaald pictogram, Apple apparaten vereisen iets anders, verschillende maten maken de zaken ook ingewikkeld. 

 

Inhoud[Producten per pagina]

Een eenvoudige oplossing - Gratis online pictogramgenerator voor Apple en Favicon-pictogrammen

 Iconifier.net is een eenvoudige oplossing die, gegeven een vierkante JPG, GIF of PNG, een pictogrammenset van verschillende groottes genereert, zodat u de pictogrammen kunt gebruiken en kiezen die u op uw website wilt ondersteunen. U hoeft alleen maar de gegenereerde pictogrammen te downloaden en in te bedden in de code van uw website. U kunt deze stappen integreren in uw webdesignproces.

Sluit de favicons-pictogram(men) in uw website in

Nadat u het favicon.ico-pictogram hebt gemaakt met Iconifier.net hierboven en het in de hoofdmap van uw website hebt geplaatst, voegt u de volgende code toe tussen de en van uw website

Het Apple pictogrammen

Nadat u de verschillende pictogrammen hebt gemaakt met behulp van de bovenstaande website, moet u ook een iets andere code opnemen voor Apple iPhone/iPad (en mogelijk Android) apparaten. Upload opnieuw de gegenereerde pictogrambestanden naar de hoofdmap van uw website en plaats de volgende code tussen de HEAD-tags.

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

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

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

iOS-apparaten verwerken dit automatisch in hun browser en wijzigen het formaat en voegen overeenkomstige effecten toe zodat het past bij de stijl van het apparaat waarop ze worden gezien.

Overigens zijn geweldige iOS- en Android-ontwikkelaars niet gemakkelijk aan te nemen - als u op zoek bent naar een goede app-ontwikkelaar en weet hoe u een goede kandidaat kunt vinden we hebben je gedekt CollectiveRay. - we laten je alle geweldige plekken zien om goede kandidaten te vinden.

Pictogrammen voor Android-apparaten

Android heeft voortgebouwd op de Apple raak pictogrammen aan, maar verwacht dat de pictogrammen al in hun definitieve versie zijn. Deze definitieve versie is "VOORGESTELD" en Android-apparaten verwachten dat deze tag aanwezig is. Upload dus nieuwe versies, met iets andere namen (zoals het toevoegen van pre-composed in de naam) en voeg vervolgens de volgende markup toe. Het allerbelangrijkste deel is de rel=apple-touch-icon-vooraf samengesteld. Zet de bestanden in de root van je website en voeg deze code toe tussen de en tags van je html

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

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

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

Meer details over Favicons zijn te vinden op Wikipedia: https://en.wikipedia.org/wiki/Favicon

Over de auteur
David Attard
Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/
David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
 

 

Best beoordeelde caching-plug-in

Maak uw website sneller 

Stap-voor-stap - gratis e-mailcursus, hoe u uw website kunt laten laden less dan 1 seconde  

 

wie zijn we?

CollectiveRay wordt gerund door David Attard - we werken al meer dan 12 jaar in en rond de niche van webdesign en bieden bruikbare tips voor mensen die met en op websites werken. We hebben ook DronesBuy.net - een website voor drone-hobbyisten.

David Attard

 

 

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...