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

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 het uw gebruikelijke logo op volledige 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 kun je er zelf een maken Shopify Favicon voor uw website. Ook worden grotere afbeeldingen sowieso verkleind, dus je hoeft het niet per se op exact 32 × 32 te krijgen.

Een favicon is redelijk logisch voor online winkels op Shopify omdat ze gemakkelijk 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 een ​​afbeelding te selecteren of om gratis afbeeldingen te verkennen. Ik kan me niet voorstellen dat ze gratis afbeeldingen hebben die bij uw logo passen, dus u kunt het beste op Afbeelding selecteren klikken om een ​​aangepaste afbeelding vanaf uw computer te uploaden.

Stap 4: Upload uw favicon

Kies het Favicon-bestand en upload het naar Shopify.

Daarna zie je een voorbeeld van je 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 eenvoudig lijkt om een ​​klein pictogram te genereren, is het belangrijk om het goed te doen, aangezien klanten de 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 wordt verslagen 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. Je hebt ongetwijfeld een vager beeld als je 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.
• Je kunt meestal niet zomaar je huidige logo 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 profiteren van elke vierkante pixel in de 32×32 ruimte.
• Verwijder alle tekst, aangezien deze 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 effen gekleurde achtergrond of om een ​​transparante achtergrond te maken met het voorgrondelement uitgerekt zodat het net de randen raakt. Je zult merken dat veel grotere merken een transparante achtergrond hebben voor hun Favicons.
• Het ICO-bestandsformaat werkt goed voor kleinere afbeeldingen. Als u er niet bekend mee bent, gebruik dan een PNG voor transparante achtergronden of een JPG voor Favicons met een hoge resolutie en effen achtergronden.

Hoe u een favicon voor uw Shopify Shop

Je hebt de mogelijkheid om een ​​Favicon te ontwerpen in elke ontwerpsoftware van je keuze. Als je de voorkeur geeft aan Photoshop, ga daar dan mee akkoord. Als je liever gratis software zoals GIMP of Pixlr hebt, 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 logomaker zijn werk heeft gedaan, ontvangt u een bestand met verschillende logoformaten, waaronder een Favicon.

Houd er rekening mee dat veel van de logo's waarmee u maakt Hatchful (lees onze Hatchful recensie) gebruik witruimte rond het logo, dus u moet deze mogelijk 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 de meeste ruimte en bevat 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 deze over een canvas wilt uitrekken om tekst en witruimte uit 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 uitrek.

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 goed in het vierkant past. Het is wazig, maar ik weet dat het er veel beter uitziet 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 afgedekt, gekozen voor een pictogram met een heldere en effen kleur en alle tekenen van kleinere tekst verwijderd.

De laatste stap is om het bestand te downloaden. U kunt er nu voor kiezen om er een transparante PNG van te maken. Maar voor deze tutorial blijf ik bij een hoge resolutie JPG, 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 uw favicon te testen en te bekijken, is door simpelweg een tabblad te openen met de URL van uw startpagina. Zoals je kunt zien, wordt de favicon mooi weergegeven en is hij eigenlijk een beetje beter dan mijn vorige favicon, aangezien die niet de volledige beschikbare ruimte van 32 × 32 heeft gevuld.

In Conclusie

A Shopify Het duurt niet meer dan een paar minuten om Favicon te ontwerpen en toe te voegen aan uw site, maar het is een geweldige herinnering voor 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 waarschijnlijk een lange lijst met andere sites doorzoeken wanneer ze door die secties gaan.

Houd er rekening mee dat u geen genoegen moet nemen met een wazig of onleesbaar Shopify Favicon afbeelding. Als je merkt dat het eerste favicon er niet helemaal goed uitziet, of als je wat tekst wilt wegsnijden 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 wazig of moeilijk te zien favicon ervoor dat uw merk er onprofessioneel en ietwat 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.