How to: Jouw blog met een origineel icoontje in je mobiele beginscherm

dinsdag 25 juni 2013 |

Vandaag heb ik een tutorial voor jullie! Als je het nog niet helemaal begreep van de titel, leg ik het nog eens uit: Zoals je misschien weet kun je je blog toevoegen aan je beginscherm op je iPhone/iPod/iPad. Ik weet niet hoe het zit met Android, maar deze tutorial is voor Apple! Misschien heb je het wel: Een snelkoppeling naar jouw blog of website op je mobiel. Maar een probleem: het icoontje is niet zo leuk. Toen ik het zag op de blog van Jiami, ging ik eens uitzoeken hoe je zo'n icoontje voor op je beginscherm creëert. Het is me gelukt, whooooh! In deze blogpost vertel ik jullie hoe je het kunt doen - met HTML, maar toch easypeasy. 



























Dit is mijn icoontje. Voor nu, ik kan 'm altijd weer aanpassen, wat best wel makkelijk is. Maar laten we beginnen bij stap één, anders wordt het te verwarrend!

1. Maak je icoontje. Kies een fijn bewerkingsprogramma. Gewoon, waar jij mee werkt, en wees creatief! Zet de naam van je blog erin, als je dat wilt, ik heb gekozen voor 'LLW'. De afkorting van Luna's Lovely World, anders was het te lang voor dat kleine icoontje. Een foto op de achtergrond en done! Kies wel voor de juiste afmetingen. De afmetingen moeten gelijk zijn. Bij mij was het 129 x 129 pixels. Sla 'm op als .png bestand (gewoon typen bij het opslaan icoontje.png of iets dergelijks).

2. Ga naar de HTML van je blog (sjabloon -> html bewerken) En zoek <head>. Dit staat ergens bovenaan in de HTML, je zult het wel zien staan. Daaronder gaat de HTML-code voor je icoontje. Welke dat is? Deze:

 <LINK REL='apple-touch-icon' HREF='hier komt de url van je afbeelding'/>

Makkie toch? Waar staat 'hier komt de url van je afbeelding' zet je de url van de afbeelding. Okay, logisch haha! De url van je icoontje kun je achterhalen door 'm te uploaden met bijvoorbeeld Tinypic. Hier zijn jullie vast al een beetje bekend mee. Heb je de code onder <head>? That's it, eigenlijk. Nog even opslaan en het zou moeten werken. 

3. Test het voor de zekerheid even! Je weet vast hoe dit gaat. Naar Safari, surfen naar je blog, en op het middelste knopje onderaan drukken (het 'delen' knopje). Dan kun je kiezen 'voeg toe aan beginscherm' en kijken of het gelukt is. Veel succes, ik hoop dat jullie wat aan de tutorial hebben gehad en dat het werkt! Nu heb je een leuk icoontje voor je beginscherm van je iPhone/iPod/iPad. Nog vragen? Stel ze in de reacties. 

17 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Superleuk! Ik ga dit zeker eens proberen. Echt een hele leuke tutorial!
    liefs

    BeantwoordenVerwijderen
  2. ziet er leuk uit! Helaas heb ik geen apple.. :( xx

    BeantwoordenVerwijderen
  3. Super leuk! Ik heb alleen geen apple:(

    BeantwoordenVerwijderen
  4. Wat een handig artikel Luna! En ook heel goed uitgelegd. Dit ga ik zeker gebruiken!

    BeantwoordenVerwijderen
  5. Ik had mijn blog al toegevoegd als bladwijzer, maar nog niet met zo'n leuk icoontje: binnenkort even doen! Handige tutorial!

    BeantwoordenVerwijderen
  6. Wat ontzettend handig, dit ga ik zeker doen!

    BeantwoordenVerwijderen
  7. Wauw, super fijn artikel luun! Ik vind dit zo leuk! :D

    BeantwoordenVerwijderen
  8. Echt een super gafe tutorial! En van mijn toetsweek, deze duurt anderhalve week (dus nu tot en met woensdag). En dan heb ik nog anderhalve week dingen doen (sportdga, boeken inleveren etc.) maar ook een paar dagen vrij omdat de school dan gaat vergaderen :) Ik heb pas officieel vakantie op 13 juli. Succes alvast voor de toetsweek! (die heb jij toch ook?) xx

    BeantwoordenVerwijderen
    Reacties
    1. Haha nee, ik heb geen toetsweek! Wist niet eens dat je die kon krijgen in de eerste klas vandaar mijn berichtje!

      Verwijderen
  9. Ik vroeg me al heel lang af hoe je dat kan doen. Dus bedankt, haha. X

    BeantwoordenVerwijderen
  10. Superleuk! Ik vroeg me al af hoe je het had gedaan :)

    Xx Alex

    BeantwoordenVerwijderen
  11. Super handig, ga ik uitproberen! Bedankt voor de tip! xx

    BeantwoordenVerwijderen
  12. Wat leuk! Dit ga ik zeker proberen! Wist je dat je de letters van dat lettertype dat je gebruikte in je icoontje kan sluiten door elk woord te beginnen met een hoofdletter en te eindigen met een ^ ? Ik heb dat zelfde lettertype net gedownload en het stond erbij :)

    BeantwoordenVerwijderen
    Reacties
    1. Oh, grappig, dat wist ik niet! thanks for saying!

      Verwijderen