3 måder at oprette dit eget Favicon -ikon på

Indholdsfortegnelse:

3 måder at oprette dit eget Favicon -ikon på
3 måder at oprette dit eget Favicon -ikon på

Video: 3 måder at oprette dit eget Favicon -ikon på

Video: 3 måder at oprette dit eget Favicon -ikon på
Video: 10 самых АТМОСФЕРНЫХ мест Дагестана. БОЛЬШОЙ ВЫПУСК #Дагестан #ПутешествиеПоДагестану 2024, April
Anonim

Et favikon er det seje lille billede ved siden af din adresselinje i din browser. Det er det, der adskiller dit websted på fanen Bogmærker og kan bruges til at øge mærkebevidstheden. Hvis du har et websted, men aldrig har overvejet at oprette et favicon, bør du gentænke din beslutning. Softwareudviklere bruger i stigende grad favicons til forskellige aspekter af deres applikationer, f.eks. Startskærmsikoner på tablets. Heldigvis er design, oprettelse og implementering af et favicon noget næsten enhver kan gøre, hvis de følger de rigtige trin.

Trin

Metode 1 af 3: Design af dit Favicon

Opret dit eget Favicon -ikon Trin 1
Opret dit eget Favicon -ikon Trin 1

Trin 1. Opret et favikon, der repræsenterer dit websted

Den type websted, du har, bør bestemme udseendet af dit favikon. Prøv at designe noget, der vil klæbe til dit brand image, og som vil være genkendeligt og mindeværdigt for mennesker. Dit favikon vil være det første, folk ser, når de ser på fanerne i deres browser og vil også blive vist i folks bogmærker.

  • For eksempel, hvis du har et madwebsted, kan det være mere mindeværdigt at vælge et favikon, der har en frugt eller grønt som design.
  • Hvis dit websted er til et advokatfirma eller investeringsselskab, er et traditionelt og slankt favikon bedst.
  • Hvis dit websted er rettet mod yngre mennesker, kan du prøve at skabe et legende og farverigt favikon.
Opret dit eget Favicon -ikon Trin 2
Opret dit eget Favicon -ikon Trin 2

Trin 2. Beslut, om du vil have en gennemsigtig baggrund

Hvis du ikke angiver en baggrund, udfylder den hvidt, hvilket muligvis ikke klæber til dit brand. En gennemsigtig baggrund får farven på personens browser og ser mere strømlinet ud i nogle tilfælde. I andre tilfælde får en forgrundsbogstav eller grafik til at poppe med en farve til baggrunden. Beslut, hvad der ville være bedst for dit design, og husk det, når du laver det.

Det mest basale favikon er en 16x16 firkant og har en baggrundsfarve

Opret dit eget Favicon -ikon Trin 3
Opret dit eget Favicon -ikon Trin 3

Trin 3. Opret et favikon, der er let at læse

Fordi det favikonbillede, du vil bruge, er lille, er det vigtigt, at du kan få dit brand frem uden at forvirre dine besøgende. Et favikon, der er svært at læse, efterlader et negativt indtryk og kan skabe spørgsmål i besøgets sind om kvaliteten af det arbejde, du kan levere. Alt for komplekse billeder og logoer ser ikke godt ud, når de krymper til 16x16 eller 32x32 pixels.

  • Hvis dit eksisterende logo er for kompliceret, kan du bruge taktik til at forenkle det, så det kan genkendes på favicon -størrelse. Brug initialer i stedet for at vise hele virksomhedsnavnet, eller design et simpelt ikon frem for at bruge et billede.
  • Hvis du allerede har et simpelt logo, kan du reducere billedet og indstille det som dit favoritikon. Du skal muligvis ændre den, før du konverterer den til en ikonfil.
  • Du kan også bruge et billede af et objekt, der beskriver dit websteds overordnede tema.
Opret dit eget Favicon -ikon Trin 4
Opret dit eget Favicon -ikon Trin 4

Trin 4. Opret et æstetisk tiltalende favikon

