De identiteit van uw e-commerce winkel brengt verschillende elementen samen, zoals het logo, de sitekleuren en uw marketingmateriaal. Deze identiteit versterkt uw algehele merk en creรซert een gezonde herinnering voor uw klanten, waardoor gevoelens van comfort en betrouwbaarheid worden opgeroepen wanneer zij uw merkafbeeldingen en kleuren zien.
Hoewel klein van formaat, sluit de Favicon ook aan bij die merkstrategie. In deze zelfstudie laten we u zien hoe u een favicon maakt en toevoegt aan uw Shopify shop, waardoor uw online uiterlijk wordt afgerond en het gemakkelijker wordt om uw winkel te herkennen wanneer klanten hem bezoeken.
In dit artikel
Wat is een Shopify favicon?
A Shopify Favicon, of wat voor favicon dan ook, is een klein pictogram voor uw website dat op het browsertabblad naast de naam van uw website wordt weergegeven.
De adresbalk van de browser is het meest gebruikelijke gebied om de site Favicon te bekijken, maar komt ook voor op de volgende locaties:
- Toolbar-apps
- bladwijzers
- Geschiedenis resultaten
- Zoekbalken
- Soms wanneer gedeeld op sociale media
In wezen, wanneer de browser een link naar uw website moet weergeven en er niet veel ruimte is voor andere inhoud, vervangt deze uw gebruikelijke logo op ware grootte door het Favicon.
Standaard Shopify voegt de Shopify logo voor je favicon, dus we moeten dat veranderen.
Een goede favicon is vaak een kleinere versie van uw logo, maar soms variรซren ze een beetje omdat u zeker wilt zijn dat ze zichtbaar zijn, alle toegewezen ruimte in beslag nemen en een beetje kleur toevoegen naast uw websitenaam.
Standaard ondersteunen alle browsers Favicons van 32ร32 pixels. Dat is een vrij kleine afbeelding, maar met behulp van enkele online generatoren kunt u uw eigen afbeelding maken Shopify Favicon voor uw website. Ook worden grotere afbeeldingen toch verkleind, dus je hoeft het niet per se precies op 32ร32 te krijgen.
Een favicon is redelijk logisch voor online winkels op Shopify omdat ze eenvoudig toe te voegen zijn en het belangrijk is om uw merkidentiteit als online verkoper te versterken. Sommigen beweren ook dat het helpt bij SEO.
Blijf lezen voor meer informatie over het toevoegen van Favicon aan uw Shopify shop in shop.
Hoe u een favicon aan uw Shopify Winkel โ Beknopte handleiding
Zoals gezegd, bij het runnen van een site via Shopify het voegt automatisch een Shopify logo als de Favicon van uw site. Daar is niets mis mee, maar het is veel professioneler en merkgerichter om je eigen logo op te nemen. Hier zijn de stappen die u moet volgen:
Stap 1: Ga naar uw Shopify dashboard
Ga daarom naar je Shopify dashboard en klik op Online winkel onder Verkoopkanalen.
Stap 2: Navigeer naar Thema-instellingen
Navigeer naar uw thema's en klik op de knop Aanpassen naast uw huidige thema. Hoewel de instellingen van thema tot thema veranderen, zijn ze allemaal de meest recente Shopify thema's hebben een sectie om het favicon te wijzigen.
In het Shopify customizer, scrol naar de onderkant van de lijst aan de linkerkant en klik op Thema-instellingen.
Stap 3: Selecteer de Favicon-knop
Zoek en selecteer de knop Favicon in de nieuwe sectie.
Dit onthult een knop om afbeelding te selecteren of gratis afbeeldingen te verkennen. Ik kan me niet voorstellen dat ze gratis afbeeldingen hebben die overeenkomen met je logo, dus je kunt het beste op Afbeelding selecteren klikken om een โโaangepaste afbeelding van je computer te uploaden.
Stap 4: Upload uw favicon
Kies het Favicon-bestand en upload het naar Shopify.
Daarna ziet u een voorbeeld van uw Favicon-pictogram. Om de wijzigingen permanent te maken, selecteert u de knop Opslaan in Shopify.
Om je te bekijken Shopify favicon in actie, ga naar de frontend van uw website en bekijk het huidige browsertabblad. U zou het favicon naast de titel van uw site moeten zien.
Tips voor het maken van uw favicon
Hoewel het gemakkelijk lijkt om een โโklein pictogram te genereren, is het belangrijk om het goed te doen, aangezien klanten het Favicon zien wanneer ze naar uw site komen. Het is ook gemakkelijk om een โโFavicon te maken die wazig is of niet de hele ruimte vult, waardoor het doel van de Favicon teniet wordt gedaan, omdat het niet zo zichtbaar is voor het oog.
Om eventuele problemen op te lossen, volgen hier enkele tips voor het maken van uw Shopify favicon:
- Begin uw ontwerp groter dan 32 ร 32 en verklein het indien nodig. U krijgt ongetwijfeld een waziger beeld als u probeert een kleiner beeld in de ruimte uit te rekken. Als u bijvoorbeeld een afbeelding van 32ร32 van Hatchful neemt en deze probeert uit te rekken om het geschreven deel van het logo te verwijderen, kan dit problemen veroorzaken.
- U kunt uw huidige logo meestal niet zomaar nemen en verwachten dat het perfect werkt als een Favicon.
- Favicon's zien er geweldig uit als je elke pixel van de beschikbare ruimte bedekt. Je hebt niet veel ruimte, dus je moet van alles profiteren square pixel in de 32 ร 32 ruimte.
- Verwijder alle tekst, aangezien het moeilijk te lezen is in een Favicon. De uitzondering is als uw primaire logo-element een grote letter is.
- Maak opnamen voor effen, helderdere kleuren. Eenvoudige, cartoonachtige logo's werken het beste.
- Bekijk de Favicons van uw favoriete merken. Wat hebben ze gedaan om ervoor te zorgen dat hun online imago doorkomt met een favicon?
- Overweeg om de hele ruimte op te vullen met een achtergrond in een effen kleur of om een โโtransparante achtergrond te maken met het voorgrondelement uitgerekt zodat het net de randen raakt. U zult merken dat veel grotere merken transparante achtergronden hebben voor hun Favicons.
- Het ICO-bestand format werkt goed voor kleinere afbeeldingen. Als je niet bekend bent, gebruik dan een PNG voor transparante achtergronden of een JPG voor Favicons met een hoge resolutie met effen achtergronden.
Hoe u een favicon voor uw Shopify Shop
Je hebt de mogelijkheid om een โโFavicon te ontwerpen in elke ontwerpsoftware naar keuze. Als je de voorkeur geeft aan Photoshop, ga daar dan mee akkoord. Als je liever gratis software zoals GIMP of Pixlr gebruikt, werken ze allemaal zolang je je aan de vereiste afmetingen van 32ร32 houdt.
Je hebt ook de mogelijkheid om een โโFavicon te maken met Shopify's Hatchful-logo en gratis Favicon-generator. Bekijk onze hele gids Op het gebruik van Hatchful om een โโlogo te bouwen.
Zodra de maker van het logo zijn werk doet, krijgt u een bestand gevuld met meerdere logo's formats, waarvan er รฉรฉn een Favicon is.
Houd er rekening mee dat veel van de logo's waarmee u maakt Hatchful (lees onze Hatchful recensie) gebruik witruimte rond het logo, dus het kan zijn dat u deze moet aanpassen zodat de afbeelding het grootste deel van de ruimte beslaat. Over het algemeen heb ik gemerkt dat je het meegeleverde Hatchful-favicon alleen moet gebruiken als het er al goed uitziet (het vult het grootste deel van de ruimte en heeft geen kleine elementen zoals tekst).
Als dat niet het geval is, gebruik dan bewerkingssoftware van derden, zoals Photoshop of Pixlr, om enkele onnodige elementen te verwijderen.
belangrijk: U moet een grotere versie van de afbeelding gebruiken als u van plan bent deze over een canvas te spannen om tekst en witruimte weg te snijden. Hiervoor heb ik Hatchful gebruikt om logo's te genereren, maar ik heb eigenlijk een van de grote logo's genomen (niet het meegeleverde Favicon-bestand), omdat ik niet wil dat er vervaging optreedt wanneer ik het over het canvas van 32ร32 span.
Kies in je bewerkingssoftware een nieuw canvas met de breedte en hoogte beide ingesteld op 32.
Maak een laag voor de nieuwe afbeelding en zorg ervoor dat de afbeelding groter is dan het canvas van 32 ร 32, aangezien u deze wellicht uitrekt. Upload of plaats de afbeelding vervolgens op het canvas.
In de volgende schermafbeelding heb ik het Favicon-ontwerp ingezoomd, zodat ik kan controleren of het past in het square naar behoren. Het is wazig, maar ik weet dat het er veel beter uit zal zien als ik uitzoom.
Zoals je kunt zien, ziet de uitgezoomde versie van de Favicon in de Pixlr-ontwerper er goed uit. Ik heb het grootste deel van de toegewezen ruimte bedekt, gekozen voor een helder en effen kleurenpictogram en alle tekenen van kleinere tekst verwijderd.
De laatste stap is het downloaden van het bestand. U kunt er op dit moment voor kiezen om er een transparante PNG van te maken. Maar voor deze tutorial blijf ik bij een JPG met hoge resolutie, zodat deze er zo scherp mogelijk uitziet. En ik vind het niet erg om een โโachtergrond met een effen kleur te hebben.
Ga terug naar je Shopify dashboard. Klik op Online winkel> Thema's> Aanpassen.
Ga dan naar Thema-instellingen> Favicon.
Upload dat nieuwe favicon en klik op de knop Opslaan in het Shopify editor.
Nogmaals, de belangrijkste manier om je Favicon te testen en te bekijken, is door simpelweg een tabblad te openen met de URL van je startpagina. Zoals je kunt zien, komt de Favicon mooi naar voren en is hij eigenlijk een beetje beter dan mijn vorige Favicon, aangezien die niet de hele beschikbare ruimte van 32 ร 32 vulde.
In Conclusie
A Shopify Het kost niet meer dan een paar minuten om Favicon te ontwerpen en aan uw site toe te voegen, maar het is een prachtige herinnering aan uw bezoekers op welke website ze zich bevinden. Bovendien kan het dienen als een manier voor mensen om uw website te vinden in hun bladwijzers en browsergeschiedenis, aangezien ze hoogstwaarschijnlijk door een lange lijst met andere sites zoeken wanneer ze door die secties gaan.
Houd er rekening mee dat u geen genoegen moet nemen met wazig of onleesbaar Shopify Favicon-afbeelding. Als je merkt dat de eerste Favicon er niet helemaal goed uitziet, of als je wat tekst wilt wegknippen of een transparante achtergrond wilt toevoegen, ga dan terug naar het begin en doe het goed. Hoewel het geen goed idee is om helemaal geen Favicon te hebben, zorgt een wazige of moeilijk te zien Favicon ervoor dat uw merk er onprofessioneel en een beetje dom uitziet.
Als je vragen hebt over het toevoegen van favicons aan Shopify, of je eigen maken Shopify Favicon, laat het ons weten in de comments hieronder.
Heb je vragen? Stel ze hier. 0 Reacties