Favorittikon -(forkortelse for ord "Favorittikon") er en liten bildestørrelse 16x16 piksler, som en besøkende på nettstedet ditt vil se. Den vises ved siden av nettadressen i nettleserens adresselinje. I tillegg vises dette ikonet ved siden av nettstedets navn i listen over åpne faner, bokmerker og søkeresultater, noe som gjør det enklere for brukere å raskt finne nettstedet ditt blant andre nettsteder.

Standard som ikoner et nettleserikon vises. For at nettstedet skal være forskjellig fra resten og ikke gå seg vill i de utallige grå fanene som åpnes av brukeren, må du lage ditt eget originale favorittikon.

Selv om mange moderne nettlesere støtter favorittikoner i GIF, PNG eller andre populære filformater, er alle versjoner Internet Explorer krever fortsatt ikoner som filer ICO(Microsoft-format). I dette formatet vil enhver nettleser forstå ikonet ditt.

Hvorfor trenger du et favorittikon?

Et favorittikon er nødvendig for å få nettstedet ditt til å skille seg ut fra mengden på resultatsiden. søkeresultater og var merkbar hos mange åpne faner i nettleseren. Et godt ikon er som en logo for nettstedet ditt, som vil være gjenkjennelig og skaper en viss holdning og fremkaller en spesiell grad av tillit.

Naturligvis kan et favorittikon tiltrekke brukerens oppmerksomhet, og han vil lese tittellenken til artikkelen din. Tittelen, i kombinasjon med et godt utdrag og et vakkert ikon, vil øke klikkfrekvensen og følgelig trafikken til ressursen.

Jeg vil med en gang merke meg at for nettsteder som har "GS"-etiketten, er ikke ikonet i seg selv i stand til å forbedre inntrykket av ressursen. Men det er som et møte om klær. Et fantastisk favorittikon vil definitivt skape førsteinntrykket av et nettsted som inviterer til å besøke.

Hvordan lage et favorittikon

Du kan selvfølgelig prøve å finne en ferdig favicon.ico-fil på nettsiden www.iconfinder.com, men jeg tror mange har lyst til å lage noe eget. Tross alt er det favorittikonet som vil fremheve nettstedet ditt i søkeresultatene. Du vet nå hvordan du gjør dette. Så la oss komme i gang.

Logaster er en nettbasert tjeneste for å lage logoer og bedriftsidentitetselementer. I den vil du automatisk motta, med bare noen få klikk, et ikon for nettstedet i ICO- og PNG-format.

Men husk at ingen automatisk logogenerator kan erstatte menneskelig kreativitet.

Store selskaper vil selvfølgelig ikke bruke slike verktøy. De vil finne en dyr designer for å lage en profesjonell logo for dem. Men for små bedrifter og private gründere kan et slikt verktøy være nyttig.

Hvordan fungerer prosessen med å lage et ikon i Logaster?

  1. For å sikre at favorittikonet ditt samsvarer med logoen din, blir du bedt om å lage en logo først (det er gratis).
  2. Skriv et navn og, hvis du vil, et slagord, angi type aktivitet, og Logaster vil uavhengig forberede mange logoalternativer for deg.
  3. Velg en passende logo, du kan endre den senere.

Dette er hva jeg fikk

Nå kan du klikke på "Last ned logo"-knappen. I gratis versjon den vil ha Logaster.com vannmerke på seg

Logoen kan kjøpes. Etter det vil du kunne laste ned i valgt format (PNG, JPEG, PDF, SVG) og størrelse (1024 px, 5000 px).

La oss nå gå videre til å lage et favorittikon.

  1. Igjen, velg alternativet du liker.
  2. Du kan endre formen til å være firkantet, avrundet, rund eller ingen form i det hele tatt.
  3. Hvis ønskelig, legg til et farget strek ved å klikke på strekverktøyet.
  4. Klikk på "Lagre"-knappen.

Slik ble favorittikonet. I prinsippet ser det bra ut.

Slik legger du til et favorittikon på nettstedet ditt

  1. Kjøp og aktiver favorittikonet.
  2. Last den ned.
  3. Pakk ut den nedlastede filen i rotmappen på nettstedet ditt.
  4. Lim inn følgende kode på alle sidene på nettstedet i taggen :

Designpakke med rabatt

I tillegg kan du kjøpe hele bedriftsidentitetssettet. Her er ett alternativ.

Relatert artikkel: Hvordan koble Yandex.Speller til WordPress


Plugin for å lage favorittikoner

Finnes enormt beløp forskjellige programmerå lage favorittikoner. I utgangspunktet er de primitive, slik at du kan lage ikoner med 16 farger.

Du kan lage et favorittikon direkte i Photoshop. For å gjøre dette trenger du en plugin som kan lastes ned fra www.telegraphics.com.au. For å installere den, kopier filen ICOFormat.8bi til c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats-katalogen.

Ved hjelp av en plugin ICOFormat.8bi, kan du lagre bilder som ".ico-filer".

Slik installerer du ICO (Windows Icon) Format-plugin

  1. 64-biters Windows (Vista/Windows 7):
    • Start på nytt før installasjon;
    • Plasser plugin-en i mappen C:Program FilesAdobePhotoshopPlug-InsFile Formats, men jeg har en annen struktur, jeg lagrer denne filen her: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins.
    • Hvis du kjører på et 64-biters Windows-system og starter 64-bitsversjonen av Photoshop CS4 eller CS5, last ned 64-biters versjonen av plugin og legg den i Plug-Ins-mappen som tilsvarer 64-bit Photoshop (dvs. den i "Program Files" ikke "Program Files (x86)").
  2. Flytt plugin-en til mappen "Filformater" i Photoshop Plugins-mappen:
    • For Windows (32-bit), ICOFormat.8bi
    • For Windows (64-bit), ICOFormat64.8bi
    • For Mac OS X, ICOFormat.plugin(merk at separate versjoner leveres for CS2, CS3/4 og CS5)
    • For Mac OS X/Classic, icoformat
    • For 68K MacOS, icoformat (68K)
  3. Hvis du bruker Corel PSP Photo X2, sett inn plugin-modulen i C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
  4. Avslutt og start Photoshop på nytt hvis det allerede kjører.

