Hoe voeg je een . toe Shopify Favicon voor jouw Shopify Shop

Leer de basis van wat een Shopify Favicon en hoe u er een in uw online winkel kunt plaatsen.

Als u zich abonneert op een dienst via een link op deze pagina, kan Reeves and Sons Limited een commissie verdienen. Zie onze ethische uitspraak.

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.

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.

Shopify Favicon voorbeelden

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.

online winkel

In het Shopify customizer, scrol naar de onderkant van de lijst aan de linkerkant en klik op Thema-instellingen.

thema instellingen

Stap 3: Selecteer de Favicon-knop

Zoek en selecteer de knop Favicon in de nieuwe sectie.

favicon Shopify Favicon

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.

selecteer afbeelding

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.

knop opslaan

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.

voorbeeld Shopify Favicon

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.

logo downloaden

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.

Shopify Favicon-bestand

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.

32 door 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.

grote versie

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.

kleinere versie

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.

downloaden - Shopify Favicon

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.

afbeelding voorbeeld

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.

het eindproduct - Shopify Favicon

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.

Joe Warnimont

Joe Warnimont is een in Chicago gevestigde schrijver die zich richt op eCommerce-tools, WordPress en sociale media. Als hij niet vist of yoga beoefent, verzamelt hij postzegels in nationale parken (ook al is dat vooral voor kinderen). Bekijk Joe's portfolio om contact met hem op te nemen en eerder werk te bekijken.

Heb je vragen? Stel ze hier. 0 Reacties

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Rating *

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.