Favicons zijn een belangrijk onderdeel van digitale marketing. Ze helpen bij het visueel identificeren van uw bedrijf in de brede internetruimte. De gebruikerservaring op uw website kan worden verbeterd en de merkherkenning kan worden vergroot door deze kleine maar krachtige elementen. In dit bericht leer je meer over wat een favicon-afbeeldingspictogram is, inclusief hun grootte, hoe je er een kunt maken voor je website met behulp van een generator, hoe ze SEO beïnvloeden en hoe je er een kunt toevoegen met behulp van HTML.
Wat is een Favicon?
Een favicon is een klein afbeeldingspictogram van 16×16 pixels dat dient als branding voor uw website. Het belangrijkste doel is om het voor gebruikers eenvoudiger te maken om uw pagina te vinden wanneer ze meerdere tabbladen open hebben staan.
Een favicon functioneert vanwege zijn kleine formaat het best als een eenvoudige afbeelding of één tot drie tekens tekst. Favicons en logo's zijn soms hetzelfde, maar ze mogen niet door elkaar worden gehaald. De favicon moet mogelijk nog kleiner zijn of een deel van het originele logo van een bedrijf zijn vanwege het kleine formaat en de lage resolutie.
Waar kun je het Favicon-afbeeldingspictogram zien?
De favicon voor uw website kan naast identificerende elementen worden geplaatst. Dit omvat zoekbalken, geschiedenisresultaten, werkbalk-apps, bladwijzers en tabbladen.
Favicons zijn te vinden op:
- De zoekbalk.
- Zoek geschiedenis.
- Werkbalk-apps.
- Bladwijzers.
- Aanbevelingen voor uw zoekbalk.
- Het vervolgkeuzemenu van uw bladwijzers.
Door er een te gebruiken, kunt u ervoor zorgen dat mensen uw website snel kunnen herkennen. Deze favicons kunnen online bezoekers helpen om pagina's die ze hebben bezocht onmiddellijk te identificeren.
Waarom is het Favicon-pictogram belangrijk?
Een eenvoudige maar cruciale stap bij het opzetten van een bedrijfswebsite is het maken van een favicon-pictogram. Het geeft uw website meer autoriteit en bevordert zowel uw internetreputatie als het vertrouwen van potentiële klanten.
Ze dienen als een eerste visuele aanwijzing voor de website, maken een snelle en gemakkelijke identificatie voor webgebruikers mogelijk en brengen alle verschillende elementen van de browser samen om een uniforme surfervaring met een goed merk te creëren.
Maak een favicon
Bij het maken en ontwerpen van een favicon-pictogram voor uw website zijn er verschillende factoren waarmee u rekening moet houden. Hoewel klein en eenvoudig, kan (en zou) het een aanzienlijke impact moeten hebben. Aangezien bezoekers uw merk zullen associëren met uw favicon, is het van cruciaal belang om de beste versie van deze afbeelding te maken. Houd rekening met het volgende om uw favicon-afbeeldingspictogram te maken:
#1. Gebruik de ruimte verstandig
Soms kan een favicon niet zomaar een verkleinde replica van uw bedrijfslogo zijn. Er moet rekening worden gehouden met de volledige grootte van uw favicon. U moet zich aan 16px houden, aangezien alle browsers dit toestaan.
#2. Eenvoud
Ook al dient het favicon van je merk als logo, je moet proberen je ontwerp zo rechtlijnig mogelijk te houden. De eenvoudigste favicons werken het beste. Vanwege het kleine formaat van de favicon en het gebruik van eenvoudige ontwerpen, zijn kleuren essentieel om de aandacht van potentiële klanten te trekken en op te vallen. Het favicon ziet er alleen rommelig en ongeorganiseerd uit als er te veel details zijn.
#3. Merkidentiteit
Uw favicon moet visueel aan gebruikers overbrengen waar uw bedrijf voor staat, aangezien het de visuele weergave is van uw merk. Dit legt hen meteen uit wat uw merk is en wat het bereikt.
Probeer inventief te zijn, ook al is dat moeilijk met zo'n klein en eenvoudig ontwerp.
#4. Afkorten
Het vinden van het ideale imago is misschien niet haalbaar voor wat uw bedrijf doet. Het gebruik van de eerste letter van uw bedrijfsnaam of acroniemen is hiervoor een typische oplossing. U kunt er ook voor kiezen om de naam van uw bedrijf in te korten. Probeer een paar verschillende variaties uit en kies degene die het beste bij je past.
#5. Kleurcoördinatie
De selectie van kleuren moet ook worden overwogen. Contrasterende kleuren maken het voor het oog eenvoudig om onderscheid te maken tussen vormen en het belangrijkste kenmerk van uw favicon. Omdat er zo weinig favicons zijn, moet u uw bedrijf vertegenwoordigen bij de gebruiker en kan kleurkeuze belangrijk zijn. Onthoud dat elke browser enigszins van elkaar verschilt. Sommige hebben bijvoorbeeld een grijze, zwarte of witte achtergrond die wordt bedekt door je favicon.
generator favicon
De beste favicon-generatoren op internet staan hieronder vermeld. U uploadt gewoon uw favicon-afbeelding met behulp van de functies die beschikbaar zijn voor de favicon-generator. De afbeelding wordt vervolgens door de generatorsoftware geconverteerd naar de juiste favicon-indelingen en toegankelijk gemaakt om te downloaden. Dit proces zal niet lang duren.
ICO en PNG zijn de geaccepteerde bestandsindelingen voor favicons.
- Alle browsers, inclusief Internet Explorer, zijn compatibel met ICO.
- Een ander populair formaat is PNG. Het belangrijkste nadeel is dat een PNG-bestand niet wordt ondersteund door Internet Explorer.
Idealiter zou je je favicon in beide formaten moeten kunnen krijgen van de generator die je selecteert.
#1. Favikon
Het is eenvoudig om een favicon te maken in Favikon. Om een pictogram te maken, uploadt u gewoon een afbeelding, snijdt u deze bij en krijgt u deze in ICO- of PNG-indeling. Favikon staat slechts één formaat toe, namelijk 16×16 pixels, wat een nadeel is.
#2. Favicon.io
Je kunt een favicon maken met Favicon.io vanuit het niets, een afbeelding, een logo of een emoji. Voordat u het downloadt, kunt u het in drie verschillende formaten bekijken. Het resultaat kan worden gedownload in ICO- en PNG-indeling in verschillende formaten.
#3. Favicon.ico & App Icon Generator
U kunt een PNG- of JPG-afbeelding uploaden en deze gratis applicatie gebruiken om deze te converteren naar ICO- en PNG-indelingen in verschillende formaten. U slaat uw favicon op in de hoofdmap van uw website zodra u deze in het gewenste formaat heeft gegenereerd. De favicon kan vervolgens aan uw website worden toegevoegd door een HTML-link te maken die naar het bestand verwijst.
Dit is van toepassing op website-eigenaren, of ze nu een ontwikkelingsframework zoals Bootstrap CSS hebben gebruikt of hun site helemaal opnieuw hebben ontwikkeld, het is cruciaal om op te merken. De procedure zal aanzienlijk verschillen, of u nu een websitebouwer of een CMS zoals WordPress of WordPress-alternatieven hebt gebruikt.
Favicon-formaat
Een favicon moet 16×16 pixels groot zijn. Ze verschijnen op die manier in adresbalken, bladwijzerlijsten en browsertabbladen. Maak je favicon idealiter in meer dan één maat. Op grotere schermen ziet u versies die op de juiste schaal zijn geschaald in plaats van de uitgerekte 16 × 16-versie.
De meest populaire favicon-maten en hun speciale toepassingen worden hieronder weergegeven.
- 16×16: De grootte van browserfavorieten.
- 32 × 32: de grootte van snelkoppelingspictogrammen op de taakbalk.
- 96×96: de grootte van snelkoppelingen op het bureaublad.
- 180 × 180: de grootte van Apple-aanraakpictogrammen.
- 300 × 300: de grootte vereist door Squarespace.
- 512 × 512: de grootte vereist door WordPress.
Zijn favicons belangrijk voor SEO?
Hoewel favicons niet direct verantwoordelijk zijn voor uw SEO, zijn ze indirect verantwoordelijk en een cruciale techniek om uw zoekmachinepositie te verhogen. Hier zijn enkele voorbeelden van hoe het gebruik van een favicon uw SEO kan verbeteren:
#1. Gebruiksvriendelijke websites leiden tot meer gebruik
De bruikbaarheid van uw website verhoogt indirect de positie van de zoekmachine. Door uw website gemakkelijk te identificeren en te navigeren, bespaart een favicon op uw browsertabbladen, bladwijzers, geschiedenisarchieven en andere plaatsen uw gebruikers tijd en vergroot de kans dat ze met uw website zullen communiceren.
Als gevolg hiervan zullen meer mensen uw website voor langere tijd bezoeken, wat het verkeer zal verhogen en uw SEO een boost zal geven.
#2. Bladwijzers
Je hebt een voordeel ten opzichte van websites zonder favicons. Voor websites die online als bladwijzer zijn gemarkeerd, houdt de Google Chrome-browser rekening met bepaalde zoekrangschikkingsfactoren. Zonder een favicon heeft uw website mogelijk niet de mogelijkheid om een bladwijzer te maken in de Chrome-browser, wat een van de vele indirecte signalen zou zijn die worden gebruikt om de zoekpositie te bepalen.
Bovendien vergroot het feit dat uw website een bladwijzer heeft en vervolgens visueel opvalt in die lijst met bladwijzers dankzij uw favicon, de kans dat gebruikers ernaar terugkeren. Dit alles verbetert de SEO en bezoekers naar uw website.
#3. Branding en zichtbaarheid
Gebruikers zullen uw merk associëren met uw favicon omdat het een visuele weergave is van uw website en bedrijf. Bij SEO draait alles om marketing en branding, en hoe meer bezoekers uw website kunnen zien en u onthouden, hoe waarschijnlijker het is dat ze erop zullen klikken.
Hoe een favicon in HTML toe te voegen
Zodra uw favicon is gemaakt, moet u browsers en andere webgebaseerde toepassingen instrueren waar ze deze kunnen vinden. U moet dit bereiken door een regel code op te nemen in het relevante gedeelte van uw HTML-bestand.
Stel dat u uw PNG-bestand hebt opgeslagen als 'favicon.ico'. Plaats vervolgens het volgende codefragment tussen elk van uw r </head> labels:
Houd er rekening mee dat hoewel het gebruikelijk is, uw favicon zich niet in de hoofdmap van de site hoeft te bevinden. Zorg ervoor dat de href-eigenschap correct is als u deze ergens anders hebt opgeslagen. Je zou intypen als je het hebt opgeslagen in de submap "images".
Laten we ons voorstellen dat je verschillende favicon-formaten hebt gemaakt. Door voor elke maat een regel code op te nemen in de relevant gedeelte van uw HTML-bestand, kunt u ze allemaal op uw website laden.
U zou bijvoorbeeld de volgende coderegel toevoegen om een versie van 16×16, 32×32, 48×48 en 180×180 te maken:
Welke indelingen gebruik ik voor een favicon?
Er zijn nu een paar andere opmaakopties, in tegenstelling tot de vorige toen een favicon in het Windows ICO-formaat moest zijn. Hier is een nadere blik op elk van hen:
- Windows ICO: De ICO is veruit het bestandstype dat het meest wordt ondersteund. Het voordeel van de ICO is dat het verschillende bitdieptes en resoluties kan ondersteunen, wat uitstekend werkt en vooral handig is voor Windows. Bovendien biedt ICO een pictogram van 32 pixels voor de Windows 7-taakbalk die werkt met Internet Explorer. Bovendien is dit het enige formaat dat het element overslaat.
- PNG: Er zijn verschillende toepassingen voor het PNG-formaat. Een PNG-bestand kan worden gemaakt zonder extra software, waardoor het ongelooflijk gebruiksvriendelijk is. De kortste bestandsgrootte wordt geleverd en alfa-transparantie wordt ondersteund. Een belangrijk nadeel van dit ontwerp is echter dat Internet Explorer alleen ICO-bestanden ondersteunt en geen PNG-bestanden opent.
- SVG: Dit formaat kan worden gebruikt en wordt ondersteund door Opera-browsers.
- GIF: Behalve compatibiliteit met oudere browsers heeft dit formaat geen voordelen. Hoewel ze gebruikers meer opvallen, hebben ze ook de neiging om te irriteren, en de overweldigende overtuiging is dat ze helemaal niet voordelig zijn.
- JPG: Hoewel JPG kan worden gebruikt, is het minder populair en biedt het niet dezelfde resolutiekwaliteit als PNG. De JPEG verliest ook al zijn voordelen door de bescheiden omvang van de favicon.
- APNG: Dit is een geanimeerde variant van PNG, en hoewel Firefox en Opera dit misschien ondersteunen, heeft het dezelfde nadelen als de geanimeerde GIF wat betreft het afleiden van kijkers van hun interface.
Hoe krijg ik een Favicon?
Om een favicon aan uw website toe te voegen, slaat u de afbeelding op in de hoofdmap van uw webserver of in een nieuwe map met de naam afbeeldingen die u in de hoofdmap aanmaakt. "favicon.ico" is een typische naam voor een favicon-afbeelding.
Waar wordt een favicon voor gebruikt?
Verbetering van de gebruikerservaring. De belangrijkste functie van een favicon is om het gebruikers gemakkelijker te maken een pagina onmiddellijk te herkennen wanneer ze meerdere tabbladen in hetzelfde browservenster hebben geopend. Gebruikers kunnen uw website snel herkennen en openen als u er een maakt met een favicon.
Is een favicon hetzelfde als een logo?
Vergeleken met logo's zijn favicons aanzienlijk klein. Als favicons gebruiken sommige bedrijven een verkleinde versie van hun logo, maar dit is niet altijd effectief. De meeste logo's gebruiken afbeeldingen en tekst, maar favicons zijn te klein om ze te kunnen bevatten.
Wat is een voorbeeld van een favicon?
Onze favicon is de mooie P die te zien is op het tabblad links van de URL-balk op de ProCreator-website.
Kan ik mijn logo als favicon gebruiken?
Ja. Als favicons gebruiken de meeste websites vaak hun logo. U kunt eenvoudig een logo voor uw website maken met de gratis logo-maker als deze er nog geen heeft.
Wat zijn de regels voor favicon?
Richtlijnen voor het maken van fantastische Favicons:
- Zorg voor eenvoud.
- Houd de vertrouwdheid vast.
- Gebruik zo min mogelijk tekst of letters.
- Overweeg de kleur.
Conclusie
Ondanks hun kleine formaat hebben favicons een grote impact. Favicons zijn cruciaal voor het succes van uw bedrijf in de snelle digitale wereld van vandaag, aangezien ze uw website online een visuele identiteit geven en helpen om de best mogelijke gebruikerservaring te creëren. Het leuke is dat het maken van favicons eenvoudig is.
Gerelateerde artikelen
- BOOKMARKEN: Snelle en eenvoudigste manieren om een bladwijzer voor elke pagina te maken
- 2 Snelle manieren om uw oude PDF-bestanden bij te werken
- BANNER RECLAME: Hoe het werkt met voorbeelden
- LINKEDIN-LOGO: Betekenis, geschiedenis, lettertype en ontwerpinvloeden
Referenties