Det er også en online tjeneste www.convertico.com. ConvertICO er gratis online omformer ICO/PNG-filer. Den fungerer raskt og er enkel å bruke. Den brukes til å konvertere skrivebordsikoner, applikasjonsikoner og favorittikoner for nettsteder.

Hvordan lage favicon.ico selv

  1. Åpne Photoshop.
  2. Lag et dokument på 32 x 32 piksler.
  3. Sett inn et smart objekt av det ferdige bildet fra Illustrator.
  4. Bruk "Lagre som"-kommandoen, lagre favorittikonet i .ICO *-format.
  5. Last opp det resulterende favorittikonet til roten til nettstedet og koble det til gjennom et WordPress-tema, eller registrer det manuelt i nettstedsmalen. Jeg har allerede skrevet om hvordan du kobler til favicon tidligere.

*Hvis du ikke har en spesiell plugin installert ICO-format (Windows-ikon)., kan du laste den ned fra www.telegraphics.com.au/sw/. Det er for Mac, Windows 32, 64-bit med støtte for alle Photoshop-versjoner, inkludert CS6.

favicon-skjerm

Til nettstedet ditt viste et favorittikon, den kan ganske enkelt plasseres ved roten av nettstedet. Nettleseren og søkemotorene vil selv fastslå at du har en favicon.ico-fil og vil vise den automatisk. Denne metoden er den enkleste og fungerer i 95 % av tilfellene. Men du kan også eksplisitt koble til favorittikonet.

Denne leksjonen dekker opprettelsen av et Favicon, du vil lære hvorfor dette ikonet er nødvendig, og du vil motta anbefalinger for å forbedre utseendet og attraktiviteten.

I tillegg vil vi se på prosessen med å lage og legge til et favorittikon for et nettsted.

Favorittikon- Dette er et lite ikon som du kan se i nettleserens adresselinje og på faner åpne sider, og også når du legger til et nettsted i nettleserens bokmerker, legges dette ikonet også til der.

I tillegg viser Yandex-søkemotoren et Favicon-ikon i søkeresultatene ved siden av nettstedet ditt. Din oppgave er å få dette ikonet til å skille seg ut, bli husket, fange blikket mot bakgrunnen til andre ikoner i søkeresultatene, og også ha noen assosiasjoner til nettstedet ditt. Et vakkert designet og iøynefallende Favicon kan øke antallet besøk på nettstedet ditt betydelig sammenlignet med de som ikke har det installert eller har et lite attraktivt utseende.

Her er noen retningslinjer du bør vurdere når du oppretter et favorittikon.

#1.

Ikonet skal være lett gjenkjennelig og ha assosiasjoner til nettstedet ditt eller nisjen nettstedet ditt tilhører. Som et ikon kan du bruke en logo eller et symbol som fremkaller en assosiasjon til nettstedet ditt. I tillegg kan du bruke fargeskjemaet som nettstedet eller logoen din ble laget i. #2. Ikke bruk standardikoner. Mange mennesker, etter å ha opprettet et nettsted på et eller annet CMS, forlater ikonet uten å endre noe. Som et resultat, i utstedelsen

søkemotor

Det kan være mer enn ett nettsted med et slikt ikon, men mange. Dette vil ikke få nettstedet ditt til å skille seg ut, så bruk kun unike favorittikoner laget spesielt for nettstedet ditt. Dette inkluderer også situasjonen når ikoner fra ulike samlinger eller grensesnittelementer på andre nettsteder brukes. Husk at for å skille deg ut trenger du et unikt Favicon.

#3. Når du lager et ikon, prøv å bruke lysere og lysere farger som regel, de tiltrekker seg mer oppmerksomhet.#4.

Ikke bruk animerte ikoner. For det første støttes ikke animasjon av alle nettlesere, og for det andre bør besøkendes oppmerksomhet være fokusert på innholdet, og ikke på ikonet.

La oss nå se direkte på prosessen med å lage et favorittikon. Det finnes mange tjenester for dette. Imidlertid er de mer egnet for de som allerede har et ferdig ikon som de har revet av et sted eller hentet fra en eller annen samling. Men som jeg sa ovenfor, må ikonet være unikt, så her vil jeg se på prosessen med å lage det ved hjelp av Photoshop-programmer, ved å bruke nettstedet som eksempel.

#2.

I mitt tilfelle har jeg ingen logo for nettstedet, så jeg bestemte meg for å bruke "W"-symbolet som nettstedets adresse begynner med, samt fargene som dominerer øverst på nettstedet: blått og gult. Så jeg satte fargen til #6A91D0 og brukte bøtteverktøyet (G) for å gi det tidligere opprettede dokumentet en blå farge.

#3. Etter det valgte jeg Type Tool (T), la til et "W"-symbol og ga det følgende fargeverdi #FAC31D. For å få symbolet til å skille seg mer ut mot den blå bakgrunnen, la jeg til en svart strek på 2px. For å gjøre dette må du gå til menyelementet

"Layer" >> "Layer Style" >> "Stroke" , velg farge og størrelse på streken. Etter dette må du slå sammen lagene, for å gjøre dette må du gå til menyelementet

