Tech
22 Comments

How to: Een app icoon maken voor je blog

App icoon

Hoe fancy is het om een custom made app icoon te hebben voor je eigen blog, pronkend tussen de andere apps op je telefoon? Juist ja. Heel fancy. Het is al een tijdje geleden dat ik het laatste artikel schreef in de ‘Design Class’ serie. Vorige keer legde ik een shortcut uit voor het maken van collages en moodboards in Photoshop en eerder ging het al over hoe je custom fonts kunt gebruiken in Blogger en WordPress. Dit keer dus een heuse tutorial om je eigen app icoon te maken en in te stellen voor jouw blog of website.

Note: Het is geen echte app, maar een snelkoppeling naar je website. Zo gefixt en heel erg cool.

Ontwerp je app icoon

Hiervoor kun je een fotobewerkingsprogramma gebruiken zoals Photoshop of Pixlr. Maak je app icoon simpel en herkenbaar. Zorg ervoor dat, als je gebruik maakt van letters, deze ook op je iPhone nog leesbaar zijn. Ik heb mijn icoon gemaakt in een formaat van 150 x 150 pixels. De afbeelding wordt automatisch naar de juiste grootte aangepast, net als de ronde hoeken die een app icoon standaard heeft.

Hoe je het app icoon instelt

Plak de onderstaande code in de header van je blog, tussen de <head> en </head>. Self-hosted WordPress gebruikers kunnen dit stukje vinden in het header.php bestand. In Blogger kun je dit vinden via Sjabloon > HTML bewerken. De head-tags staan bovenin je code.

Vervang de link voor de URL naar jouw eigen afbeelding. Als je een self-hosted WordPress website hebt kun je de afbeelding uploaden naar je mediabibliotheek. Voor Blogger kun je een website als TinyPic gebruiken om je afbeelding te uploaden.

<link href='http://url-to-your-image.com/your-image.jpg' rel='apple-touch-icon-precomposed'/>

Jouw blog toevoegen aan je beginscherm

Klik op het icoontje in het midden van je scherm zodat je onderstaand menu omhoog krijgt. Vervolgens kun je de app toevoegen aan je beginscherm. Eventueel kun je de naam nog aanpassen.

App icoon

Dat was het. Makkelijk toch? Super leuk als meer blogs dit zouden instellen, zodat je op je iPhone een scherm vol met super pretty snelkoppelingen naar je favoriete blogs kunt maken.

Share on Google+Pin on PinterestTweet about this on TwitterShare on Facebook

22 Comments

  1. Thestylepieces.wordpress.com says

    Wow echt een leuk idee! Ga er binnenkort maar eens mee aan de slag!

  2. Superleuk! Ik wist al dat dit kon, maar ik stel het steeds uit. Daarbij zou ik niet weten wie mijn blog als ‘app’ zou willen hebben haha. De android versie heb ik trouwens nog niet gevonden! Weet jij daar iets voor?

    • Haha true! Ik heb ook geen idee wie mijn blog op zijn beginscherm zou zetten, maar voor jezelf is het wel awesome. Ik heb een beetje voor je gegoogled maar ik kwam er niet echt uit voor Android, voor zover ik nu heb gelezen zou het voor Android ook moeten werken met dezelfde code, maar ik kan het niet testen helaas.

  3. Ik had al ooit eens ergens opgevangen dat dit kon, maar ik wist nooit hoe dit moest, haha. Was het steeds vergeten om me er verder in te verdiepen. Gaat dit ook voor Android? (I hope soo!)

  4. Laura says

    Aaaah Dewi, je post al-tijd zúlke leuke ideeën en dingen. WOAH. Love it :)

  5. Alexa Land says

    Super handig en ik ga dit zeker maken, wat tof!

  6. LifestyleLou . says

    Wat handig! Je hebt een leuke blog zeg. Net ontdekt. :-)

  7. Ik heb het net geprobeerd, maar bij mij komt niet m’n logo te staan. Wel gewoon een afbeelding van m’n site.. wat doe ik verkeerd?

    • Heb je in het stukje code dat je moet plakken in je header, de link veranderd in een directe link naar je afbeeling? En goed gecheckt of de code netjes tussen en staat? Als dit klopt maar het nog niet werkt, kun je dan een screenshot van je code mailen naar hello@kosmicfox.com? Dan kan ik je misschien verder helpen :)

  8. Dankjewel voor deze interessante blog!
    Het lukt mij alleen niet…
    Ik plaats het:

    maar ik krijg de volgende foutmelding:
    There should be one and only one skin in the template, and we found: 0
    Weet jij wat ik fout doe?
    Bedankt alvast voor je antwoord!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *