Een favicon is dat coole plaatje naast je adresbalk in je browser. Het is wat uw site onderscheidt op het tabblad Bladwijzers en kan worden gebruikt om de naamsbekendheid te vergroten. Als je een site hebt, maar nog nooit hebt overwogen om een favicon te maken, moet je je beslissing heroverwegen. Steeds vaker gebruiken softwareontwikkelaars favicons voor verschillende aspecten van hun toepassingen, zoals pictogrammen op het startscherm op tablets. Gelukkig is het ontwerpen, maken en implementeren van een favicon iets dat bijna iedereen kan doen als ze de juiste stappen volgen.
Stappen
Methode 1 van 3: Uw Favicon ontwerpen
Stap 1. Maak een favicon die uw website vertegenwoordigt
Het type website dat u heeft, moet het uiterlijk van uw favicon bepalen. Probeer iets te ontwerpen dat past bij uw merkimago en dat herkenbaar en gedenkwaardig is voor mensen. Uw favicon is het eerste dat mensen zien als ze naar de tabbladen in hun browser kijken en verschijnt ook in de bladwijzers van mensen.
- Als u bijvoorbeeld een voedselwebsite heeft, kan het kiezen van een favicon met fruit of groente als ontwerp ervoor zorgen dat het meer memorabel wordt.
- Als uw website voor een advocatenkantoor of investeringsmaatschappij is, is een traditioneel en strak favicon het beste.
- Als je website gericht is op jongere mensen, probeer dan een speelse en kleurrijke favicon te maken.
Stap 2. Bepaal of je een transparante achtergrond wilt
Als u geen achtergrond aanwijst, wordt deze wit ingevuld, wat mogelijk niet past bij uw merk. Een transparante achtergrond krijgt de kleur van de browser van de persoon en ziet er in sommige gevallen gestroomlijnder uit. In andere gevallen zorgt het hebben van een kleur voor de achtergrond ervoor dat de letters of afbeeldingen op de voorgrond eruit springen. Bepaal wat het beste is voor uw ontwerp en houd het in gedachten terwijl u het maakt.
Het meest basale favicon is een vierkant van 16x16 en heeft een achtergrondkleur
Stap 3. Maak een favicon die gemakkelijk te lezen is
Omdat de favicon-afbeelding die u gaat gebruiken klein is, is het belangrijk dat u uw merk kunt overbrengen zonder uw bezoekers in verwarring te brengen. Een favicon die moeilijk te lezen is, laat een negatieve indruk achter en kan bij de bezoeker vragen oproepen over de kwaliteit van het werk dat u kunt leveren. Al te complexe afbeeldingen en logo's zien er niet goed uit wanneer ze worden verkleind tot 16x16 of 32x32 pixels.
- Als je bestaande logo te ingewikkeld is, kun je tactieken gebruiken om het te vereenvoudigen, zodat het herkenbaar is op favicon-formaat. Gebruik initialen in plaats van de volledige bedrijfsnaam, of ontwerp een eenvoudig pictogram in plaats van een afbeelding.
- Als je al een eenvoudig logo hebt, kun je de afbeelding verkleinen en instellen als je favicon. Mogelijk moet u het wijzigen voordat u het naar een pictogrambestand converteert.
- U kunt ook een afbeelding van een object gebruiken die het algemene thema van uw site beschrijft.
Stap 4. Maak een esthetisch verantwoorde favicon
De structuur van je favicon wordt de vorm genoemd. Favicons nemen meestal vormen aan, zoals een cirkel of een vierkant. Wanneer u uw favicon ontwerpt, is het over het algemeen beter als het in een van deze basisvormen past, omdat vrije vormen vaak verward of verward kunnen raken bij 16x16 pixels. Een ander belangrijk aspect van uw ontwerp is de esthetische eenheid. Esthetische eenheid omvat de details en afmetingen van verschillende componenten in uw favicon en hoe uw favicon in balans is. Hoe uniformer de details, hoe meer samenhang uw favicon eruit zal zien. Het gebruik van verschillende lettertypen of -groottes in uw favicon is bijvoorbeeld niet prettig voor het oog en kan uw favicon er verward of rommelig uit laten zien.
- Een ander voorbeeld van esthetische eenheid is het behouden van afgeronde hoeken door de vormen in uw favicon.
- Een goed voorbeeld van een icoon dat van vorm is veranderd, is het favicon van Google. Het is veranderd van een vierkant in een cirkel.
Stap 5. Gebruik kleuren die bij uw merk passen
Wanneer u uw favicon maakt, moet u deze maken in 8 bit (256 kleuren) of 24 bit (16,7 miljoen kleuren) kleurdiepte, omdat dit werkt in moderne browsers. Zorg ervoor dat de kleuren die u kiest elders op uw website te vinden zijn of op de een of andere manier met uw merk worden geassocieerd. Een favicon met kleuren die niet op uw website, logo of applicaties staan, zal niet memorabel zijn en mensen kunnen het pictogram niet aan uw merk koppelen.
- Sommige creatieve toepassingen van favicon-kleuren omvatten GitHub, die van kleur verandert afhankelijk van uw systeemstatus en Trello, die verandert afhankelijk van uw achtergrondkleur.
- De meest gebruikte kleuren in favicons zijn rood en blauw.
Stap 6. Houd rekening met je publiek bij het ontwerpen van een favicon
Naast het identificeren van uw merk, moet uw favicon er aantrekkelijk uitzien voor uw bezoekers. Mensen met verschillende smaken, interesses en maatschappelijke normen zullen verschillende iconologie vanuit verschillende perspectieven bekijken. Culturele verschillen bestaan binnen onze samenleving en kunnen het publiek dat u probeert aan te trekken verwarren of afstoten.
Mac Os X gebruikt bijvoorbeeld een postzegel, een universeel symbool voor post. Het gebruik van een mailbox zou niet zo effectief zijn omdat mailboxen in verschillende delen van de wereld verschillen
Stap 7. Vraag de mening van vrienden en collega's
Hoewel het grafisch niet ongelooflijk intensief is, is een favicon een belangrijk onderdeel van uw merk. Denk bijvoorbeeld aan je favoriete websites zoals Twitter, Gmail, Facebook of wikiHow, en in hoeverre je de favicon associeert met het merk. Als je geen goed oog hebt voor design, of je twijfelt over het soort ontwerp dat je voor je site moet hebben, raadpleeg dan vrienden die oog hebben voor design of die in grafisch ontwerp werken.
- Vraag eens rond in je netwerk van vrienden of iemand gratis ontwerpadvies kan geven.
- Grotere bedrijven hebben grafisch ontwerpers in huis die het favicon-imago kunnen creëren.
Methode 2 van 3: Uw Favicon maken
Stap 1. Gebruik fotobewerkingssoftware om uw favicon te maken
U kunt fotobewerkingssoftware zoals Adobe Photoshop of Illustrator gebruiken om de afbeelding voor uw favicon te maken. Met deze softwareapplicaties kunt u ook het formaat wijzigen en de afbeelding in het juiste formaat exporteren. Met sommige software kunt u uw favicon met de hand maken.
- Er zijn ook favicon-specifieke bewerkingsprogramma's die u online kunt vinden.
- Gebruik een zoekmachine en typ 'favicon-editors'.
- Maak je canvasformaat 512x512 pixels, want dit aantal valt uiteen in de meest toepasselijke faviconformaten en is nog steeds groot genoeg om effectief te bewerken.
- Andere populaire fotobewerkingssoftware omvat GIMP, PhotoScape en Paint. NET.
- Als u deze software gebruikt, kunt u de.ico-bestanden niet rechtstreeks bewerken, maar u kunt.png-,.jpg- of.gif-bestanden gebruiken en ze later converteren.
Stap 2. Pas het formaat aan en sla je favicon op
32x32 px is de grootte van Windows-bureaubladitems, terwijl 16x16 px de grootte is van favicons op het tabblad van uw browser. Nadat je je favicon in een groter formaat hebt gemaakt, is het belangrijk om het formaat te verkleinen, zodat je kunt zien hoe het eruit zal zien in de browsers van mensen. Als het onleesbaar of niet esthetisch aantrekkelijk is, begin dan opnieuw met uw oorspronkelijke ontwerp. Denk na over de platforms waarop uw website of applicatie waarschijnlijk zal worden gebruikt en maak vervolgens een favicon om al uw bases te dekken.
- Het is belangrijk op te merken dat verschillende hardware en software verschillende faviconformaten gebruiken.
- Enkele andere favicon-formaten zijn 57x57px voor het standaard iOS-startscherm, 72x72px voor de iPad, 96x96px voor Google TV, 128x128px voor de Chrome Web Store en 195x195px voor de Opera Speed Dial.
- Als je al je bases wilt bedekken, kun je versies van je favicon in elk van deze maten maken.
- Sla aparte versies van je favicon op, zodat je het werk dat je hebt gedaan niet kwijtraakt.
Stap 3. Combineer uw bestanden met behulp van een converter
Het mooie van.ico-bestanden is dat je meer dan één bestand kunt combineren om het te maken. Dit is handig omdat verschillende browsers en software een favicon van verschillende grootte willen hebben. Om ervoor te zorgen dat uw favicon er goed uitziet op alle verschillende platforms, converteert u uw bestanden met een online converter. Typ "icon converter" in uw favoriete zoekmachine om gratis online applicaties te vinden om dit te doen. Sla het samengevoegde bestand op als "favicon.ico."
- U kunt ook een programma zoals GIMP gebruiken dat een ingebouwde functie heeft, of een plug-in downloaden met de naam ICO FORMAT naar Adobe Photoshop.
- Maak een nieuwe map zodat u nieuwe favicons of werken in uitvoering kunt opslaan.
- Typ ".ico converter" of "favicon generator" in een zoekmachine om verschillende tools te vinden die je kunt gebruiken.
Methode 3 van 3: Uw Favicon implementeren
Stap 1. Upload je favicon als je een website-editor gebruikt
Veel website-editors hebben een ingebouwd formulier waarmee u uw favicon automatisch naar uw website kunt uploaden. Als je een website-editor gebruikt waarin dit is ingebouwd, zoek dan naar opties met de tekst 'Upload Favicon' of 'Voeg Favicon toe' in het instellingenmenu van je website. Selecteer uw favicon.ico-bestand en upload het naar uw site.
Als u geen plaats kunt vinden om uw favicon te uploaden in uw website-editor, moet u dit handmatig doen
Stap 2. Upload het bestand naar de hoofdmap van uw site
Als uw website File Transfer Protocol of FTP ondersteunt, kunt u uw FTP-client gebruiken om uw nieuwe favicon.icon-bestand te uploaden naar uw root(index)-directory. Zo niet, dan moet u naar uw webhosts-pagina gaan en de afbeelding handmatig uploaden. Vergeet niet om het bestaande favicon.ico-bestand te vervangen door uw nieuwe bestand.
Stap 3. Voeg het bestand toe aan je header
Zoek de plaats waar u toegang hebt tot de PHP- en CSS-bestanden voor uw site. Ga naar het header.php-bestand van je site en bewerk het. Onder het tagtype,"
-
. Dit zou uw site moeten verbinden met uw favicon.
Omdat je PHP gebruikt, betekent dit dat alle sites die je headerbestand gebruiken nu hetzelfde favicon hebben
Maak je eigen Favicon-pictogram Stap 14 Stap 4. Ververs uw browser
Als je klaar bent met het uploaden van de favicon, kun je je browser vernieuwen om je nieuwe afbeelding naast de adresbalk te zien. Om rechtstreeks naar een afbeelding van uw bijgewerkte favicon te gaan, typt u 'https://www.uwdomein.com/favicon.ico'.
- Als uw favicon in eerste instantie niet verschijnt, moet u mogelijk de cache van uw browser opnieuw instellen.
- Om uw cache te wissen, gaat u naar de instellingen van uw browser en verwijdert u uw tijdelijke internetbestanden, cookies en geschiedenis.