"Lag" >> "Slå sammen synlig" eller trykk på tastekombinasjonen Shift + Ctrl + E. For å gjøre linjene jevne uten seriffer la jeg til en uskarphet. For å gjøre dette må du gå til menyelementet

"Filter" >> "Uskarphet" >> "Gaussisk uskarphet..."

og sett radiusen til 0,3 piksler. Plasser symbolet eller bildet ditt slik at det tar maksimal plass, for hvis det er lite, vil det ikke merkes med en ikonstørrelse på 16*16.#4.

Nå må du endre ikonstørrelsen. For å gjøre dette må du gå til menyen

"Bilde" >> "Bildestørrelse"

og sett størrelsen til 16*16px. #5. Alt som gjenstår er å lagre ikonet. Favicon-ikonet må ha navnet favicon og filtypen .ico. Saken er at Photoshop som standard ikke lagrer bilder i .ico-formatet. Lagre den derfor i .png-format, for å gjøre dette, gå til menypunktet "Fil" >> "Lagre som..." og velg PNG fra nedtrekkslisten.

Konvertering av et bilde til .ICO-format

Etter det konverterer vi den til .ico-format ved hjelp av . Gå til denne tjenesten

Men disse linjene må legges til hver side hvis du har en HTML-side. Men siden, mest sannsynlig, nettstedet ditt er opprettet på grunnlag av en slags CMS, trenger du bare å legge til disse linjene i hovedfilen til temaet ditt som du bruker for nettstedet.

Hvis du bruker WordPress, gå til mappen wp-content/themes/folder-with-your-theme/, finn og åpne header.php-filen, lim inn de nødvendige linjene og lagre filen.

Hvis du bruker Joomla, så gå til malene/din-tema-mappen/ og åpne index.php-filen, lim inn de nødvendige linjene og lagre.

Noen WordPress- og Joomla-temaer kan allerede ha sine egne stier til favicon.ico-filen, i så fall slett dem og erstatt dem med dine egne.

Hvis du bruker et annet CMS, så gjør alt analogt.

På sidefaner og i adressefeltet til nettleseren vil ikonet ditt vises umiddelbart, som for Yandex-søkeresultatene, her trenger du tid til å passere og en spesiell Yandex-søkerobot for å finne ikonet ditt, hvoretter det vises i søkeresultater.

Materiale utarbeidet av prosjektet:

Hei, kjære lesere av bloggsiden. Samtalen i dagens artikkel vil handle om de såkalte Favicon.ico-ikonene. Vi vil finne ut hva et favicon er, hvorfor du må installere det på nettstedet ditt, og hvordan du lager et ikon i ønsket størrelse selv.

I prinsippet, for å lage et favorittikon, er det slett ikke nødvendig å bruke noen spesielle nettgeneratorer, selv om det er ganske praktisk og enkelt. Du kan prøve å lage den i Photoshop, men som standard kan den dessverre ikke lagre bilder i ICO-formatet. Derfor, for å lære Photoshop å jobbe med ICO, må du installere en spesiell plugin.

Men hvis du ikke er komfortabel med Photoshop (så vel som med det), vil det være mye mer praktisk for deg å bruke en av de mange nettjenestene som er oppført nedenfor. Dessuten vil du i noen av dem kunne tegne et nytt ikon helt fra bunnen av, og i andre vil du kunne konvertere et bilde du allerede har (som passer deg) til et favicon-format.

Vel, det enkleste alternativet er å laste ned Favicon-samlingen fra et nettgalleri eller en katalog. Les nedenfor om hvor du kan få tak i dem.

Hvordan lage et Favicon online og hvor du kan laste ned en samling av dem

