Hvordan Lage Et Favicon For Bloggen Din

har bloggen din et tilpasset favicon? Hvis ikke, bør det virkelig. I dag lærer vi hva et favicon er, hvorfor du trenger en, og til slutt hvordan du lager et favicon for bloggen din eller nettstedet ditt.

jeg ser fortsatt tonnevis av blogger uten en, så hvis bloggen din er en av dem, gjør deg selv en tjeneste og opprett en nå ved hjelp av opplæringen nedenfor. Jeg lover det vil ikke ta lang tid, og det er også slags moro!

Oppdatert: 11/4/2020

Opplysning: dette innlegget kan inneholde tilknyttede lenker (betegnet med a*), noe som betyr at jeg kan få en liten provisjon hvis du velger å kjøpe med lenken min. Jeg setter pris på din støtte og vil aldri anbefale produkter jeg ikke står for meg selv.

Først Av Alt, Hva Er Et Favicon?

En Favicon, uttales fave-ikon, er kort For Favoritter Ikon som ble kalt fordi de dukker opp i listen over nettstedet bokmerker, med andre ord, din favoritt nettsteder. Favicons er en liten versjon av logomarket ditt som vises som et nettleserfaneikon, et bokmerkeikon eller et snarveisikon.

Favicons er en rask måte for brukere å gjenkjenne nettstedet ditt ved første øyekast. Ta en titt på nettleserfanene mine nedenfor. Kjenner du igjen de fleste nettstedene jeg har åpnet her?

Hvorfor Trenger Du Å Opprette Et Favicon?

når du ikke tilordner et tilpasset favicon til bloggen eller nettstedet ditt, blir enten et generisk ikon eller ikke noe ikon tildelt det. I verste fall bruker bloggen din vertsfirmaets favicon. I beste fall tilordner hver nettleser sin egen ting for deg: Chrome legger til en liten globus (se bildet ovenfor), Safari legger til den første starten på nettstedets URL i en grå boks (Se bildet nedenfor), Og Firefox legger til ingenting i Det hele tatt. Uansett, snakk OM KJEDELIG!

Se igjen på nettleserfanene ovenfor. Å ha gjenkjennelige ikoner gjør det enkelt å klikke frem og tilbake raskt mellom nettsteder ikke sant? Hvis du lagrer et nettsted i bokmerkene dine, vil du også se favicon i bokmerkelisten. Dette gjør det enkelt å raskt finne det du leter etter. Hjelp leserne dine raskt å finne bloggen din i sine faner eller bokmerker ved å inkorporere et favicon.

det er et annet sted jeg vedder på at du ikke tenkte på hvor favikoner vises: hvis du har nettsteder du besøker ofte på telefonen, kan du alltid legge dem til telefonens startskjerm som en snarvei. Hvis leserne dine elsker å besøke nettstedet ditt ofte, vil de kanskje legge til en snarvei til den fra startskjermen, slik at du definitivt vil at de skal ha et fint utseende ikon for å skille seg ut fra de andre appikonene de allerede har lagt til.

Og her er en ny fane fra Safari. Bilde ditt nettsted snarvei her. Du vil ikke at bloggen din representeres av et kjedelig grått ikon som» C » – ikonet nedenfor, gjør du?

Slik Designer Du Et Favicon For Bloggen Din

Noen Designregler For Å Lage Et Favicon

La Oss først snakke om noen beste praksis for å designe ditt favicon.

1. favicon skal være synlig og umiddelbart gjenkjennelig
   den beste måten å gjøre favicon gjenkjennelig er å bruke logoen som utgangspunkt. Selv om bloggen din ikke er super kjent ennå, er det ok. Ved å bruke konsistente designelementer og temaer gjennom hele merkevaren din, vil det skille seg ut fra resten og hjelpe folk til slutt å gjenkjenne merkevaren din.Her er et par alternativer for deg å vurdere når du designer ditt favicon:
   • din logo eller logomark
   • enklere variant av din logo
   • et symbol eller ikon som representerer din merkevare
   • initialene (eller bare den første initialen) av ditt merkenavn – pass på at stilen på initialene samsvarer med din første logo design og stil
   • et enkelt bilde – i det siste har jeg sett bloggere bruke profilbildene sine for å lage et favicon
2. din favicon bør bruke en veldig enkel design
   Ta en god titt på favicons nettleserfanene akkurat nå. Hva legger du merke til? De er små! Det typiske favicon vises på 16 x 16 piksler. Av denne grunn er det viktig å sørge for at du bruker en svært forenklet versjon av logoen eller merkevareelementet. Detaljert og forseggjort grafikk vil ikke skalere godt på en så liten størrelse. De vil mest sannsynlig se ut som et uklart rot.
3. Pass på at favicon kontrasterer godt med lyse og mørke bakgrunner
   avhengig av lesernes preferanser kan nettleserfanene være hvite, svarte, lyse eller mørkegrå. Av denne grunn vil du sørge for å lage et favicon med farger som kontrasterer godt på både lyse og mørke bakgrunner.Noen favicons har gjennomsiktig bakgrunn, og de fungerer fordi deres farger kontrast godt på enhver bakgrunn. Hvis grafikken er for lys eller for mørk, kan det bidra til å legge til en solid farget sirkel eller firkant bak grafikken eller logoen for å hjelpe den til å skille seg ut og være lesbar på en hvilken som helst farget fane.