Strukturen i dit favikon kaldes dets form. Favikoner tager typisk former, som en cirkel eller en firkant. Når du designer dit favikon, er det generelt bedre, hvis det kan passe ind i en af disse grundlæggende former, fordi former i fri form ofte kan blive forvirret eller forvirret med 16x16 pixels. Et andet vigtigt aspekt af dit design kaldes æstetisk enhed. Æstetisk enhed omfatter detaljerne og størrelserne på forskellige komponenter i dit favikon og hvordan dit favikon er afbalanceret. Jo mere ensartede detaljerne, jo mere sammenhængende vil dit favikon se ud. For eksempel er brug af forskellige skrifttyper eller størrelser i dit favikon ikke behageligt for øjet og kan få dit favikon til at se forvirret eller rodet ud.

  • Et andet eksempel på æstetisk enhed er vedligeholdelse af afrundede hjørner i hele figurerne i dit favikon.
  • Et godt eksempel på et ikon, der har ændret form, er Googles favikon. Det er ændret fra en firkant til en cirkel.
Opret dit eget Favicon -ikon Trin 5
Opret dit eget Favicon -ikon Trin 5

Trin 5. Brug farver, der er sammenhængende for dit brand

Når du opretter dit favikon, skal du oprette det i 8 bit (256 farver) eller 24 bit (16,7 millioner farver) farvedybde, da dette vil fungere på moderne browsere. Sørg for, at de farver, du vælger, kan findes andre steder på dit websted eller på en eller anden måde er forbundet med dit brand. Et favoritikon med farver, der ikke er på dit websted, logo eller applikationer, huskes ikke, og folk vil ikke være i stand til at knytte ikonet til dit brand.

  • Nogle kreative anvendelser af favicon -farve inkluderer GitHub, der ændrer farver afhængigt af din systemstatus og Trello, som ændres afhængigt af din baggrundsfarve.
  • De mest almindelige farver, der bruges i favicons, er rød og blå.
Opret dit eget Favicon -ikon Trin 6
Opret dit eget Favicon -ikon Trin 6

Trin 6. Overvej dit publikum, når du designer et favikon

Bortset fra at identificere dit brand, skal dit favikon se attraktivt ud for dine besøgende. Mennesker med forskellige smag, interesser og samfundsnormer vil se på forskellige ikonologier fra forskellige perspektiver. Kulturelle forskelle findes i vores samfund og kan forvirre eller afvise det publikum, du forsøger at tiltrække.

For eksempel bruger Mac Os X et stempel, der er et universelt symbol for mail. Brug af en postkasse ville ikke være så effektivt, fordi postkasser varierer i forskellige dele af verden

Opret dit eget Favicon -ikon Trin 7
Opret dit eget Favicon -ikon Trin 7

Trin 7. Få udtalelse fra venner og kolleger

Selvom det ikke er utrolig grafisk intensivt, er et favicon en vigtig del af dit brand. Tænk for eksempel på dine yndlingswebsteder som Twitter, Gmail, Facebook eller wikiHow, og hvor meget du forbinder favikonet med mærket. Hvis du ikke har et godt øje til design, eller hvis du er i tvivl om, hvilken form for design du skal have til dit websted, skal du kontakte venner, der har øje for design, eller som arbejder med grafisk design.

  • Spørg rundt i dit netværk af venner for at se, om nogen kan give designrådgivning gratis.
  • Større virksomheder har interne grafiske designere, der kan skabe favicon-billedet.

Metode 2 af 3: Oprettelse af dit Favicon

Opret dit eget Favicon -ikon Trin 8
Opret dit eget Favicon -ikon Trin 8

Trin 1. Brug fotoredigeringssoftware til at oprette dit favikon

Du kan bruge fotoredigeringssoftware som Adobe Photoshop eller Illustrator til at oprette billedet til dit favikon. Disse softwareapplikationer giver dig også mulighed for at ændre størrelsen og eksportere billedet i det rigtige format. Nogle programmer giver dig mulighed for at oprette dit favicon i hånden.

  • Der er også favicon -specifikke redigeringsprogrammer, som du kan finde online.
  • Brug en søgemaskine, og skriv "favicon -redaktører".
  • Lav din lærredstørrelse 512x512 pixels, fordi dette tal nedbrydes til de fleste relevante favicon -størrelser og stadig er stort nok til, at du kan redigere effektivt.
  • Andre populære fotoredigeringssoftware inkluderer GIMP, PhotoScape og Paint. NET.
  • Når du bruger denne software, kan du ikke redigere.ico -filerne direkte, men du kan bruge.png-,.jpg- eller-g.webp" />
Opret dit eget Favicon -ikon Trin 9
Opret dit eget Favicon -ikon Trin 9

Trin 2. Skift størrelse og gem dit favikon