La meg først gi eksempler på tjenester (den såkalte favicon generator), hvor du uten noen spesielle ferdigheter kan designe en helt grei mini-logo for nettstedet ditt, eller i det minste automatisk konvertere et passende bilde til formatet som kreves for å laste opp et favorittikon til nettstedet.

  1. Faviсon.cc— ganske praktisk online favicon-generator. Ved å bruke den kan du for eksempel lage ditt eget ikon fra bunnen av (helt eksklusivt), og tegne det piksel for piksel. For å gjøre dette, må du klikke på "Create New Favcon"-knappen på venstre side av tjenestevinduet.

    I midten av generatorsiden er det et område der hver firkant er en piksel av ditt fremtidige favorittikon. Din oppgave er å male disse rutene med forskjellige farger. For å male en firkant med en farge, må du merke av i boksen på høyre side av servicevinduet i feltet "Fargevelger", velg ønsket farge fra paletten som ligger der og klikk på ønsket firkant. For å fjerne feil skyggelegging, merk av i boksen "gjennomsiktig" og klikk på firkanten, som et resultat av at den blir fargeløs (gjennomsiktig).

    For å flytte en piksel over generatorens lerret, må du merke av for "flytt". Du kan se resultatet av arbeidet ditt i reell skala i "Forhåndsvisning"-området under lerretet. Hvis favorittikonet du opprettet passer deg, klikker du på "Last ned"-knappen for å lagre det på datamaskinen din. Som et resultat vil du motta en grafisk fil som du deretter kan laste ned og laste opp til vertsserveren.

    Nå vet du hvordan du lager en minilogo for nettstedet ditt fra bunnen av. Men hvis du ikke har grafiske talenter, så kan du bruke tjenesten online generator last opp et hvilket som helst bilde for det fremtidige favorittikonet, som vil fungere som en blank. Bildet kan ha absolutt alle størrelser og formater. For å laste opp ikonfilen til den elektroniske tjenesten, må du klikke på "Importer bilde"-knappen på venstre side av tjenestevinduet.

    I vinduet som åpnes, klikk på "Bla gjennom"-knappen og finn et passende bilde på datamaskinen din. Velg deretter hva du skal gjøre med sideforholdet til bildet når du konverterer det til 16 x 16 (kvadrat). Dette gjelder hvis bildet du laster opp ikke er firkantet. I dette tilfellet er to alternativer mulige: la sideforholdet være uendret (Behold dimensjoner), eller konverter bildet til en firkantet visning (Shrink to square icon). I det andre tilfellet vil bildet av det fremtidige favicon bli forvrengt langs en av aksene.

    For å laste opp til online-generatoren og konvertere bildet ditt, må du klikke på "Last opp" -knappen. Favicon.ico opprettet fra den vil kunne redigeres på samme måte som den du tegnet. Når du er ferdig med å trylle frem mesterverket ditt, klikker du på "Last ned"-knappen for å laste det ned til datamaskinen din.

    Denne nettjenesten har også mulighet til å bruke favicon-samlinger opprettet av andre brukere og lagt ut på generell tilgang. For å se utstillingene som er tilgjengelige i galleriet, må du klikke på venstre side av vinduet enten på «Siste favoritter»-knappen for å se samlingene sortert etter opprettelsesdato, eller på «Topprangerte favoritter»-knappen for å se gallerier sortert etter vurdering.

  2. Favicon.ru- En gang var denne tjenesten mye enklere enn online-generatoren beskrevet ovenfor, men nylig har den blitt nesten dens analoge, men bare på russisk. Favicon.ru lar deg ikke bare konvertere et hvilket som helst bilde du har (på datamaskinen eller på Internett) til ICO-formatet med en størrelse på 16 x 16 piksler, men gjør det også mulig å tegne det fra bunnen av, piksel for piksel.

    Denne versjonen av online-favicon-generatoren er bemerkelsesverdig, kanskje bare fordi den er innenlands. Derfor havnet han i denne artikkelen. Så for å jobbe med det må du hjemmesideØverst klikker du på "Velg fil"-knappen og spesifiser banen til ønsket bilde på datamaskinen. Bildet som er lastet ned og konvertert til Favicon.ico-formatet kan korrigeres og deretter lagres på datamaskinen din. Alt er enkelt og praktisk.

  3. Logaster.ru er en online logogenerator, men i tillegg til logoer lager den også et favicon. I motsetning til alle andre tjenester, trenger du ikke tegne et favicon-design eller konvertere det fra en logo.

    For å lage et favorittikon må du først skrive inn navnet på nettstedet eller selskapet og velge type aktivitet. Tjenesten vil tilby flere dusin favicon-maler klare til bruk. Du kan lese mer om hvordan du lager et favorittikon. Etter å ha opprettet Favicon.ico, kan du laste ned filen til datamaskinen din i ICO- eller PNG-format.

Etter det, alt du trenger å gjøre er å klikke på "Opprett" -knappen. På siden som åpnes vil du se en lenke for å laste ned det resulterende favorittikonet.

Et utvalg av nettgeneratorer, samlinger og gallerier med favoritter

Hvis du av en eller annen grunn ikke likte favicon-generatoren beskrevet ovenfor, kan jeg foreslå å prøve lykken på en av følgende gratis nettjenester:

  1. FaviconGenerator - lar deg konvertere et hvilket som helst bilde som er lastet ned fra datamaskinen til ønsket favicon-format (du kan laste opp bilder).
  2. AntiFavicon er en ganske interessant Favicon Generator. På den kan du lage et favorittikon med en inskripsjon. Du må skrive inn teksten til inskripsjonen i feltene "Topptekst" og "Bundteks", og justere fargeskjemaet i "Farger"-området.
  3. FavIcon fra Pics er en annen enkel nettjeneste - du spesifiserer banen til bildet på datamaskinen din, konverterer og laster ned den resulterende filen i ICO- og GIF-format.
  4. Iconj - det som er bemerkelsesverdig er at du enten kan laste ned det opprettede ikonet eller la det stå på tjenesten og motta en lenke til denne filen
  5. DeGraeve er en ganske kraftig Favicon Generator, lik funksjonaliteten til den tidligere anmeldte Favicon.cc. Også her kan du gjøre alt enten fra bunnen av, eller laste opp et bilde, som senere kan justeres og lastes ned i ICO-format av passende størrelse.
  6. Generator - lar deg både generere et favorittikon fra et opplastet bilde, og lage det fra bunnen av i en spesiell editor.
  7. Online ikonredigerer favicon.ico - vel, det gjør liksom alt - å lage favorittikoner fra bunnen av og endre et eksisterende bilde.
  8. Online Favicon er et svært funksjonelt verktøy for å lage og redigere minilogoer
  9. Gratis Favicon Generator - i tilfelle ingenting fra listen ovenfor passer deg.
  10. Favicon generator - enkel og smakfull...

Hvis du ikke bryr deg om eksklusiviteten til mini-logoen din for nettstedet, og du ikke kan tukle med redaktører og generatorer, kan du velge et passende ikon for deg selv på nettsteder der de er en krone et dusin. Tross alt, faktisk, absolutt ethvert ikon som måler 16 x 16 piksler, som du kan laste ned fra Internett eller finne i dypet av datamaskinen din, vil passe oss.

Men du må huske at favorittikonet først og fremst må tiltrekke brukernes oppmerksomhet. Ideelt sett vil en bruker kunne gjenkjenne nettstedet ditt bare ved å se på favorittikonet, så det er bedre om det er unikt, men du kan også se etter noe utenfor allfarvei på Internett.