4. Se på nettleserfanene dine for inspirasjon
   Klikk rundt på nettet og se på favikonene som brukes på favorittnettstedene dine. Legg merke til om de vil fungere på lyse eller mørke bakgrunner. Har grafikken en gjennomsiktig bakgrunn eller er den på en farget firkant eller sirkel?

Favicon Inspiration

Favicons bruker gjennomsiktighet

Legg merke til hvordan disse ikonene kan skille seg ut på enten en mørk eller lys bakgrunn, bortsett fra den siste, ‘ Si Ja.- Den skulle nok ha blitt plassert på en hvit firkant. Og det er litt vanskelig å fortelle, men det fjerde ikonet, lotusblomsten, har faktisk en veldig fin svart oversikt. På denne måten kan du se det enkelt, selv om det er sett på lyse faner.

Favikoner med farget bakgrunn

disse favikonene ble utformet med en firkantet eller avrundet firkantet bakgrunn for å sikre at de er godt synlige på både mørke og lyse faner.

Favikoner med initialer

Noen av disse initialene ikoner bruker en farget backround, noen bruker en gjennomsiktig. Uansett, sørg for at den er lesbar.

Favikoner ved hjelp av et profilbilde

Å Bruke et profilbilde ser ut til å være en ny trend som fanger på. Hvis du går denne ruten, sørg for å bruke det samme profilbildet i alle dine online profiler, slik at det er lett gjenkjennelig.

Slik Lager Du Et Favicon For Bloggen Din

Lag En Favicon-Fil Trinnvis

1. Lag Grafikken I Et Bilderedigeringsprogram
   Ved hjelp Av et bilderedigeringsprogram Som Photoshop (registrer deg gratis prøveversjon)*, Pixlr, BeFunky eller Canva, * lag favicon-filen med 512 x 512 piksler. Selv om det vises på bare 16×16 i nettleserfaner, vil det også bli vist i større størrelser i noen av de andre programmene jeg nevnte ovenfor.
2. Forhåndsvis Favicon I Liten Størrelse
   hvis du er ferdig med å lage et grafisk favicon, zoomer du ut av bildet til grafikken blir liten, omtrent størrelsen på favikonene du ser i nettleseren din. Er det fortsatt lesbart? Gir det mening? Hvis det gjør det, flott, gå videre til neste trinn.
3. Lagre Filen
   først lagrer du grafikken som en redigerbar fil i programvaren, slik at du kan gå tilbake og finjustere Den hvis du trenger det.Deretter lagrer du den som EN PNG-fil.
4. Generer Et Favicon.ico-Fil
   Bruk en favicon generator for å konvertere PNG-filen til EN ICO-fil. Dette trinnet er nødvendig siden noen nettlesere bare vil lese ICO-filer.

Alternativer Til Å Designe Din egen Fra Bunnen

hvis du vil ha en rask og enkel måte å lage en tekst eller initialer favicon, bruk Teksten > ICO favicon generator. Jeg opprettet raskt denne FOR DYOB:

Du kan også bruke Emoji > ICO favicon generator hvis du virkelig vil gjøre det enkelt for deg selv.

Til Slutt Legger Du Til Ditt Nye Favicon På Bloggen Din Eller Nettstedet

WordPress

den enkleste måten å legge til et favicon i En Selvvert WordPress-blogg er å logge på dashbordet ditt. Deretter går Du Til Utseende > Tilpass, og klikker deretter på Sideidentitet-fanen. Under Området Ikon delen, velg din nye favicon.ico-fil for å laste opp.

og boom, du er ferdig, sjekk den ut i nettleseren din! Vær oppmerksom på at du kanskje må oppdatere noen ganger og/eller tømme hurtigbufferen i nettleseren din før den vises.

slik legger du til et favicon i en WordPress.com blogg.

Squarespace

Det er veldig enkelt å legge til et favicon Til Squarespace også.

Blogger

Logg inn på bloggen din og klikk På Innstillinger i venstre kolonne. Klikk Deretter Favicon Under Grunnleggende delen. Deretter laster du opp favicon.ico-fil, lagre og boom!

Test Ditt Nye Favicon

hvis du vil teste hvordan ditt favicon ser ut i ulike plattformer og innstillinger, bruk Denne Favicon Checker. Hvis du ønsker å redigere måten ikonene ser på noen av plattformene, sier iOS (iPhones), kan du bruke generatoren til å optimalisere dem for hver innstilling. Så bare følg instruksjonene for å legge dem alle til bloggen din.

Du Har Nettopp Lært Å Lage Et Favicon

Gratulerer! Når du designer din egen blogg, vil du være sikker på at du ikke la ut noen detaljer, selv de minste. Å legge til et tilpasset favicon til det hjelper ikke bare leserne dine raskt å finne bloggen din i sine faner eller bokmerker, det viser at du bryr deg om å holde merkevaren din konsekvent.

Nå Er Det Din Tur

Gi meg beskjed i kommentarene hvis du har spørsmål om hvordan du lager et favicon eller hvis du trenger hjelp til å identifisere en type favicon for å lage for merkevaren din. Ellers kan du dele din favicon med oss i kommentarfeltet!
Og hvis du har hatt glede av denne opplæringen, kan du dele den ved å klikke på et av ikonene under min signatur!
dette innlegget ble opprinnelig publisert på 8/14/2013 og oppdatert på 2/11/2015, så igjen på 11/4/2020.