Sådan opretter du et favicon til webstedet: nyttige tips og tjenester

Sådan oprettes et favicon
Sådan laver du et favicon i Photoshop
Sådan gemmer du et favicon
Sådan indsættes favicon site
Sådan udskiftes favicon
Sådan oprettes mere komplekse favicons

Det er svært at gætte, hvad et favicon er, når du først hører dette ord. Dette er et miniatureikon , der vises på fanerne i browsere, i adresselinjer og andre områder afhængigt af hvilket operativsystem du bruger og internetbrowseren. Det kan sikkert kaldes et af de mest komplekse og lunefulde elementer i website design.

Oprettelse af et godt favicon er ret svært, da ikonet er lille, skal det være klart og vise noget relateret til dit websted. Oprettelse af et favicon, der er kompatibelt med alle populære browsere, kan også være en skræmmende opgave. I denne artikel vil vi beskæftige os med alle de komplekse aspekter af dets oprettelse. Hvis du også har brug for et logo, så har vi en artikel hvordan man gør det

Sådan oprettes et favicon

Lad os starte med design af favicon. Godt design, på trods af dets kompakte karakter, bør afspejle essensen af dit websted og være en organisk del af virksomhedens identitet. Ikonet er typisk et grafisk tegn (ikon) for et firma og ikke et helt logo (ikon, tekst og slogan).

Som et favicon bruger disse websteder deres ikoner (eller billeder tæt på dem).

Teksten i favicon bør ikke bruges, da denne tekst bliver ulæselig på grund af den lille billedstørrelse. De eneste undtagelser fra denne regel er verdensberømte tekstkarakterer, som automatisk er knyttet til et bestemt mærke. For eksempel forlod online ressource Wikipedia på favicon sin hovedbog "W" og Facebook - bogstavet "F".

På disse favicons er der breve, der er stærkt forbundet med et bestemt mærke. For eksempel bruger Facebook sit grafiske tegn. Bemærk også, at pixels er synlige på Disney-billedet. Dette skyldes, at skærmbilledet blev taget på en retina-skærm, som er kompatibel med 16 × 16 ikoner, mens websteder bruger 32 × 32 ikoner.

Da favicons er små billeder, spiller hver pixel en vigtig rolle. Nogle gange efter at du har reduceret logoet, bliver de enkelte pixels synlige, hvorfor billedet bliver "sløret". For at opnå klarhed skal du redigere ikonet på pixelniveau.

For at undgå dette skal du ændre størrelsen på logoet ved hjælp af specielle redaktører som Photoshop eller GIMP. Først skal du reducere billedets størrelse til 64x64 pixels (dette er den største størrelse favicon). Derefter skal du redigere hver pixel ved hjælp af blyantværktøjet, indtil billedet er klart. Dette er en besværlig proces, men resultatet er det værd. Når favicon 64x64 er klar, skal du gøre det samme job med billedet på 16 × 16, 24 × 24 og 32 × 32 pixels. Så mange størrelser skal du have billedet korrekt vist i alle browsere og gadgets:

64x64 - Safari browser bogmærker;
32x32 - skærme med høj opløsning (nethinden);
24x24 - bogmærker Internet Explorer og MicroSoft Edge;
16x16 - Google Chrome og andre browsere.

Sådan laver du et favicon i Photoshop

Først skal du oprette et par dåser med de ovennævnte dimensioner.

Derefter skal du tilføje et ikon, et bogstav eller et andet billede til lærredet.

Sådan gemmer du et favicon

Når du har oprettet ikoner af forskellige størrelser, skal du gemme hver enkelt som en gennemsigtig PNG-fil (24 bit). I Photoshop kan du bruge funktionen Gem til web, der er tilgængelig i menuen Filer. Derefter skal du flette alle PNG-filer i en ICO-fil. Du kan bruge både PNG-filer og ICO-filer på samme tid, men selvom Safari og Chrome foretrækker kun ICO-formatet. Efter min mening er det lettere at oprette en ICO-fil. ICO-format er ikke meget almindeligt, men heldigvis er der en række værktøjer, der kan hjælpe dig med at konvertere dine filer til dette format. Til dette formål foretrækker jeg at bruge X-Icon Editor . Dette er en gratis onlinetjeneste, som omgående konverterer downloadede billeder til en ICO-fil, hvorefter du kan downloade den. Dette er ikke noget kompliceret, bare følg instruktionerne på webstedet. Hvis du betragter dig selv som en desperat person, kan du eksperimentere med pixeleditoren af denne tjeneste og tegne en favicon selv. (Selvom jeg foretrækker at redigere favicons i en mere professionel editor, for eksempel i Photoshop).

Ved at uploade dine PNG-billeder til X-Icon Editor, får du en ICO-fil på output.

Sådan indsættes favicon site

Så du har allerede en ICO-fil. Nu skal du tilføje det til hjemmesiden. Omdøb filen til favicon.ico og læg den i rodmappen på dit websted (hvor index.html-filen og andre standardfiler gemmes). Efter den succesfulde tilføjelse kan du se den på din hjemmeside. Com / favicon.ico. Næsten alle browsere kigger efter favicon.ico-filen i rodmappen. Derfor er det vigtigt, at du downloader favicon i denne mappe. For kompatibilitet med forskellige browsere er det bedre ikke at tilføje HTML-elementer eller links, der angiver dets placering. Dette trick virker for alle browsere, op til IE6. Også, hvis du har et WordPress-websted, så kan du i mange temaer tilføje et favicon i temaindstillingerne. Denne metode kan også bruges.

Sådan udskiftes favicon

For nogle uforklarlige grunde tilføjer browsere det til cachen. Derfor, når du uploader en ny ICO-fil, kan browseren fortsætte med at vise dit gamle favicon. Hvad skal man gøre i dette tilfælde? Du kan tilføje en midlertidig HTML-fil, der angiver placeringen af dit nye favicon. Også i slutningen af webadressen skal du tilføje en kort forespørgselsstreng:

Så browseren vil tro at dette er en unik webadresse, og derfor vil det blive tvunget at vise et nyt ikon. Efter opdatering af favicon kan denne HTML kode helt fjernes. Hvis du skal foretage ændringer i favicon, skal du bruge den samme teknik, hver gang du øger tallet efter "v" i forespørgselsstrengen. Således vil browseren hver gang opleve denne webadresse som unik og vise sin nye version. Og glem ikke at slette HTML-koden efter en vellykket opdatering.

Sådan oprettes mere komplekse favicons

I denne artikel ønskede jeg at beskrive en universel og nem måde at oprette favicons på, som vil fungere på stort set enhver platform. Men i webdesign og udvikling er der ingen grænser til perfektion. Hvis du vil lære at oprette mere komplekse ikoner, kan du prøve at bruge tjenesten favico.js . Det giver dig mulighed for at oprette dynamiske billeder med varierende tal. Takket være dette ikon kan du se antallet af ulæste meddelelser, selvom den tilsvarende fane ikke er aktiv. Hvis du vil oprette animerede favicons online, kan du prøve at bruge en favicon generator favicon.cc .

Flere online generatorer kan du finde her .

Hvis du vil dele dine tip om at skabe favicons eller stille et spørgsmål, venter jeg på dig i kommentarerne!