Hvis du ikke har lyst eller mulighet (du er ikke kunstner og har aldri vært det), så vil den enkleste måten være å prøve å søke i gallerier med samlinger av gratis favoritter:

  1. Iconj er en ganske stor samling av ikoner designet av andre mennesker og gjort tilgjengelig for publikum
  2. Favicon.cc - 55 tusen ulike alternativer for alle anledninger. Det er også animerte favorittikoner, som bare vil være synlige i Firefox-nettleseren.
  3. The Favicon Gallery - noen flere ikoner som passer til størrelsen

Hvis du vet om andre lignende ressurser, vil jeg legge til lenkene dine til denne listen.

Hvordan installere et Favicon på et nettsted og spesifisere banen til det

Din nettleser og Yandex søkerobot vil se etter favorittikonet primært i rotmappen på nettstedet ditt. Derfor kan du ganske enkelt koble til nettstedet via FTP og laste opp Favicon.ico-filen til rotkatalogen (vanligvis mappene public_htm eller htdocs) (det er bedre å skrive navnet med små bokstaver). Åpne nå ressursen din i en nettleser og se om ikonet på fanen har endret seg. Har det endret seg? Ingen? Vel, det er greit.

Hvis du ikke var i stand til å plassere et favorittikon på denne måten, må du kanskje, fordi... det hender ofte at den lastes fra cachen gammel versjon. Du kan prøve det, for meg reagerer det best på endringer som er gjort uten å tømme hurtigbufferen. Hvis problemet ikke er i nettleserens cache, betyr dette det nettstedet ditt har en annen plassering for favorittikonet, forskjellig fra rotmappen. Hvordan kan jeg sjekke dette?

Åpne kildekoden til en hvilken som helst side på nettstedet ditt. For å se kildekoden, klikk på siden høyreklikk musen og velg det aktuelle elementet kontekstmenyen(For eksempel " Kildekode" i gamle Opera, eller "Sidekildekode" i Mazila Firefox, eller "Vis sidekode" i Google Chrome, eller "Se HTML-kode" i IE) eller trykk hurtigtasten Ctrl+U. Se nå på toppen av sidekoden for en linje som spesifiserer banen til favicon.ico.

Det kan se noe slikt ut:

Nå, når du kjenner denne banen, kan du koble til igjen ved å bruke FTP-protokoll og last opp favorittikonet til den angitte banen, og erstatter den som allerede er på nettstedet. Hvis det ikke har skjedd noen endringer i nettleserens adresselinje igjen, prøv å tømme nettleserens buffer igjen.

I Joomla Favicon bor vanligvis i mappen med malen du bruker (stien til den i Joomla 1.5 ble skrevet i index.php-filen fra katalogen til samme mal, men i Joomla 3 ble alt litt mer komplisert). De. For å endre favicon i Joomla, alt du trenger å gjøre er å følge denne banen og laste opp favicon.ico-filen din der, og svare bekreftende på spørsmålet om erstatning:

/templates/folder_with_the_design_template/favicon.ico

Favicon-fil i WordPress som standard kan det også være i mappen med temaet du bruker (stien til det er også satt der):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Generelt, hvis du vil angi eller endre banen til favorittikonet ditt, som vil bli forstått av både nettlesere og Yandex-søkeroboten, så må du skrive den i den riktige malfilen for Joomla, WordPress eller en hvilken som helst annen motor, mellom åpnings- og avslutningstaggen HODE, følgende kodelinjer:

I hvilken malfil du trenger for å skrive disse linjene avhenger av motoren til nettstedet ditt. For eksempel i i WordPress du må åpne header.php-filen for redigering: wp-content/themes/Folder_with_your_theme_design. Åpne header.php i editoren og helt i begynnelsen finner du åpningen HTML-tag HODE. På et hvilket som helst sted etter det, men før det avsluttende HEAD, skriv en av kodelinjene ovenfor som indikerer banen til din grafisk fil mini logo.

Hvordan installere animert favorittikon? I utgangspunktet akkurat det samme som en vanlig. Den eneste forskjellen vil være koden som er satt inn i nettstedsmalen din, som du indikerer for nettlesere og Yandex-søkeroboten banen til ønsket grafikkfil. Faktum er at den animerte Favicon vil ha en GIF-utvidelse, og derfor må du skrive noe slikt i kodelinjene:

Det er hele forskjellen mellom animerte favorittikoner og vanlige. Men vær oppmerksom på at det animerte ikonet bare vil fungere i FireFox i andre nettlesere, det vil være statisk. Yandex, når du laster inn det animerte favorittikonet ditt, konverterer det til et statisk PNG-format. Men etter min mening er det ikke verdt bryet - å installere en animert en i stedet for en vanlig mini-logo for et nettsted gir ikke mye mening. Men det er bare min IMHO.

Lykke til til deg! Vi sees snart på sidene til bloggsiden

Du kan være interessert

Online FTP-klient Net2ftp og Google Alerts – nyttige tjenester for webansvarlige
Nettstedsanalyse i gratis nettjenester Pr-cy, Cy-pr, Be1, Xseo og andre
Ikoner, merker, bakgrunner, bilder og logoer for nettstedet (onlinetjenester IconFinder, Freepik, PSDGraphics og andre)
Brukervennlighet – hvordan gjøre nettstedet ditt praktisk for besøkende og prøve å holde dem til å lese artiklene dine så lenge som mulig
MegaIndex Tools - et sett med verktøy for webmastere og optimizere
Hvordan sjekke kompatibiliteten på tvers av nettlesere til et nettsteds layout i Browsershots og konfigurere sending av ping når nytt materiale dukker opp
Http - hva er det, hvordan se overskrifter og sjekke serverens svarkode, hva betyr kodene 200, 301, 302, 404 og 500?
Kryssposting - hva er det og hvordan du gjør det riktig
Hvordan markedsføre et nettsted selv og gratis

