Hoe maak ik een Favicon voor uw Blog

heeft uw blog een aangepaste favicon? Zo niet, dan moet het echt. Vandaag zullen we leren wat een favicon is, waarom je er een nodig hebt, en tot slot hoe je een favicon voor uw blog of website te maken.

ik zie nog steeds tonnen blogs zonder een, dus als uw blog is een van hen, doe jezelf een plezier en maak er nu een met behulp van de tutorial hieronder. Ik beloof dat het niet lang duurt en het is ook leuk!

bijgewerkt: 11/4/2020

openbaarmaking: dit bericht kan affiliate links bevatten (aangeduid met een *) wat betekent dat ik een kleine commissie kan ontvangen als u ervoor kiest om een aankoop te doen met mijn link. Ik waardeer uw steun en zal nooit producten aanbevelen die ik niet alleen sta.

Ten eerste, wat is een Favicon?

een Favicon, uitgesproken als fave-icon, is een afkorting voor favorieten pictogram dat werd genoemd omdat ze verschijnen in uw lijst van Website Bladwijzers, met andere woorden, uw favoriete websites. Favicons zijn een kleine versie van uw logomark die wordt weergegeven als een browser tabpictogram, een bladwijzerpictogram of een snelkoppeling.

Favicons zijn een snelle manier voor gebruikers om uw website op het eerste gezicht te herkennen. Neem een kijkje op mijn browser tabs hieronder. Herkent u de meeste websites die ik hier heb geopend?

Waarom moet u een Favicon aanmaken?

wanneer u geen aangepaste favicon aan uw blog of website toewijst, wordt er een algemeen of helemaal geen pictogram aan toegewezen. In het slechtste geval maakt uw blog gebruik van favicon van uw hostingbedrijf. Op zijn best, elke browser wijst zijn eigen ding voor u: Chrome voegt een kleine wereldbol (zie afbeelding hierboven), Safari voegt de eerste initiaal van de URL van uw website in een grijze doos (zie afbeelding hieronder), en Firefox voegt helemaal niets. Hoe dan ook, over saai gesproken!

kijk nogmaals naar de browsertabs hierboven. Met herkenbare pictogrammen maakt het gemakkelijk om snel heen en weer te klikken tussen websites is het niet? Als u een website opslaat in uw bladwijzers, ziet u ook de favicon in uw bladwijzerlijst. Dit maakt het gemakkelijk om snel te vinden wat u zoekt. Help uw lezers snel uw blog te vinden in hun tabbladen of bladwijzers door het opnemen van een favicon.

er is nog een andere plaats waar favicons niet voorkomen: als u websites hebt die u vaak op uw telefoon bezoekt, kunt u ze altijd als snelkoppeling aan het startscherm van uw telefoon toevoegen. Als uw lezers houden van een bezoek aan uw site vaak, ze kunnen willen een snelkoppeling toe te voegen aan het van hun startscherm, zodat u zeker wilt dat ze een mooi uitziende pictogram te onderscheiden van de andere app pictogrammen die ze al hebben toegevoegd.

en hier is een nieuw tabblad van Safari. Stel je website snelkoppeling hier. U wilt niet dat uw blog vertegenwoordigd door een saaie grijze pictogram zoals de” C ” icoon hieronder doe je?

hoe een Favicon voor uw Blog te ontwerpen

enkele ontwerpregels voor het maken van een Favicon

laten we eerst een aantal best practices bespreken voor het ontwerpen van uw favicon.

1. uw favicon moet zichtbaar en direct herkenbaar zijn
   de beste manier om uw favicon herkenbaar te maken is door uw logo als uitgangspunt te gebruiken. Zelfs als uw blog is niet super beroemd nog, dat is ok. Met behulp van consistente ontwerpelementen en thema ‘ s in uw branding zal helpen het te onderscheiden van de rest en helpen mensen uiteindelijk uw merk te herkennen.Hier zijn een paar opties voor u om te overwegen als u het ontwerp van uw favicon:
   • uw logo of logomark
   • eenvoudiger variant van uw logo
   • een symbool of pictogram dat voor uw merk
   • de initialen (of de eerste) van uw merknaam – zorg ervoor dat de stijl van de letters overeenkomt met de eerste logo ’s ontwerp en stijl
   • een eenvoudige foto – de laatste tijd heb ik het zien van bloggers met behulp van hun profiel foto’ s te maken van een favicon
2. Uw favicon moet gebruik maken van een zeer eenvoudig ontwerp
   Neem een goede blik op de favicons uw browser tabs nu. Wat valt je op? Ze zijn klein! De typische favicon wordt weergegeven op 16 x 16 pixels. Om deze reden is het belangrijk om ervoor te zorgen dat u een zeer vereenvoudigde versie van uw logo of branding element te gebruiken. Gedetailleerde en uitgebreide graphics zullen niet goed schalen op zo ‘ n klein formaat. Ze zullen er waarschijnlijk uitzien als een wazige puinhoop.
3. zorg ervoor dat uw favicon goed contrasteert met lichte en donkere achtergronden
   afhankelijk van de voorkeuren van uw lezers, kunnen hun browsertabs wit, zwart, licht of donkergrijs zijn. Om deze reden, wilt u ervoor zorgen dat u een favicon met kleuren die goed contrasteren op zowel lichte als donkere achtergronden te maken.Sommige favicons hebben transparante achtergronden en ze werken omdat hun kleuren goed contrasteren op elke achtergrond. Als uw afbeelding te licht of te donker is, kan het helpen om een effen gekleurde cirkel of vierkant achter de afbeelding of logo toe te voegen om het te laten opvallen en leesbaar te zijn op elk gekleurd tabblad.
