Et favikon er det kule lille bildet ved siden av adresselinjen i nettleseren din. Det er det som skiller nettstedet ditt fra i bokmerker -fanen, og kan brukes til å øke merkevarebevisstheten. Hvis du har et nettsted, men aldri har vurdert å lage et favorittikon, bør du revurdere beslutningen din. Programvareutviklere bruker stadig flere favicons for forskjellige aspekter av applikasjonene sine, for eksempel startskjermikoner på nettbrett. Heldigvis er det å designe, lage og implementere et favikon noe nesten alle kan gjøre hvis de følger de riktige trinnene.
Trinn
Metode 1 av 3: Design ditt Favicon
Trinn 1. Lag et favorittikon som representerer nettstedet ditt
Hvilken type nettsted du har, bør bestemme utseendet på favorittikonet ditt. Prøv å designe noe som vil feste seg til merkevaren din, og som vil være gjenkjennelig og minneverdig for folk. Favorittikonet ditt vil være det første folk ser når de ser på fanene i nettleseren, og vil også vises i folks bokmerker.
- For eksempel, hvis du har et matnettsted, kan det være mer minneverdig å velge et favikon som har en frukt eller grønnsak som design.
- Hvis nettstedet ditt er for et advokatfirma eller investeringsselskap, er et tradisjonelt og elegant favikon best.
- Hvis nettstedet ditt er rettet mot yngre mennesker, kan du prøve å lage et leken og fargerikt favikon.
Trinn 2. Bestem om du vil ha en gjennomsiktig bakgrunn
Hvis du ikke angir en bakgrunn, vil den fylle ut hvitt, som kanskje ikke holder seg til merkevaren din. En gjennomsiktig bakgrunn vil ta fargen på personens nettleser og se mer strømlinjeformet ut i noen tilfeller. I andre tilfeller vil forgrunnsbokstaver eller grafikk dukke opp hvis du har en farge for bakgrunnen. Bestem hva som er best for designet ditt, og husk det når du lager det.
Det mest grunnleggende favikonet er en 16x16 firkant og har en bakgrunnsfarge
Trinn 3. Lag et favikon som er lett å lese
Fordi favikonbildet du vil bruke er lite, er det viktig at du kan få merkevaren din frem uten å forvirre dine besøkende. Et favikon som er vanskelig å lese etterlater et negativt inntrykk og kan skape spørsmål hos den besøkende om kvaliteten på arbeidet du kan tilby. Altfor komplekse bilder og logoer ser ikke bra ut når de krympes til 16 x 16 eller 32 x 32 piksler.
- Hvis din eksisterende logo er for komplisert, kan du bruke taktikk for å forenkle den, slik at den kan gjenkjennes på favicon -størrelse. Bruk initialer i stedet for å vise hele firmanavnet, eller design et enkelt ikon i stedet for å bruke et bilde.
- Hvis du allerede har en enkel logo, kan du krympe bildet og angi det som favorittikonet ditt. Du må kanskje endre den før du konverterer den til en ikonfil.
- Du kan også bruke et bilde av et objekt som beskriver nettstedets overordnede tema.
Trinn 4. Lag et estetisk tiltalende favikon
Strukturen til favikonet ditt kalles dets form. Favikoner tar vanligvis former, som en sirkel eller et kvadrat. Når du designer favikonet ditt, er det generelt bedre hvis det kan passe inn i en av disse grunnleggende formene fordi former i fri form ofte kan bli forvirret eller forvirret med 16x16 piksler. Et annet viktig aspekt ved designet ditt kalles estetisk enhet. Estetisk enhet inkluderer detaljer og størrelser på forskjellige komponenter i favikonet ditt og hvordan favikonet er balansert. Jo mer ensartede detaljene er, jo mer sammenhengende vil favikonet ditt se ut. For eksempel er bruk av forskjellige skrifttyper eller størrelser i favikonet ditt ikke behagelig for øyet, og kan få favikonet ditt til å se forvirret eller rotete ut.
- Et annet eksempel på estetisk enhet er å beholde avrundede hjørner gjennom figurene i favikonet ditt.
- Et godt eksempel på et ikon som har endret form er Googles favorittikon. Den har endret seg fra en firkant til en sirkel.
Trinn 5. Bruk farger som henger sammen med merkevaren din
Når du lager ditt favikon, bør du lage det i 8 bit (256 farger) eller 24 bit (16,7 millioner farger) fargedybde, da dette vil fungere på moderne nettlesere. Sørg for at fargene du velger kan bli funnet andre steder på nettstedet ditt eller på en eller annen måte er knyttet til merkevaren din. Et favorittikon med farger som ikke er på nettstedet, logoen eller applikasjonene dine, vil ikke bli minneverdig, og folk vil ikke kunne knytte ikonet til merkevaren din.
- Noen kreative bruksområder for favicon -farger inkluderer GitHub som endrer farger avhengig av systemstatus og Trello, som endres avhengig av bakgrunnsfargen din.
- De vanligste fargene som brukes i favicons er rød og blå.
Trinn 6. Tenk på publikummet ditt når du designer et favikon
Annet enn å identifisere merkevaren din, må favikonet ditt se tiltalende ut for dine besøkende. Personer med forskjellig smak, interesser og samfunnsnormer vil se på ulik ikonologi fra forskjellige perspektiver. Kulturelle forskjeller eksisterer i samfunnet vårt og kan forvirre eller avvise publikummet du prøver å tiltrekke deg.
For eksempel bruker Mac Os X et stempel som er et universelt symbol for post. Å bruke en postkasse ville ikke være like effektivt fordi postkasser varierer i forskjellige deler av verden
Trinn 7. Få mening fra venner og kolleger
Selv om det ikke er utrolig grafisk intensivt, er et favikon en viktig del av merkevaren din. Tenk for eksempel på favorittnettstedene dine som Twitter, Gmail, Facebook eller wikiHow, og hvor mye du knytter favikonet til merket. Hvis du ikke har et godt blikk for design, eller hvis du lurer på hva slags design du bør ha for nettstedet ditt, kan du kontakte venner som har et øye for design eller som jobber med grafisk design.
- Spør rundt i nettverket av venner for å se om noen kan gi designråd gratis.
- Større selskaper har interne grafiske designere som kan lage favicon-bildet.
Metode 2 av 3: Opprette ditt Favicon
Trinn 1. Bruk fotoredigeringsprogramvare for å lage ditt favorittikon
Du kan bruke fotoredigeringsprogramvare som Adobe Photoshop eller Illustrator for å lage bildet til favikonet ditt. Disse programmene lar deg også endre størrelsen og eksportere bildet i riktig format. Noe programvare lar deg lage ditt favorittikon for hånd.
- Det er også favikon -spesifikke redigeringsprogrammer du kan finne på nettet.
- Bruk en søkemotor og skriv inn "favicon -redaktører".
- Lag din lerretstørrelse 512x512 piksler fordi dette tallet bryter ned til de fleste gjeldende favikonstørrelser og fremdeles er stort nok til at du kan redigere effektivt.
- Andre populære fotoredigeringsprogrammer inkluderer GIMP, PhotoScape og Paint. NET.
- Når du bruker denne programvaren, vil du ikke kunne redigere.ico -filene direkte, men du kan bruke.png-,.jpg- eller-g.webp" />
Trinn 2. Endre størrelse og lagre favorittikonet ditt
32x32 px er størrelsen på Windows -skrivebordselementer mens 16x16 px er størrelsen på favicons i nettleserfanen. Etter at du har opprettet ditt favikon i et større format, er det viktig å redusere størrelsen slik at du kan se hvordan det vil se ut i folks nettlesere. Hvis det er uleselig eller ikke estetisk tiltalende, kan du begynne på nytt med det originale designet. Tenk på plattformene som nettstedet eller applikasjonen din mest sannsynlig kommer til å bli brukt på, og lag deretter et favikon for å dekke alle basene dine.
- Det er viktig å merke seg at forskjellig maskinvare og programvare bruker forskjellige favikonstørrelser.
- Noen andre favikonstørrelser inkluderer 57x57px for standard iOS -startskjerm, 72x72px for iPad, 96x96px for Google TV, 128x128px for Chrome Nettmarked og 195x195px for Opera Speed Dial.
- Hvis du vil dekke alle basene dine, kan du lage versjoner av favikonet ditt i hver av disse størrelsene.
- Lagre separate versjoner av favorittikonet ditt, slik at du ikke mister arbeidet du har gjort.
Trinn 3. Kombiner filene dine med en omformer
Det flotte med.ico -filer er at du kan kombinere mer enn én fil for å lage den. Dette er nyttig fordi forskjellige nettlesere og programvare vil ha et favikon i forskjellige størrelser. For å sikre at favikonet ditt ser bra ut på alle forskjellige plattformer, konverter filene dine med en online converter. Skriv "ikonomformer" i din favoritt søkemotor for å finne gratis online applikasjoner for å gjøre dette. Lagre den sammenslåtte filen som "favicon.ico."
- Du kan også bruke et program som GIMP som har en innebygd funksjon, eller laste ned et plugin kalt ICO FORMAT til Adobe Photoshop.
- Lag en ny mappe slik at du kan lagre nye favoritter eller pågår arbeider.
- Skriv ".ico converter" eller "favicon generator" i en søkemotor for å finne forskjellige verktøy du kan bruke.
Metode 3 av 3: Implementering av Favicon
Trinn 1. Last opp favikonet ditt hvis du bruker et nettstedredigeringsprogram
Mange nettstedredaktører har et innebygd skjema som lar deg laste opp favikonet ditt til nettstedet ditt automatisk. Hvis du bruker et nettstedredigeringsprogram som har dette innebygd, kan du se etter alternativer som sier "Last opp Favicon" eller "Legg til Favicon" i nettstedets innstillingsmeny. Velg filen favicon.ico og last den opp til nettstedet ditt.
Hvis du ikke finner et sted å laste opp favikonet ditt på nettredaktøren, må du gjøre det manuelt
Trinn 2. Last opp filen til nettstedets rotkatalog
Hvis nettstedet ditt støtter File Transfer Protocol eller FTP, kan du bruke FTP -klienten til å laste opp den nye favicon.icon -filen til rotkatalogen (indeksen). Hvis ikke, må du gå til webvertsiden din og laste opp bildet manuelt. Husk å erstatte den eksisterende favicon.ico -filen med den nye filen.
Trinn 3. Legg til filen i overskriften
Finn stedet hvor du kan få tilgang til PHP- og CSS -filene for nettstedet ditt. Gå til nettstedets header.php -fil og rediger den. Under merketypen,"
-
. Dette bør koble nettstedet ditt til favorittikonet ditt.
Fordi du bruker PHP, betyr det at alle nettsteder som bruker toppteksten din nå vil ha det samme favorittikonet
Lag ditt eget Favicon -ikon Trinn 14 Trinn 4. Oppdater nettleseren
Når du er ferdig med å laste opp favikonet, kan du oppdatere nettleseren din for å se det nye bildet ditt ved siden av adresselinjen. For å gå direkte til et bilde av det oppdaterte favikonet ditt, skriver du "https://www.yourdomain.com/favicon.ico."
- Hvis favorittikonet ditt ikke vises i utgangspunktet, må du kanskje tilbakestille nettleserens buffer.
- For å tømme bufferen, gå til nettleserens innstillinger og slett midlertidige Internett -filer, informasjonskapsler og historikk.