Hei alle sammen!

I denne artikkelen vil jeg fortelle deg hvordan du installerer et favicon på et nettsted. Du kan gjøre dette ved å bruke rotkatalogen nettstedet eller bruke malfunksjonaliteten. Vi vil analysere alle alternativene og bestemme hvilken som vil være best for en bestemt sak.

Men før det skal vi snakke om hvordan dette favorittikonet kan tegnes. Deretter finner vi ut hvilken størrelse logoen skal være, og på slutten vil jeg fortelle deg hvordan du setter inn det opprettede ikonet på nettstedet.

Favicon er et nettstedsikon som måler 16 x 16 (eller 32 x 32, men ikke mer). Den vises i nettleserfanen. Det ser slik ut:

Ikonet vises også i søkeresultater, og hvis nettstedet ditt ikke har et eget favorittikon, er det usannsynlig at brukere vil ta hensyn til det. Spesielt de mer erfarne som virkelig setter pris på hver minste detalj.

I Yandex Webmaster er fraværet av et favicon klassifisert som en feil som må rettes snarest. Dette skyldes ikke bare det faktum at folk i en søkemotor kanskje ikke stoler på et nettsted uten et ikon, men også på visse søkealgoritmer. Roboter ser slike tekniske mangler og senker som oftest ressursen i søkeresultatene. Et trist fenomen som kan påvirke hele SEO-kampanjen.

La oss oppsummere:

  • Favicon påvirker atferdsfaktorer og klikkfrekvenser i søkeresultater.
  • Søkeroboter kan også ta hensyn til tilstedeværelsen eller fraværet av et favorittikon.
  • En slik teknisk feil kan føre til nedgang i trafikken.

Med andre ord, hvis du har et spørsmål i det hele tatt: legg til et favorittikon eller ikke, så er svaret åpenbart - sørg for å legge det til.

La oss nå finne ut hvordan du tegner dette ikonet. Dette kan gjøres ved hjelp av ulike nettjenester og redaktører.

Hvor kan du laste ned den ferdige versjonen

Langt ifra beste valget, men noen bruker det. Du kan laste ned et ferdig favicon fra Internett og ikke bekymre deg for mye om å lage din egen. Alle presenteres i praktiske formater og de riktige størrelsene.

Bare skriv inn ønsket søkeord i søkemotoren, noe sånt som "Last ned et ferdig favicon", hvoretter du vil bli presentert med et stort antall forskjellige varianter.

Last ned bildet til din PC, og installer det deretter på nettsiden. Det er enkelt. De er tilgjengelige helt gratis, ingen vil skjelle ut deg. Selv om vi snakker om et selskap, til og med et lite selskap, så kan det oppstå ubehagelige hendelser hvis noen andres logo blir oppdaget.

Du kan søke etter ferdige alternativer på ulike nettsider. Som regel er det hele samlinger av ulike tematiske logoer som kan appellere til enkelte webmastere.

Men jeg vil gjenta igjen at det ville være bedre å lage et favorittikon selv.

Opprette et favorittikon

Online tjenester

Du kan tegne et favorittikon i nettbaserte tjenester. Du trenger bare å skrive inn det tilsvarende søket i søkemotoren, hvoretter oppmerksomheten din vil bli presentert med en hel liste over nettsteder som kan hjelpe deg med å realisere planene dine.

Dette kurset vil dekke de viktigste egenskapene til kompetent skaperverk informasjonsprosjekter, interaksjon med teamet og andre nyttige aspekter som du definitivt vil trenge når du skal utvide virksomheten din.

Favicon - begrepet bokstavelig talt oversettes som "favorittikon" - regnes som et av de mest komplekse elementene i moderne webdesign. Dette er et lite bilde som er plassert i nettleserfanen, i søkefeltet og andre steder, og spiller en viktig rolle i personaliseringen av nettstedet.

På grunn av det ikke-standardiserte formatet og den lille størrelsen, kan det være utfordrende å lage et favicon, både fra et teknisk og designmessig synspunkt.
En like vanskelig oppgave er å sikre favicon-kompatibilitet med forskjellige nettlesere.

I denne artikkelen lærer du hvordan du lager et favicon - vi vil gi designtips og fortelle deg om tjenester for å lage et favicon, og hvordan du legger til et favicon på nettstedet.

Hva er et favicon og hvorfor er det nødvendig?

Til tross for at et favicon er et veldig lite grafisk objekt, er det ekstremt viktig i webdesign og generelt.

Klikk for å forstørre bildet.

For det første, favicon gjør nettstedet ditt mer personlig og konsistent enhetlig stil med andre grafiske elementer, for eksempel en logo.

For det andre , skiller et favorittikon nettstedet ditt fra andre nettressurser i søkeresultatlisten. Et nettsted uten dette miniikonet vil se kjedelig ut og tape for konkurrentene. Med et ord, et favorittikon er rett og slett et "must-have" for nettsteder.

For det tredje , lar et favorittikon brukeren raskt finne nettstedet ditt i katalogen med bokmerker eller andre ikoner på skrivebordet.

Lage et favorittikondesign

Faviconet skal gjenspeile essensen og merkevaren i et lite skilt på størrelse med et smilefjes. God avgjørelse vil være en forenklet versjon av firmalogoen, men husk: en fullverdig logo med tekst og varemerker er ikke egnet for dette formålet.

Disse nettstedene bruker en grafikk av merkevaren deres (eller i det minste noe som ligner på det).

Ikke bruk tekst

