Een favicon ontwerpen, maken en op je website zetten

Geschreven door Woei-Sang Tang op . Geplaatst in Graphic Design, Web Design

Mijn favicon

Mijn favicon

Eén van mijn rare eigenschappen is dat zodra ik een logo ontworpen heb, meteen een favicon-versie daar van maak. Een favicon is het kleine vierkant logootje naast de websitetitel in de browser (helemaal bovenaan je scherm); op deze website is de favicon een Chinese karakter zoals links in het groot. Naast het logo is de favicon ook één van de eerste dingen die ik op een nieuwe website plaats.

Kromme tenen krijg ik telkens weer als ik een website zie die een Plesk-favicon heeft, dan is mijn gedachte meteen “je bent niet serieus met je vak bezig”. In deze tutorial zal ik uitleggen hoe je van je bestaande logo een favicon-versie kunt ontwerpen, hoe deze te maken in Photoshop en ten slotte deze te plaatsen op je website.

Een favicon ontwerpen

Sommige betwijfelen het nut van een favicon, dat vind ik prima, maar net als het logo, geeft een favicon een identiteit mee aan een website en als bezoekers een groot aantal tabbladen heeft openstaan in hun browser, dan is het toch makkelijk om een favicon te hebben.

Een goede favicon ontwerpen is niet moeilijk. Het meest gebruikte formaat voor een favicon is nog steeds 16×16 pixels en het doel is om in zo’n klein veldje een logische en herkenbare icoon voor je website maken.

Wanneer je een vierkant-achtige logo hebt, dan is het al makkelijk om gewoon het logo te verkleinen naar een 16×16 versie, waarbij je de achtergrond kleur aanhoudt en de eerste letter vergroot en midden in het vlak zet. Of als in het logo een symbool of icoon een zit, dan is de keus al snel gemaakt.

Sommige logo’s zijn wat lastiger om een favicon voor te ontwerpen, zoals logo’s die alleen bestaan uit letters. Ook dan is het een goed idee om de hoofdkleur als achtergrond te gebruiken met daarin de eerste letter van het logo, want het gaat het om herkenbaarheid en niet om het logo te kunnen proppen in een favicon. Als voorbeeld heb ik het logo van eBay gekozen: dit bestaat uit alleen letters en bevat meerdere kleuren. De lettertype is niet een lettertype die direct geassocieerd wordt met eBay, dus ik zou niet kiezen om een favicon met alleen een letter te ontwerpen. De kleuren daarentegen wel. Ik zou daarom de kleurencombinatie verwerken in de favicon.

Een favicon maken in Photoshop

Deze tutorial is geschreven met behulp van Photoshop CS 5.1

Gebruik een werkbestand van minimaal 200×200 px groot. Waarom zo’n groot formaat? Ten eerste is het makkelijker werken en ten tweede worden favicons niet alleen in de browser op je computer gebruikt, maar ook op tablets en smartphones. Daar worden favicons met een veel hogere resolutie weergegeven. In een volgende tutorial ga ik hier verder op in. Daarnaast gebruik ik regelmatig hoge resolutie favicons als profielafbeeldingen voor social media-accounts. Google+, Twitter, Facebook en Instagram gebruiken vierkante profielafbeeldingen, perfect om hiervoor favicons te gebruiken als je geen vierkant logo hebt. Daarnaast worden profielafbeeldingen op social media bijna altijd verkleind weergegeven.

1. Maak een nieuw document aan (Ctrl+N) met een hoogte en breedte van minimaal 200 px, 72 dpi, RGB-mode 16-bit met een transparante achtergrond. In dit voorbeeld maak ik gebruik van een transparante achtergrond.

2. Maak een nieuwe layer aan (Shift+Ctrl+N) en maak je afbeelding aan. Om je afbeelding netjes in het midden te krijgen, druk je Ctrl+A in om de gehele afbeelding te selecteren. Vervolgens selecteer je de Move Tool/Verplaats Gereedschap en klik je op de horizontale en verticale centreerknop (align vertical centers) en align horizontal centers). Deselecteer je afbeelding (Ctrl+D) en sla het werkbestand op (Ctrl+S) als favicon.psd.

Let op: Ik heb centreren hier gebruikt, zodat ik deze techniek kon uitleggen, maar als je een favicon gaat maken, dan gebruik je uiteraard de volledige hoogte en breedte en is centreren niet nodig.

140925-03

3. Nadat je het bestand opgeslagen hebt, gaan we het nu opslaan als PNG, druk op Alt+Shift+Ctrl+S en je komt in het scherm “Opslaan Voor Internet en Apparaten”. Kies voor de “PNG-24”-preset en vink Transparency aan. Waarom PNG en niet GIF? PNG biedt een mooiere transparantie voor de randen aan. Sla het op als favicon.png.

4. Vervolgens gaan we naar een online favicon-converter die van de “favicon.png”-afbeelding een mooie favicon.ico maakt. Ga naar http://tools.dynamicdrive.com/favicon/ en kies de net opgeslagen favicon.png onder “Image to create icon from:” (1) en klik op de “Create icon”-knop (2). Je favicon.ico wordt meteen aangemaakt, klik op de “Download favicon”-knop en sla deze op als favicon.ico.

De favicon op je website zetten

1. Upload je favicon.ico naar de server van je website, bijvoorbeeld http://www.jouwwebsite.nl/favicon.ico

2. In de header van jouw website (dus ergens tussen de <head></head>) plaats je de volgende HTML-code

<link rel="shortcut icon" type="image/x-icon" href="http://www.jouwwebsite.nl/favicon.ico">

3. Nu heb je een favicon toegevoegd aan je website. Mocht je bijvoorbeeld de oude favicon vervangen hebben en je ziet nog steeds de oude versie, ga dan in je browser naar http://www.jouwwebsite.nl/favicon.ico en druk op F5 en de nieuwe zou nu te zien moeten zijn.

In deze tutorial heb ik uitgelegd hoe je een favicon ontwerpt, maakt en op je website plaatst. In een volgende tutorial zal ik uitleggen om speciale favicons te maken voor tablets en smartphones.

Labels:,

Trackback van jouw site.

Laat een reactie achter


8 + vier =