4. kijk naar de tabbladen van uw browser voor inspiratie
   klik op het web en kijk naar de favicons die op uw favoriete websites worden gebruikt. Merk op of ze werken op lichte of donkere achtergronden. Heeft de afbeelding een transparante achtergrond of staat hij op een gekleurd vierkant of cirkel?

Favicon inspiratie

Favicons met behulp van transparantie

merk op hoe deze pictogrammen kunnen opvallen op een donkere of lichte achtergrond, behalve op de laatste, ‘ Say Yes.’Die had waarschijnlijk op een wit vierkant moeten staan. Het is moeilijk te zeggen, maar het vierde icoon, De lotusbloem, heeft een zeer fijne zwarte omtrek. Op deze manier kunt u het gemakkelijk zien, zelfs als het wordt bekeken op licht gekleurde tabbladen.

Favicons met een gekleurde achtergrond

deze favicons zijn ontworpen met een vierkante of afgeronde vierkante achtergrond om ervoor te zorgen dat ze duidelijk zichtbaar zijn op zowel donkere als lichte tabbladen.

Favicons met initialen

sommige van deze initialen pictogrammen gebruiken een gekleurde achtergrond, sommige gebruiken een transparante achtergrond. Hoe dan ook, zorg ervoor dat het leesbaar is.

Favicons die een profielfoto gebruiken

het gebruik van een profielfoto lijkt een nieuwe trend te zijn die aanslaat. Als u deze route, zorg ervoor dat dezelfde profielfoto te gebruiken in al uw online profielen, zodat het is direct herkenbaar.

Hoe maak je een Favicon voor je Blog

Maak een Favicon-bestand stap-voor-stap

1. maak de afbeelding in een afbeeldingsbewerker
   met behulp van een afbeeldingsbewerker zoals Photoshop (meld je aan voor een gratis proefperiode)*, Pixlr, BeFunky of Canva,* maak je favicon-bestand met 512 x 512 pixels. Hoewel het wordt weergegeven op slechts 16×16 in browser tabbladen, het zal ook worden weergegeven op grotere maten in een aantal van de andere toepassingen die ik hierboven vermeld.
2. voorbeeld van uw Favicon in klein formaat
   als u klaar bent met het maken van een grafische favicon, zoomt u uit de afbeelding totdat uw afbeelding klein wordt, ongeveer zo groot als de favicons die u in uw browser ziet. Is het nog leesbaar? Is het logisch? Als dat zo is, geweldig, ga dan naar de volgende stap.
3. sla het bestand
   op sla eerst uw afbeelding op als een bewerkbaar bestand in uw softwareprogramma, zodat u terug kunt gaan en het kunt verfijnen als dat nodig is.Sla het vervolgens op als een PNG-bestand.
4. Genereer een Favicon.ico-bestand
   gebruik een favicon-generator om uw PNG-bestand naar een ICO-bestand te converteren. Deze stap is noodzakelijk omdat sommige browsers alleen ICO-bestanden lezen.

alternatieven voor uw eigen ontwerp vanaf nul

als u een snelle en eenvoudige manier wilt om een tekst of initialen favicon te maken, gebruik dan de tekst > ICO favicon generator. Deze heb ik snel gemaakt voor DYOB.:

u kunt ook de emoji > ICO favicon generator gebruiken als u het uzelf echt gemakkelijk wilt maken.

voeg uw nieuwe Favicon toe aan uw Blog of Website

WordPress

de makkelijkste manier om een favicon toe te voegen aan een zelfgehoste WordPress blog is door in te loggen op uw dashboard. Ga dan naar Uiterlijk > aanpassen en klik vervolgens op het tabblad Siteidentiteit. Onder de site pictogram sectie, selecteer uw nieuwe favicon.te uploaden ico-bestand.

en boom, je bent klaar, check it out in uw browser! Merk op dat u mogelijk een paar keer moet vernieuwen en/of de cache in uw browser moet wissen voordat deze verschijnt.

een favicon toevoegen aan een WordPress.com blog.

Squarespace

het is heel eenvoudig om ook een favicon aan Squarespace toe te voegen.

Blogger

Log in op uw blog en klik op Instellingen in de linkerkolom. Klik vervolgens op Favicon onder de basic sectie. Upload vervolgens uw favicon.ico bestand, opslaan en boem!

Test uw nieuwe Favicon

als u wilt testen hoe uw favicon eruit ziet op verschillende platforms en instellingen, gebruik dan deze favicon Checker. Als u wilt bewerken van de manier waarop uw pictogrammen kijken in een van de platforms, zeggen iOS (iPhones), u kunt de generator gebruiken om ze te optimaliseren voor elke instelling. Volg dan gewoon de instructies om ze allemaal toe te voegen aan uw blog.

u heeft net geleerd hoe u een Favicon

maakt Gefeliciteerd! Bij het ontwerpen van uw eigen blog, u wilt ervoor zorgen dat u geen details weg te laten, zelfs de kleinste degenen. Het toevoegen van een aangepaste favicon om het niet alleen helpt uw lezers snel uw blog te vinden in hun tabbladen of bladwijzers, het toont aan dat u de zorg over het houden van uw branding consistent.

nu is het jouw beurt

laat het me weten in de comments als je vragen hebt over het maken van een favicon of als je hulp nodig hebt bij het identificeren van een type favicon voor je merk. Anders, deel uw favicon met ons in de reacties!
en als je deze tutorial leuk vond, deel het dan door op een van de pictogrammen onder mijn handtekening te klikken!
dit bericht werd oorspronkelijk gepubliceerd op 14-8-2013 en bijgewerkt op 11-11-2015, vervolgens opnieuw op 11/4/2020.