Du bør unngå å bruke tekst, fordi på grunn av den lille størrelsen på favorittikonet, vil inskripsjonene være uleselige. Plasser 1, maksimalt 2 bokstaver på ikonet - for eksempel de første i navnet på bedriften eller nettressursen din; i dette tilfellet kan de fortsatt skilles fra hverandre.

Favicon pikselering

Favoritter er så små at hver piksel betyr noe. Ofte, når du gjør en logo i full størrelse mindre, virker bildet uskarpt.

Dette er et fragment av Facebook-logoen i full størrelse etter at den ble redusert til størrelsen 32x32. Det er lett å legge merke til at bildet "svever" rundt kantene. For å unngå en slik defekt, bør redigering gjøres på pikselnivå.
Når jeg jobber med ikoner foretrekker jeg å bruke (som Photoshop eller Pixelmator). Først skalerer jeg ned logoen i full størrelse til 64x64 piksler fordi det er det største favorittikonet jeg trenger. Arbeidet er veldig møysommelig, det kan ta en hel time, eller til og med to, men resultatet er rett og slett utmerket.
Hvis du ikke har tid og ferdigheter i slike operasjoner, er det bedre å bruke nettjenester, som f.eks Logotizer.ru

Favicon størrelse

Etter å ha mottatt et 64x64-ikon, lager jeg ikoner på 32x32, 24x24 og 16x16 piksler på samme måte. Hver av dem har sitt eget formål:

– 64×64 – “Leseliste” i Safari og Windows
– 24×24 – Festede nettsteder i IE9.
– 32×32 – For skjermer med høy oppløsning.
– 16x16 – Brukes vanligvis i nettlesere som IE, Safari, Chrome, etc.

Men å lage mindre favorittikoner stopper ikke der: ekstra redigering kreves ofte på pikselnivå. Du kan også legge til en alfakanal hvis det passer deg. Hvis dette tidligere forårsaket problemer, støtter nesten alle nettlesere nå åpenhet i favorittikoner.

Favicon-formater

Tidligere, da kun filer ble støttet Windows-format ICO, vi kan spare tid ved å lagre 16x16 favicon som en GIF og gi den .ico-utvidelsen. Denne teknikken fungerte feilfritt! Men nå er denne metoden ikke nødvendig, da verktøy for å lage ICO-filer lett kan finnes på Internett. Dessuten, og er nå brukt for favicons, men de vanligste er fortsatt bare de følgende to.

ICO

Håndflaten tilhører ICO-formatet. I motsetning til PNG-filer, kan ICO-filer komme i forskjellige oppløsninger og bitdybder (noe som er flott for Windows). Internet Explorer bruker favorittikoner i forskjellige størrelser (for eksempel 32 pikselikoner for favorittikonet Windows-oppgaver 7), og derfor er ICO-formatet i dette tilfellet det eneste alternativet.

PNG-filer er veldig praktiske fordi du ikke trenger noen spesielle verktøy for å lage dem. Dette formatet støtter en alfakanal og lar deg lage svært små filer. Den eneste ulempen med PNG-formatet er kanskje at det ikke støttes i Nettleser Utforsker.

Det er andre alternativer:

– GIF og animerte GIF-formater har ingen andre fordeler enn kompatibilitet med svært gamle nettlesere.
JPG-format bruk anbefales ikke, selv om bildet presenteres i form av et fotografi. Dette formatet mangler klarheten til PNG, og dets eneste fordel er jevnere overganger mellom farger - en nyanse som er helt umerkelig i et veldig lite bilde.
– SVG kan være et flott alternativ hvis flere nettlesere støttet favorittikoner i dette formatet. Foreløpig er det bare kompatibilitet med Opera.
– Det finnes også et såkalt «underformat» av PNG – APNG (animert PNG), som støttes i Firefox og Opera. Imidlertid er gjennomførbarheten av bruken fortsatt tvilsom. Et animert favorittikon kan være distraherende og til og med irriterende for brukeren.

Lag et nettfavicon – verktøy og nettjenester

Vi har valgt ut de mest nyttige tjenestene for deg som vil hjelpe deg med å lage et nettfavicon.

Logotizer

Logotizer er nytt, enkelt og praktisk service for å lage et favorittikon og logo for nettstedet ditt.
Med denne nettprodusenten kan du lage et favorittikon fra bunnen av. Tjenesten er rettet mot nybegynnere, så utvik deg god design vil ikke være vanskelig.

Hvordan lage et favorittikon ved hjelp av Logotizer online generator

Hovedarbeidsområdet er til venstre. Til høyre kan du se hvordan favorittikonet vil se ut på forskjellige medier - en nettleserfane, en datamaskinoppgavelinje eller en smarttelefonskjerm. Veldig praktisk og oversiktlig.

Først bør du velge en form for favicon. Det er mange av dem, mer enn 50. Vi anbefaler deg å velge enkle og ukompliserte former for å gjøre favorittikonet lett å oppfatte og huske.

På dette stadiet bestemmer du også fargen på skjemaet, som går som bakgrunnen til favorittikonet, og velger en ramme. Se på hvilken farge som dominerer logoen din (hvis du har en) og hvilke farger som er de viktigste på nettstedet ditt. Det er innenfor dette området vi anbefaler å lage et favicon-design.

Under "Shape"-blokken er det en samling av figurer (symboler). Det er ikke mange av dem, det er synd at du ikke kan laste opp dine egne alternativer; men valget er fortsatt ganske interessant.

Endre farge, størrelse, plassering av figurene! Med et ord, eksperiment, heldigvis lar tjenesten deg gjøre dette.

Når formen er valgt, kan du legge til teksten din. Som jeg skrev tidligere, er det bedre å bruke 1 eller 2 bokstaver, ikke mer.

