I webdesign, som du sikkert ved, er alle detaljer vigtige. En person, der har skiftet til din ressource, ser ikke hvert af elementerne separat, men opfatter hele billedet som en pakke bestående af andre små detaljer. Så hvis du går glip af noget i processen med at udvikle din ressource, kan denne detalje senere ødelægge hele komplekset, hele sammensætningen.
Sådan en bagatel kan for eksempel være baggrunden for en knap, en forkert valgt skrifttype af et lille element og endda et favicon. Se faktisk selv - store, velkendte websteder har et individuelt ikon, der angiver det i afsnittet "Bogmærker" i brugerens browser. Uden den ville udviklerne af ressourcen ikke have været i stand til at skabe den sammensætning, de oprindeligt stræbte efter.
Derfor, når du opretter et design til dit websted, bør du passe på en sådan detalje som favicon. I denne artikel vil vi tale om, hvordan man matcher den til ressourcens generelle stil, samt hvilke størrelser dette billede skal have.
Siteikon
Først, lad os definere, hvad dette element er. Lige nu, tag et kig på titlen på din browserfane. Som du kan se, er der et lille billede til venstre for det, der indikerer en forenklet version af ressourcens logo. Det samme billede er også nær navnet på webstedet, der vises i søgeresultaterne. Dette er, hvad brugeren bliver guidet af, når de ser titlen.
Mange webmastere forstår, at et sådant billede er nødvendigt - men de færreste ved, hvilken favicon-størrelse for webstedet, der vil være mest passende. Derfor vil vi i denne artikel ikke kun give information om, hvordan man laver et sådant ikon, og hvordan du kan installere det på din ressource, men også tale om billedstørrelser.
Favikonets formål
Så billedet nær sidens sidehoved bruges til identifikation. Dette er dens oprindelige formål: at udtrykke det websted, hvis navn vi ser, og at få det til at skille sig ud i restens øjne. Dette gøres så enkelt som muligt ved brug af grafik: vi opfatter intuitivt information i billeder meget hurtigere og nemmere end i tekstformat. Favicons hjælper os med at gøre netop det. Men glem ikke, at størrelsen af favicon er minimal i brugerens øjne. Dette er ikke et logo i "headeren" på siden, som kan indeholde yderligere information i form af påskrifter, nogle præciseringer eller kontaktoplysninger. Alt, hvad der kan vises i ikonet ved siden af navnet, skal passe til faviconets størrelse så meget som muligt. Og han er, som allerede nævnt, ganske enkelt miniature (kun 16 gange 16 pixels).
Sådan vælger dufavicon?
Så hvordan kan en webmaster designe et ikon til sit websted? Det skal bemærkes, at blot at komprimere webstedets logo, oftest, vil det ikke fungere. På de emblemer, der sættes i form af et logo for en bestemt ressource, er forskellige elementer ofte synlige, som ikke altid vil blive vist korrekt i en miniatureform. Det er bedre straks at opgive en sådan forpligtelse.
Selvfølgelig tillader størrelsen af favicon ikke, at man bare kan indsætte en inskription der. Enhver tekst vil simpelthen være usynlig ved denne opløsning. Vi er nødt til at udvikle et nyt ikon, der vil formidle webstedets stil. Lad os igen gå til de største websteder for at finde løsninger.
Mange bruger det stiliserede første bogstav i tjenestenavnet som et favicon. Dette er måden, for eksempel Bing, Yahoo, Yandex, Wikipedia, Google. Der er en anden tilgang - hvis du har et kort webstedsnavn, kan du indstille det som baggrund for dit ikon. For at størrelsen af faviconet (i pixels når, jeg gentager, 16 gange 16 pixels) for at vise denne inskription korrekt, bør den ikke være længere end 3 bogstaver. Det er f.eks., hvad Aol-tjenesten gør.
Hvordan opretter man et favicon?
Der er flere måder at lave et ikon for webstedsnavnet på. Det nemmeste er selvfølgelig at arbejde med forskellige færdige løsninger. Vi kan tale om nogle tjenester eller programmer, der giver dig mulighed for at lave et ikon fra et fuldgyldigt billede ved at reducere det. Jeg vil dog anbefale at udvikle sådan et logo på egen hånd. Dette vil først givemuligheden for at lære noget; og for det andet vil det give flere værktøjer. Alt du behøver at vide for dette er, hvad du skal tegne, og også vide, hvilken størrelse faviconet skal have i den endelige version. Vi vil tale om ikonstørrelsen for webstedet lidt senere, men for nu vil vi bemærke nogle finesser ved at arbejde med sådanne billeder. Især uden at nævne størrelsen af favicon for webstedet, bør formatet af et sådant billede afklares. Som erfarne designere bemærker, skal billedet gemmes som en-p.webp
Du kan gemme billedet, for eksempel ved hjælp af Photoshop, hvor emblemet vil blive tegnet.
Favicon dimensions
Så lad os nu tale om, hvor stort billedet, vi ser ved siden af webstedsnavnet i søgeresultaterne, skal være. Som standard er dens størrelse, som allerede nævnt, kun 16 pixels (på hver side). Men hvis du forsøger at redigere dette billede i Photoshop, vil du selv se, hvor ubelejligt det er. Derfor anbefaler vi at arbejde med et forstørret billede, som i fremtiden blot kan komprimeres langs kanterne og gemmes i det ønskede format.
Multiplatform
Men når vi taler om, hvor stort faviconet skal være på dit websted, er der en ting mere at huske på. Ikke alle platforme viser et ressourcebillede på samme måde. For eksempel "ser" enheder med en Retina-skærm dit favicon ved 32 gange 32 pixels. Og i Safari og på den nye Windows-platform, og overhovedet når disse ikoner en størrelse på 64pixels.
Derfor anbefaler vi, at du gemmer forskellige versioner af ikonet og blot sørger for, at det ændres afhængigt af brugerens platform i fremtiden. Et andet interessant punkt - du kan prøve at indlæse ikonet i det største format og regne med, at det vil "krympe" afhængigt af browseren.
Udvendige redaktører
Selvfølgelig er det godt, hvis du er god til Photoshop og ved, hvilken størrelse faviconet skal have, og hvordan du opnår det, mens du gemmer dit billede. Der er dog rigtig mange begyndere, som bare ikke er stødt på grafiske editorer så tæt før, så de kan ikke tegne det ønskede billede så nemt. For at hjælpe sådanne webmastere er der forskellige tjenester, som giver dig mulighed for automatisk at oprette det ikon, du er interesseret i. Mange af dem er endda gratis, hvilket ikke kræver nogen investering fra brugeren.
Nogle gange behøver du kun at registrere dig for at arbejde, men som du forstår, gøres dette én gang - trods alt, så skifter virksomheder ikke deres favicon så ofte. Tag et kig på Google, som skifter logo hver dag, men ikke rører ved ikonet.
Hvordan installeres et favicon?
Generelt er det meget enkelt at opsætte dit websted på en sådan måde, at det korrekt viser det billede, du har brug for. Det er nok at udføre en række enkle trin, der gør det muligt for søgemaskiner såvel som simple browsere at læse oplysningerne.
For at gøre dette skal det resulterende billede gemmes mednavngivet favicon.ico og placeret i roden af din ressource. Det er det, nu vil dit billede blive genkendt automatisk, og efter nogen tid vil det blive linket til dit websted.
Ud over denne binding kan du tilføje en linje mere, der vil "antyde", hvor dit ikon er placeret. Det ser sådan ud:
Installer koden i sidehovedet.
Konklusioner
Så efter at have læst vores artikel, fandt du ud af, hvilken størrelse et favicon skal være for et websted, og hvad det er. Jeg tror også, du forstod, at det er en nødvendighed at finde det rigtige ikon til din ressource, fordi det spiller dig i hænderne både med hensyn til øget anerkendelse og i form af en vis ekstra standout blandt dine konkurrenter. I det mindste de største sites gør det samme, hvilket kan tages som et godt eksempel. Og desuden forårsager det ikke den store indsats - efter at have lavet et favicon én gang og installeret det korrekt på dit websted, kan du glemme det i de næste par måneder.
Du er derfor velkommen til at eksperimentere, finde på noget nyt, prøve - og alt vil løse sig!
