Hvad er favicons punkt?

Når jeg begynder at fortælle folk om vigtigheden af et favicon til deres overordnede online branding strategi, siger de normalt det samme: "Er du ikke ved at tage denne branding ting lidt for langt?"

Mit svar går som regel: "Ikke hvis du er seriøs over din egen branding-indsats!"

Det er rigtigt, favicons er meget små ting, sandsynligvis den mindst vigtige bit af et websted, men det er opmærksomhed på detaljer, der gør et websted skiller sig ud; og selvom det lyder vanvittigt, er favicons meget vigtige fra et branding-point-of-view.

I betragtning af WDD er et websted orienteret til et designer publikum, er mit gæt, at mange af jer allerede ved, hvad favicons er, og hvordan man opretter dem; men denne artikel kan stadig hjælpe dig med at forstå hvorfor du burde lave dem, og også tjene som en god ressource side.

Jeg deler en stor liste med favicon-relaterede ressourcer nedenfor, så overvej bookmarking denne side til fremtidig reference. Åh, og hvis du gør det, skal du lægge mærke til WDD-favicon lige i din bogmærkeliste;)

Bare i tilfælde af at du ikke er en designer eller nogen form for sortebælte i favicon-arts, dækker denne artikel sandsynligvis alt, hvad du nogensinde vil vide om disse ubehagelige små 16 × 16 pixels firkanter, og endda nogle interessante favicuriosities . Så nyd det!

Hvad er et favicon?

Favicons er små firkantede billeder, som normalt er 16 × 16 pixels, som bruges af webbrowsere til at vise en grafisk repræsentation af det websted, der bliver besøgt på venstre side af browserens adresselinje. Du har sikkert set mange favicons før, selvom du ikke ved hvad de er. Hvis der er nogen tvivl, vil billedet nedenfor hjælpe.

To eksempler på favikoner på en Google Chrome-faneblad.

Hvis du er interesseret i at forstå et stykke internet historie, er her et interessant faktum:

Ordet favicon er et portamentau lavet af ordene "favorit" og "ikon", og det blev opkaldt som sådan, fordi det først blev understøttet af Microsofts Internet Explorer 5, og bare hvis du ikke bruger IE, er denne browser bogmærkefunktion hedder favoritter.

Hvad er formålet med et favicon?

Tilbage i de tidlige dage af internettet var værktøjer som Google Analytics bare drømme i sindet hos et par webnerds. Så underligt som dette lyder, blev favikoner brugt som en måde at estimere trafikken på tæller antallet af besøgende, der bogmærket siden. (Det er et andet interessant uddrag i internetets historie!)

Men interessante fakta væk, den vigtigste grund til at have favicons i dag er at forbedre brugeroplevelsen. Favicons bruges i alle moderne browsere på adresselinjen, i linklinjen, i bogmærkeområdet og i dets browserfliker. Derudover viser et par browsere også favicons, når du opretter en genvejskobling til den tilsvarende hjemmeside på dit skrivebord og din mobile enhed.

Sikkert den vigtigste grund til at have et favicon er den oplagte forbedring i brugeroplevelsen. Et websted uden et vil vise et generisk browsersymbol på alle de punkter i interaktion, som jeg nævnte ovenfor, og hvis du er interesseret i din brugeroplevelse, skal du bekymre sig om favikoner.

Men jeg kan ikke undgå at se ting gennem brandingens lys, mit ekspertiseområde, så jeg tror, at favicons er endnu mere relevante fra et branding-synspunkt. Igen, med så mange interaktionspunkter, at de ikke bruger dem til at øge mærkebevidstheden er en forbrydelse. Sandheden er, at finde kreative måder at forbedre din online branding er altid en udfordrende opgave, og at have et favicon er en nem og enkel måde at opnå det. Så få dig selv en min ven!

Hvordan oprettes et favicon?

Oprettelse af en hjemmeside favicon er let som tærte. Faktisk behøver du ikke engang være designer til at gøre det. Det hjælper sikkert, hvis du er, da du kan sætte dine evner til at arbejde og skabe noget, der virkelig skiller sig ud, men selv de mindre teknologiske kunnskaper kan gøre det på cirka 5 minutter eller mindre ved at bruge de rigtige værktøjer.

Hjemmesiderne i nedenstående liste giver dig mulighed for at oprette et favicon ved blot at uploade et allerede eksisterende billede. Så hvis du vil oprette et favicon til dit brand, er alt du skal gøre, at uploade dit logo til et af følgende websteder og downloade favicon-filen. Så let som ingenting.

Her er Favicon-generatorlisten du leder efter:

De ovennævnte websteder varierer meget i forhold til den resulterende fil, du får; især hvad angår filstørrelse og udvidelse. Hvis du ønsker at få den mest kompatible fil mulig, anbefaler jeg stærkt at downloade et billede, der er dimensioneret 16 × 16 pixel med "ico" -formatet.

Hvis du har brug for inspiration, så prøv at tjekke favicon gallerierne nedenfor:

Hvordan bruger du dit favicon?

Når du har fået dit favicon omhyggeligt designet, skal det ikke tage mere end et par minutter at installere det på din server i to enkle trin. For det skal du have adgang til din hjemmeside-rodmappe og et tekstredigeringsværktøj til at ændre din HTML-kode til din hjemmeside.

Trin 1

Du skal uploade filen "favicon.ico" til din server. For at gøre det skal du pege på din browserens adresselinje til din FTP-server; din webadresse skal se ud på følgende måde:

ftp://[email protected]

Tryk på enter, og browseren vil bede dig om et brugernavn og en adgangskode, før du giver adgang til filserveren. Når du er i, skal du bare uploade filen "favicon.ico" til rodmappen, og du er færdig.

Trin 2

Nu skal du redigere din hjemmeside HTML-side for at hjælpe browsere med at finde dit favicon-billede. Hold dit FTP-vindue åbent, find og download filen "index.html" eller "header.php" fra din server og følg nedenstående trin i henhold til filen du får:

Hvis dit websted er lavet af almindelig HTML, skal du indsætte koden nedenfor i HEAD-området i filen "index.html", og glem ikke at ændre "yoursite.com" til din egen hjemmesideadresse.

Hvis du bruger WordPress, skal du indsætte koden nedenfor i HEAD-området i din "header.php" -fil.

Med det færdige, upload filen tilbage til hvor du fik det fra. Du er færdig!

Faktisk er de fleste moderne browsere kloge nok til at finde din favicon-fil selv uden noget kode, men kun så længe favicon-billedet har 16 × 16 pixel, er det blevet kaldt "favicon.ico" og er gemt i rodmappen på din hjemmeside mappe.

Sådan opretter du et favicon i Photoshop

Med så mange værktøjer til rådighed for at hjælpe dig med at oprette dit favicon, hvorfor vil du gerne tage den hårde vej og skabe den i Photoshop? Nå, hvis du er designer og ønsker at få det bedste ud af dit favicon, er det helt sikkert den professionelle måde at gøre det på. Tricket er, at Photoshop ikke støtter "ico" -filer nativt, så du skal Download dette plugin fra Telegraphics .

Sørg for at installere det, før du følger vejledningen nedenfor. Photoshop fungerer ikke uden det.

Se efter "ICO" i din Photoshop "Gem som" boks for at bekræfte plugin'et er installeret.

Opret et nyt dokument i Photoshop vælg menupunktet "Fil" og følgende valgmulighed "Ny", og indstil dit lærred ved 64 × 64 pixel. Hvorfor? Da den 16 × 16 endelige faviconstørrelse er så lille, kan du få en kreativ juice strømmer, når du har et større lærred at arbejde på. Derefter indsæt dit logo i dokumentet og slip din magiske enhjørnings kreative magt.

Når du er færdig, skal du blot vælge menuen "Billede" og den følgende mulighed "Billedstørrelse" og reducere billedet til 16 × 16 pixel. Husk at klikke på "Resample Image" og vælg "Bicubic Sharper", dette er for at sikre, at billedet ikke blurer, når størrelsen ændres. Hvis du ikke kan lide det endelige resultat, skal du blot fortryde dine seneste ændringer med "AltCtrl / AltCmd + Z" og fortsæt med at arbejde på designet, indtil du er tilfreds med det.

For at færdiggøre dit favicon er alt du skal gøre, at klikke på menuen "File" og den følgende mulighed "Save As", der husker du at navngive din fil som "favicon.ico". Endnu engang, job gjort!

Konklusion

Favikoner er en af de små ting, som vi normalt ikke betaler for meget opmærksomhed på, men sandheden er, at langt fra at være ubetydelig, er de en meget vigtig del af internettet, både fra et brugergrænsefladsperspektiv og et branding point- of-view.

Nogle siger, at store ting kommer i små størrelser, og det tror jeg også på favikoner, fordi enhver webdesigner og / eller branding specialist, der altid tager sig tid til at tilføje et favicon til deres kunders websteder, selvom klienten ikke har nogen Idé om, hvad et favicon er, viser stor professionalisme og opmærksomhed på detaljer; den slags kvalitet, som hver klient værdsætter.

Opretter du favikoner til dine kunder? Er de for mange problemer for lidt belønning? Lad os vide dine tanker i kommentarerne.

Fremhævet billede / miniaturebillede, bemused image via Shutterstock

webdesign branding hvordan favicon tips og tricks

Hvad er Point of Favicons?