Det er et omfattende utvalg av fonter. Dette er definitivt et pluss. Som med former kan du endre farge, størrelse og plassering av tekst.

Hvis du bestemmer deg for at et favicon-lag plager deg midlertidig eller ikke er nødvendig i det hele tatt, kan du ganske enkelt skjule det.

Etter å ha opprettet et favorittikon, vil tjenesten tilby å lagre det. Registrer en konto (i 2017 er det ingen måte uten registrering), og etter det kan du laste ned filer for en liten betaling - 199 rubler.

Siden inneholder også små instruksjoner om hvordan du legger til et favicon på siden, så du bør ikke ha noen problemer med å legge til et favicon på siden. Lignende anbefalinger er også gitt nedenfor i denne artikkelen.

Etter betaling mottar brukeren umiddelbart 10 favorittikoner i forskjellige størrelser for alle enheter som trengs i dag (Apple touch-ikon, Microsoft Application Icons og andre).

Selve favicon.ico-filen har flere størrelser og inneholder ikoner med 4 størrelser i 1 fil (16px, 24px, 32px, 64px). Følgelig, hvis du legger til et nettsted i nettleserens bokmerker eller åpner loggen din, vil du kunne se ikoner i forskjellige størrelser, men de vil vises tydelig og uten uskarphet.

Totalt sett er tjenesten god. Enkelt, praktisk, ingenting overflødig.

RealFaviconGenerator.net

er en enklere favicon-generator som lar deg lage favorittikoner for enhver plattform. Dessuten kan du teste favorittikonet på ressursen. Skriv inn webadressen til nettstedet ditt, og du vil se hvordan favorittikonet ditt ser ut i hver nettleser og hver operativsystem. Real Favicon Generator vil også fortelle deg hvordan du kan fikse feilene og gjøre faviconet ditt enda bedre.

Favicon.by

Favicon.by er en annen gratis og brukervennlig favicon-generator som konverterer PNG-, JPG- og GIF-filer til .ico-format. Last opp et bilde fra datamaskinen din, velg en størrelse (16x16px eller 32x32px) og klikk på "Opprett"-knappen. Følg instruksjonene for å lagre det resulterende favorittikonet på nettstedet ditt.

Tjenesten gjør det også mulig å tegne en logo piksel for piksel, men for å være ærlig er det ikke alle som kan gjøre dette. Jeg kunne for eksempel ikke. Så skjev jeg er :)

Hvordan legge til et favorittikon på et nettsted

Du kan legge til et favorittikon på nettstedet ditt ved å gjøre noen få endringer i HTML-koden til siden.

Trinn 1: Last opp "favicon.ico"-filen til vertsserveren din.

For å gjøre dette, gå til FTP-serveren din ved å bruke denne lenken:
ftp:// [e-postbeskyttet]
Skriv inn brukernavn og passord. Disse kan fås fra vertsselskapets administrasjonspanel.
Last opp favicon-filer til rotkatalogen. Rotkatalogen kalles vanligvis "public_html" eller "www".

Trinn 2: Legg til et favorittikon i HTML-en.

Hold FTP-servervinduet åpent, last ned filen "index.html" eller "header.php".
Da må du laste ned koden. Koden du laster ned avhenger av nettstedet ditt.
Hvis nettstedet ditt er i HTML, finner du HEAD-området i index.html-filen og limer inn følgende kode:

Hvis nettstedet ditt er på WordPress, finn HEAD-området i header.php-filen og lim inn følgende kode:

/favicon.ico” />

Ved å bruke disse kodene vil nettlesere kunne finne favorittikonene dine.
Så du har installert favorittikonet ditt!

Hvordan legge til et favorittikon på WordPress og andre plattformer

Hvis ressursen din er basert på WordPress eller et annet CMS, er det veldig enkelt å legge til et favorittikon på nettstedet. Generelt vil algoritmen for å legge til et favorittikon for forskjellige plattformer være den samme.
1. Du må gå til sidekonsollen.
2. Finn delen "Design" eller "Utseende".

3. Gå til "Temainnstillinger"-delen og finn "Favicon" der.

4. Last opp favorittikonet fra datamaskinen.

5. Lagre og oppdater siden.

Hvordan lage mer komplekse favoritter

Denne artikkelen diskuterer enkle og raske måter å lage favorittikoner som er kompatible med nesten alle nettlesere og operativsystemer. Men når det kommer til webdesign og utvikling, er himmelen grensen. Hvis du vil lære hvordan du lager mer komplekse favorittikoner, berøringsikoner for iOS-startskjermer, ikoner for Metro-grensesnittet i Windows, ikoner for Google TV og mye mer, anbefaler jeg at du sjekker ut disse materialene: favicon jukseark. Den inneholder fullstendig informasjon om emnet og gir gode kilder. Dette er et flott alternativ for de designere og utviklerne (inkludert meg selv) som hele tiden er ute etter å utvide kunnskapen sin.

Med Favico.js kan du lage dynamiske favorittikoner med tall.

Du kan også trenge et dynamisk favicon, som har et ikon med et skiftende nummer. For å lage slike favorittikoner anbefaler jeg å bruke tjenesten favico.js, tilgjengelig på Github. Dynamiske favorittikoner er ennå ikke kompatible med alle nettlesere. Men for de nettleserne som støtter dem, kan disse ikonene være et interessant og nyttig tillegg.

Hvis du vil legge til et annet tips til denne artikkelen eller har et spørsmål, vennligst legg igjen en kommentar nedenfor!

Hvordan lage et favorittikon for en nettside - tips og tjenester oppdatert: 7. februar 2018 av: admin