32x32 px er størrelsen på Windows desktop -elementer, mens 16x16 px er størrelsen på favicons i din browsers fane. Når du har oprettet dit favikon i et større format, er det vigtigt at reducere dets størrelse, så du kan se, hvordan det vil se ud i folks browsere. Hvis det er ulæseligt eller ikke æstetisk tiltalende, skal du starte forfra med dit originale design. Tænk over de platforme, som dit websted eller dit program sandsynligvis vil blive brugt på, og opret derefter et favikon til at dække alle dine baser.

  • Det er vigtigt at bemærke, at forskellig hardware og software bruger forskellige favikonstørrelser.
  • Nogle andre favikonstørrelser inkluderer 57x57px til standard iOS -startskærm, 72x72px til iPad, 96x96px til Google TV, 128x128px til Chrome Webshop og 195x195px til Opera Speed Dial.
  • Hvis du vil dække alle dine baser, kan du oprette versioner af dit favicon i hver af disse størrelser.
  • Gem separate versioner af dit favikon, så du ikke mister det arbejde, du har udført.
Opret dit eget Favicon -ikon Trin 10
Opret dit eget Favicon -ikon Trin 10

Trin 3. Kombiner dine filer ved hjælp af en konverter

Det gode ved.ico -filer er, at du kan kombinere mere end én fil for at oprette den. Dette er nyttigt, fordi forskellige browsere og software vil have et favikon i en anden størrelse. For at sikre, at dit favikon ser godt ud på alle forskellige platforme, skal du konvertere dine filer ved hjælp af en online -konverter. Skriv "ikonkonverter" i din yndlingssøgemaskine for at finde gratis online applikationer til dette. Gem den flettede fil som "favicon.ico."

  • Du kan også bruge et program som GIMP, der har en indbygget funktion, eller downloade et plugin kaldet ICO FORMAT til Adobe Photoshop.
  • Opret en ny mappe, så du kan gemme nye favoritter eller igangværende værker.
  • Skriv ".ico converter" eller "favicon generator" i en søgemaskine for at finde forskellige værktøjer, du kan bruge.

Metode 3 af 3: Implementering af dit Favicon

Opret dit eget Favicon -ikon Trin 11
Opret dit eget Favicon -ikon Trin 11

Trin 1. Upload dit favikon, hvis du bruger en webstedseditor

Mange webstedsredaktører har en indbygget form, der giver dig mulighed for automatisk at uploade dit favikon til dit websted. Hvis du bruger en webstedseditor, der har dette indbygget, skal du kigge efter muligheder, der siger "Upload Favicon" eller "Tilføj Favicon" i dit websteds indstillingsmenu. Vælg din favicon.ico -fil, og upload den til dit websted.

Hvis du ikke kan finde et sted at uploade dit favikon på din webstedredaktør, skal du gøre det manuelt

Opret dit eget Favicon -ikon Trin 12
Opret dit eget Favicon -ikon Trin 12

Trin 2. Upload filen til dit websteds rodmappe

Hvis dit websted understøtter File Transfer Protocol eller FTP, kan du bruge din FTP -klient til at uploade din nye favicon.icon -fil til dit root (indeks) bibliotek. Hvis ikke, skal du gå til din webværts side og uploade billedet manuelt. Husk at udskifte den eksisterende favicon.ico -fil med din nye fil.

Opret dit eget Favicon -ikon Trin 13
Opret dit eget Favicon -ikon Trin 13

Trin 3. Føj filen til dit header

Find det sted, hvor du kan få adgang til PHP- og CSS -filerne til dit websted. Gå til dit websteds header.php -fil, og rediger den. Under mærketypen"

  • . Dette skulle forbinde dit websted med dit favoritikon.

    Fordi du bruger PHP, betyder det, at alle websteder, der bruger din header -fil, nu vil have det samme favicon

    Opret dit eget Favicon -ikon Trin 14
    Opret dit eget Favicon -ikon Trin 14

    Trin 4. Opdater din browser

    Når du er færdig med at uploade favikonet, kan du opdatere din browser for at se dit nye billede ved siden af adresselinjen. Hvis du vil gå direkte til et billede af dit opdaterede favicon, skal du skrive "https://www.yourdomain.com/favicon.ico".

    • Hvis dit favikon ikke i første omgang vises, skal du muligvis nulstille din browsers cache.
    • For at rydde din cache skal du gå til din browsers indstillinger og slette dine midlertidige internetfiler, cookies og historik.

Anbefalede: