Hvordan lage et favicon for nettstedet: nyttige tips og tjenester

1. Hvordan lage et favicon
2. Hvordan lage et favicon i Photoshop
3. Hvordan lagre et favicon
4. Slik setter du inn favicon-området
5. Hvordan erstatte favicon
6. Hvordan lage mer komplekse favikoner

Det er vanskelig å gjette hva et favicon er når du først hører dette ordet. Dette er et miniatyrikon som vises på fanene i nettleserne, i adresselinjer og andre områder, avhengig av hvilket operativsystem du bruker og nettleseren. Det kan trygt kalles en av de mest komplekse og lunte elementene i webdesign.

Å lage et godt favicon er ganske vanskelig, siden ikonet er lite, bør det være klart og vise noe relatert til nettstedet ditt. Å lage et favicon som er kompatibelt med alle populære nettlesere kan også være en skremmende oppgave. I denne artikkelen vil vi håndtere alle de komplekse aspektene ved opprettelsen. Hvis du også trenger en logo, så har vi en artikkel hvordan å gjøre det

Hvordan lage et favicon

La oss starte med utformingen av favicon. God design, til tross for kompaktiteten, bør gjenspeile kjernen på nettstedet ditt og være en organisk del av bedriftens identitet. Ikonet er vanligvis et grafisk tegn (ikon) til et selskap og ikke en hel logo (ikon, tekst og slagord).

Som et favicon bruker disse nettstedene deres ikoner (eller bilder nær dem).

Teksten i favicon bør ikke brukes, siden denne teksten blir ulæselig på grunn av den lille bildestørrelsen. De eneste unntakene til denne regelen er verdensberømte tekstkarakterer som automatisk er knyttet til et bestemt merke. For eksempel forlot den elektroniske ressursen Wikipedia på favicon sin bokstav "W" og Facebook - bokstaven "F".

På disse favicons er det bokstaver som er sterkt forbundet med et bestemt merke. For eksempel bruker Facebook sitt grafiske tegn. Legg også merke til at piksler er synlige på Disney-bildet. Dette skyldes at skjermbildet ble tatt på en Retina-skjerm, som er kompatibel med 16 × 16 ikoner, mens nettsteder bruker 32 × 32 ikoner.

Siden favicons er små bilder, spiller hver piksel en viktig rolle. Noen ganger etter å ha redusert logoen, blir enkelte piksler synlige, på grunn av hvilket bildet blir "uskarpt". For å oppnå klarhet må du redigere ikonet på pikselnivået.

For å unngå dette må du endre størrelsen på logoen ved hjelp av spesielle redaktører som Photoshop eller GIMP. Først må du redusere størrelsen på bildet til 64x64 piksler (dette er den største størrelsen favicon). Deretter må du redigere hver piksel ved hjelp av blyantverktøyet til bildet er klart. Dette er en mektig prosess, men resultatet er verdt det. Når favicon 64x64 er klar, må du gjøre den samme jobben med bildet på 16 × 16, 24 × 24 og 32 × 32 piksler. Så mange størrelser du trenger for å vise bildet riktig i alle nettlesere og gadgets:

• 64x64 - Safari nettleser bokmerker;
• 32x32 - Høyoppløselige skjermer (Retina);
• 24x24 - bokmerker Internet Explorer og MicroSoft Edge;
• 16x16 - Google Chrome og andre nettlesere.

Hvordan lage et favicon i Photoshop

Først må du lage noen få lerrer med de ovennevnte dimensjonene.

Deretter må du legge til et ikon, et brev eller et annet bilde på lerretet.

Hvordan lagre et favicon

Etter å ha opprettet ikoner av forskjellige størrelser, lagre hver enkelt som en gjennomsiktig PNG-fil (24 bit). I Photoshop kan du bruke funksjonen Lagre for web tilgjengelig på Fil-menyen. Da må du slå sammen alle PNG-filer i en ICO-fil. Du kan bruke både PNG-filer og ICO-filer samtidig, men ofte til og med velger Safari og Chrome bare ICO-formatet. Etter min mening er det lettere å lage en ICO-fil. ICO-format er ikke så vanlig, men heldigvis finnes det en rekke verktøy som kan hjelpe deg med å konvertere filene dine til dette formatet. For dette formålet, foretrekker jeg å bruke X-ikonredigerer . Dette er en gratis Internett-tjeneste som umiddelbart konverterer nedlastede bilder til en ICO-fil, hvoretter du kan laste den ned. Dette er ikke noe komplisert, bare følg instruksjonene på nettstedet. Hvis du anser deg som en desperat person, kan du eksperimentere med pikseleditoren til denne tjenesten og tegne en favicon selv. (Selv om jeg foretrekker å redigere favicons i en mer profesjonell editor, for eksempel i Photoshop).

Ved å laste opp PNG-bildene til X-Icon Editor, vil du få en ICO-fil på utgangen.

Slik setter du inn favicon-området

Så, du har allerede en ICO-fil. Nå må du legge den til nettsiden. Gi nytt navn til filen til favicon.ico, og legg den i rotmappen på nettstedet ditt (der index.html-filen og andre standardfiler lagres). Etter det vellykkede tillegget, kan du se det på ditt nettsted. Com / favicon.ico. Nesten alle nettlesere ser etter favicon.ico-filen i rotmappen. Derfor er det viktig at du laster ned favicon i denne mappen. For kompatibilitet med forskjellige nettlesere er det bedre å ikke legge til noen HTML-elementer eller koblinger som angir beliggenheten. Dette trikset fungerer for alle nettlesere, opp til IE6. Også, hvis du har et WordPress-nettsted, så kan du i mange temaer legge til et favicon i temainnstillingene. Denne metoden kan også brukes.

Hvordan erstatte favicon

For noe uforklarlig grunnlag, legger nettlesere den til hurtigbufferen. Derfor, når du laster opp en ny ICO-fil, kan nettleseren fortsette å vise det gamle faviconet ditt. Hva skal jeg gjøre i dette tilfellet? Du kan legge til en midlertidig HTML-fil som angir plasseringen av ditt nye favicon. Også på slutten av nettadressen må du legge til en kort søkestreng:

<link rel = "snarveisikon" href = "ditt nettsted. com / favicon.ico? v = 2" />

Så nettleseren vil tro at dette er en unik nettadresse, og vil derfor bli tvunget til å vise et nytt ikon. Etter oppdatering av favicon, kan denne HTML-koden bli helt fjernet. Hvis du må gjøre endringer i favicon, bruker du samme teknikk, hver gang du øker tallet etter "v" i spørringsstrengen. Dermed vil nettleseren hver gang oppleve denne nettadressen som unik og vise sin nye versjon. Og ikke glem å slette HTML-koden etter en vellykket oppdatering.

Hvordan lage mer komplekse favikoner

I denne artikkelen ønsket jeg å beskrive en universell og enkel måte å lage favikoner på som vil fungere på nesten hvilken som helst plattform. Men i webdesign og utvikling er det ingen grense til fullkommenhet. Hvis du vil lære å lage mer komplekse ikoner, kan du prøve å bruke tjenesten favico.js . Det lar deg lage dynamiske bilder med varierende tall. Takket være dette ikonet kan du se antall uleste meldinger, selv om den tilhørende kategorien ikke er aktiv. Hvis du vil lage animerte favikoner på nettet, kan du prøve å bruke en favicon-generator favicon.cc .

Flere online generatorer du kan finne her .

Hvis du vil dele tipsene dine om å lage favicons eller stille et spørsmål, venter jeg på deg i kommentarene!