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.
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
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.
en nog veel meer ...