I webdesign, som du sikkert vet, er hver detalj viktig. En person som har byttet til ressursen din ser ikke hvert av elementene separat, men oppfatter hele bildet som en pakke bestående av andre små detaljer. Så hvis du savner noe i prosessen med å utvikle ressursen din, kan denne detaljen senere ødelegge hele komplekset, hele komposisjonen.
En slik bagatell kan for eksempel være bakgrunnen til en knapp, en feil valgt font av et lite element, og til og med et favorittikon. Faktisk, se selv - store, kjente nettsteder har et individuelt ikon som indikerer det i "Bokmerker"-delen av brukerens nettleser. Uten den ville ikke utviklerne av ressursen vært i stand til å lage komposisjonen de opprinnelig strebet etter.
Derfor, når du lager et design for nettstedet ditt, bør du ta vare på en slik detalj som favorittikonet. I denne artikkelen vil vi snakke om hvordan du matcher den til den generelle stilen til ressursen, samt hvilke størrelser dette bildet skal ha.
Site icon
Først, la oss definere hva dette elementet er. Akkurat nå, ta en titt på tittelen på nettleserfanen. Som du kan se, er det et lite bilde til venstre for det, som indikerer en forenklet versjon av ressursens logo. Det samme bildet er også nær navnet på nettstedet som vises i søkeresultatene. Dette er hva brukeren veiledes av når de ser tittelen.
Mange nettredaktører forstår at et slikt bilde er nødvendig - men de færreste vet hvilken favicon-størrelse for nettstedet som vil være mest passende. Derfor vil vi i denne artikkelen ikke bare gi informasjon om hvordan du lager et slikt ikon og hvordan du kan installere det på ressursen din, men også snakke om bildestørrelser.
Formålet med favorittikonet
Så, bildet nær sideoverskriften brukes til identifikasjon. Dette er dens opprinnelige formål: å uttrykke nettstedet hvis navn vi ser, og å få det til å skille seg ut i øynene til resten. Dette gjøres så enkelt som mulig gjennom bruk av grafikk: vi oppfatter intuitivt informasjon i bilder mye raskere og enklere enn i tekstformat. Favoritter hjelper oss å gjøre nettopp det. Men ikke glem at størrelsen på favicon er minimal i brukerens øyne. Dette er ikke en logo i "overskriften" på nettstedet, som kan inneholde tilleggsinformasjon i form av inskripsjoner, noen presiseringer eller kontaktinformasjon. Alt som kan vises i ikonet ved siden av navnet skal passe til størrelsen på favorittikonet så mye som mulig. Og han, som allerede antydet, er ganske enkelt miniatyr (bare 16 x 16 piksler).
Hvordan velgefavorittikon?
Så hvordan kan en webmaster designe et ikon for nettstedet sitt? Det skal bemerkes at bare å komprimere nettstedslogoen, oftest, ikke vil fungere. På emblemene som er satt i form av en logo for en bestemt ressurs, er forskjellige elementer ofte synlige, som ikke alltid vises riktig i miniatyrform. Det er bedre å umiddelbart forlate et slikt foretak.
Størrelsen på favorittikonet tillater selvfølgelig ikke å snakke om å sette inn en inskripsjon der. Enhver tekst vil ganske enkelt være usynlig ved denne oppløsningen. Vi må utvikle et nytt ikon som vil formidle stilen til nettstedet. For å finne løsninger, igjen, la oss gå til de største nettstedene.
Mange bruker den stiliserte første bokstaven i tjenestenavnet som et favorittikon. Dette er måten, for eksempel, Bing, Yahoo, Yandex, Wikipedia, Google. Det er en annen tilnærming - hvis du har et kort nettstedsnavn, kan du angi det som bakgrunn for ikonet ditt. For at størrelsen på favorittikonet (i piksler når, jeg gjentar, 16 x 16 piksler) skal vise denne inskripsjonen riktig, bør den ikke være lengre enn 3 bokstaver. Dette er for eksempel hva Aol-tjenesten gjør.
Hvordan oppretter jeg et favorittikon?
Det er flere måter å lage et ikon for nettstedsnavnet på. Det enkleste er selvsagt å jobbe med ulike ferdige løsninger. Vi kan snakke om noen tjenester eller programmer som lar deg lage et ikon fra et fullverdig bilde ved å redusere det. Jeg vil imidlertid anbefale å utvikle en slik logo på egenhånd. Dette vil først gimuligheten til å lære noe; og for det andre vil det gi flere verktøy. Alt du trenger å vite for dette er hva du skal tegne, og også vite hvilken størrelse favorittikonet skal ha i den endelige versjonen. Vi vil snakke om ikonstørrelsen for nettstedet litt senere, men foreløpig vil vi legge merke til noen finesser ved å jobbe med slike bilder. Spesielt, uten å nevne størrelsen på favorittikonet for nettstedet, bør formatet til et slikt bilde avklares. Som erfarne designere bemerker, må bildet lagres som en-p.webp
Du kan lagre bildet, for eksempel ved hjelp av Photoshop, hvor emblemet vil bli tegnet.
Favicon-dimensjoner
Så, la oss nå snakke om hvor stort bildet vi ser ved siden av nettstedets navn i søkeresultatene skal være. Som standard er størrelsen, som allerede nevnt, bare 16 piksler (på hver side). Men hvis du prøver å redigere dette bildet i Photoshop, vil du selv se hvor upraktisk det er. Derfor anbefaler vi å jobbe med et forstørret bilde, som i fremtiden ganske enkelt kan komprimeres langs kantene og lagres i ønsket format.
Multiplattform
Men når det gjelder hvor stort favorittikonet skal være på nettstedet ditt, er det en ting til å huske på. Ikke alle plattformer viser et ressursbilde på samme måte. For eksempel, enheter med Retina-skjerm "ser" favorittikonet ditt på 32 x 32 piksler. Og i Safari og på den nye Windows-plattformen, og i det hele tatt, når disse ikonene en størrelse på 64piksler.
Derfor anbefaler vi at du lagrer forskjellige versjoner av ikonet og ganske enkelt sørger for endring avhengig av brukerens plattform i fremtiden. Et annet interessant poeng - du kan prøve å laste ikonet i det største formatet, og regne med at det vil "krympe" avhengig av nettleseren.
Eksterne redaktører
Selvfølgelig er det bra hvis du er flink med Photoshop og vet hvilken størrelse favorittikonet skal ha og hvordan du oppnår det mens du lagrer bildet ditt. Imidlertid er det mange nybegynnere som bare ikke har kommet over grafiske redaktører så nært før, så de kan ikke tegne ønsket bilde så lett. For å hjelpe slike webmastere finnes det ulike tjenester som lar deg automatisk lage ikonet du er interessert i. Mange av dem er til og med gratis, noe som ikke krever noen investering fra brukeren.
Noen ganger trenger du bare å registrere deg for å jobbe, men som du forstår gjøres dette én gang – tross alt bytter ikke bedrifter favorittikonet så ofte. Ta en titt på Google, som endrer logoen hver dag, men ikke berører ikonet.
Hvordan installerer jeg et favorittikon?
Generelt sett er det veldig enkelt å sette opp nettstedet ditt på en slik måte at det viser bildet du trenger. Det er nok å utføre en rekke enkle trinn som lar søkemotorer, så vel som enkle nettlesere, lese informasjonen.
For å gjøre dette, må det resulterende bildet lagres medk alt favicon.ico og plassert i roten av ressursen din. Det er det, nå vil bildet ditt gjenkjennes automatisk, og etter en tid vil det bli koblet til nettstedet ditt.
I tillegg til denne bindingen, kan du legge til en linje til som vil "antyde" hvor ikonet ditt er plassert. Det ser slik ut:
Installer koden i overskriften på nettstedet.
Konklusjoner
Så, etter å ha lest artikkelen vår, fant du ut hvilken størrelse et favorittikon skal være for et nettsted og hva det er. Dessuten tror jeg du forsto at det å finne det rette ikonet for ressursen din er en nødvendighet, fordi det spiller i hendene dine både når det gjelder å øke anerkjennelsen og når det gjelder noe ekstra fremtreden blant konkurrentene dine. I det minste gjør de største nettstedene det samme, som kan tas som et godt eksempel. Og dessuten gjør det ikke mye innsats - etter å ha laget et favorittikon én gang og installert det riktig på nettstedet ditt, kan du glemme det i de neste månedene.
Derfor kan du gjerne eksperimentere, finne på noe nytt, prøve - og alt ordner seg!
