Favicon - termen översätts bokstavligen som "favoritikon" - anses vara en av de mest komplexa delarna av modern webbdesign. Detta är en liten bild som finns på webbläsarfliken, i sökfältet och på andra ställen, och spelar en viktig roll i personaliseringen av webbplatsen.
På grund av det icke-standardiserade formatet och den lilla storleken kan det vara svårt att skapa en favicon, både ur teknisk och designmässig synvinkel.
En lika svår uppgift är att se till att faviconen är kompatibel med olika webbläsare.
I den här artikeln kommer du att lära dig hur du gör en favicon - vi kommer att ge designtips och berätta om tjänster för att skapa en favicon och hur du lägger till en favicon på webbplatsen.
Vad är en favicon och varför behövs den
Även om en favicon är ett väldigt litet grafiskt objekt är det oerhört viktigt i webbdesign och i allmänhet.
Klicka för att förstora bilden.
för det första, En favicon gör din webbplats mer personlig och konsekvent med andra grafiska element som en logotyp.
För det andra , favicon gör att din webbplats sticker ut bland andra webbresurser i sökresultatlistan. En webbplats utan denna miniikon kommer att se bleka ut och förlora mot konkurrenterna. Med ett ord, favoritikonen är bara ett "måste" för webbplatser.
För det tredje , en favicon låter användaren hitta din webbplats snabbare i en katalog med bokmärken eller andra skrivbordsikoner.
Skapa en favicon-design
Favoritikonen ska fånga essensen och varumärket i en liten skylt som är lika stor som en smiley. En förenklad version av företagets logotyp skulle vara en bra lösning, men observera: en fullfjädrad logotyp med text och varumärken är inte lämplig för detta ändamål.
Dessa webbplatser använder sitt varumärkes grafiska märke (eller åtminstone något liknande det).
Använd inte text
Du bör vägra att använda text, för på grund av den lilla storleken på favicon kommer inskriptionerna att vara oläsliga. Placera 1, max 2 bokstäver på ikonen - till exempel de första i namnet på ditt företag eller webbresurs; i detta fall kan de fortfarande särskiljas.
Favicon pixelisering
Favoritikonerna är så små att varje pixel spelar roll. Ofta när du förminskar en logotyp i full storlek blir bilden suddig.
Detta är ett utdrag av Facebook-logotypen i full storlek efter att den har skalats ner till 32x32. Det är lätt att märka att bilden "svävar" längs kanterna. För att undvika en sådan defekt bör du redigera på pixelnivå.
När jag arbetar med ikoner föredrar jag att använda bitmappsredigeringsprogram (som Photoshop eller Pixelmator). Först skalar jag ner logotypen i full storlek till 64x64px eftersom det är den största favoritikonen jag behöver. Arbetet är mycket mödosamt, det kan ta en timme eller till och med två, men resultatet är helt enkelt utmärkt.
Om du inte har tid och kompetens inom sådan verksamhet är det bättre att använda onlinetjänster som t.ex logotizer.ru
Favicon storlek
Med en 64x64-ikon skapar jag ikoner på 32x32, 24x24 och 16x16 px på samma sätt. Var och en av dem har sitt eget syfte:
- 64×64 - "Läslista" i Safari och Windows
- 24x24 - Fästa webbplatser i IE9.
— 32×32 – För högupplösta skärmar.
- 16x16 - Används vanligtvis i webbläsare som IE, Safari, Chrome, etc.
Men skapandet av mindre favoritikoner är inte begränsat till: ytterligare redigering på pixelnivå krävs ofta. Du kan också lägga till en alfakanal om det passar dig. Om detta tidigare orsakade svårigheter, stöder nu nästan alla webbläsare transparens i faviconer.
Favicon-format
Tidigare, när endast Windows ICO-formatfiler stöddes, kunde vi spara tid genom att spara en 16x16 favicon som en GIF och ge den tillägget .ico. Detta tillvägagångssätt fungerade felfritt! Men nu är denna metod inte nödvändig eftersom verktyg för att skapa ICO-filer lätt kan hittas på internet. Dessutom, och används nu för favicons, men endast följande två är de vanligaste.
ICO
Handflatan tillhör ICO-formatet. Till skillnad från PNG-filer kan ICO-filer ha olika upplösningar och bitdjup (vilket är bra för Windows). Webbläsaren Internet Explorer använder favoritikoner av olika storlekar (till exempel ikoner med 32 pixlar för aktivitetsfältet i Windows 7), och därför, i det här fallet, är ICO-formatet det enda alternativet.
PNG-filer är mycket bekväma eftersom du inte behöver några speciella verktyg för att skapa dem. Detta format stöder alfakanalen och låter dig skapa filer av minsta storlek. Den enda nackdelen med PNG-formatet är kanske att det inte stöds i Internet Explorer.
Det finns andra alternativ:
– GIF och animerade GIF-format har ingen fördel annat än att de är kompatibla med väldigt gamla webbläsare.
– JPG-formatet rekommenderas inte, även om bilden är i form av ett fotografi. Det här formatet saknar skarpheten hos PNG, och den enda fördelen är mjukare övergångar mellan färger - en nyans som är helt osynlig i en mycket liten bild.
– SVG skulle kunna vara ett bra alternativ om fler webbläsare stöder favoritikoner i detta format. Än så länge finns det bara kompatibilitet med Opera.
– Det finns också ett så kallat ”underformat” av PNG – APNG (animerad PNG), som stöds i Firefox och Opera. Det är dock fortfarande ifrågasatt om det är genomförbart att använda det. En animerad favoritikon kan vara distraherande och till och med irriterande för användaren.
Skapa favicon online - verktyg och onlinetjänster
Vi har valt ut de mest användbara tjänsterna åt dig som hjälper dig att skapa en favoritikon online.
Logotizer
Logotizer är en ny, enkel och bekväm tjänst för att skapa en favoritikon och logotyp för din webbplats.
Med denna online-favicon-tillverkare kan du skapa en favoritikon från grunden. Tjänsten riktar sig till nybörjare, så det blir inte svårt att utveckla en bra design.
Hur man skapar en favoritikon med Logotizer Online Generator
Huvudarbetsytan är till vänster. Till höger kan du se hur favoritikonen kommer att se ut på olika media - en webbläsarflik, en dators aktivitetsfält eller en smartphoneskärm. Mycket bekvämt och visuellt.
Först måste du välja en form för favicon. Det finns många av dem, fler än 50. Vi råder dig att välja enkla och okomplicerade former för att göra faviconen lätt att förstå och komma ihåg.
I det här skedet definierar du också färgen på formen som ska användas som bakgrund för favoritikonen och väljer ram. Se vilken färg som dominerar din logotyp (om någon), vilka färger som är de viktigaste på din webbplats. Det är inom detta intervall som vi rekommenderar att skapa en favicon-design.
Under "Form"-blocket finns en samling former (symboler). Det finns inte så många av dem, det är synd att du inte kan ladda upp dina egna alternativ; men valet är ändå ganska intressant.
Ändra färg, storlek, position på formerna! Med ett ord, experiment, bra, tjänsten låter dig göra detta.
När formen är vald kan du lägga till din egen text. Som jag skrev tidigare är det bättre att använda 1 eller 2 bokstäver, inte mer.
Det finns ett stort urval av typsnitt. Detta är definitivt ett plus. Precis som med former kan du ändra färg, storlek och position på texten.
Om du bestämmer dig för att något favicon-lager tillfälligt stör dig eller inte behövs alls, kan du helt enkelt dölja det.
Efter att ha skapat en favoritikon kommer tjänsten att erbjuda att spara den. Registrera ett konto (2017 finns det inget sätt utan att registrera dig), och efter det kan du ladda ner filer för en liten betalning - 199 rubel.
Sajten innehåller även en liten instruktion om hur man lägger till en favicon på sajten, så du bör inte ha några problem med att lägga till en favicon till sajten. Nedan i den här artikeln finns också liknande rekommendationer.
Efter betalning får användaren omedelbart 10 favoritikoner i olika storlekar för alla enheter som behövs idag (Apple touch-ikon, Microsoft Application Icons och andra).
Själva filen favicon.ico har flera storlekar och innehåller ikoner med fyra storlekar i en fil (16px, 24px, 32px, 64px). Följaktligen, om du lägger till webbplatsen i dina webbläsarbokmärken eller öppnar historiken, kommer du att kunna observera ikoner i olika storlekar, men de kommer att visas tydligt och utan oskärpa.
Generellt sett är servicen bra. Enkelt, bekvämt, inget mer.
RealFaviconGenerator.net
är en enklare favicongenerator som låter dig skapa faviconer för vilken plattform som helst. Dessutom kan du testa faviconen på resursen. Ange din webbplats URL så ser du hur din favoritikon ser ut i alla webbläsare och operativsystem. Real Favicon Generator kommer också att berätta hur du åtgärdar brister och gör din favicon ännu bättre.
favicon.by
favicon.byär en annan gratis och lättanvänd favicon-generator som konverterar PNG-, JPG- och GIF-filer till .ico-format. Ladda upp en bild från din dator, välj en storlek (16x16px eller 32x32px) och klicka på knappen "Skapa". För att spara den mottagna favoritikonen på din webbplats, följ instruktionerna.
Tjänsten gör det också möjligt att rita en logotyp efter pixlar, men om jag ska vara ärlig så kan inte alla göra det. Jag kunde till exempel inte. Så kurvig är jag :)
Hur man lägger till en favoritikon på en webbplats
Du kan lägga till en favoritikon på webbplatsen genom att göra några ändringar i HTML-koden på webbplatssidan.
Steg 1: Ladda upp filen "favicon.ico" till din värdserver.
För att göra detta, gå till din FTP-server med denna länk:
ftp:// [e-postskyddad]
Ange ditt användarnamn och lösenord. De kan erhållas från ditt webbhotells adminpanel.
Ladda upp favicon-filerna till rotkatalogen. Rotkatalogen heter vanligtvis "public_html" eller "www".
Steg 2: Lägg till en favoritikon i HTML-koden.
Håll FTP-serverfönstret öppet och ladda ner filen "index.html" eller "header.php".
Sedan måste du ladda upp koden. Den nedladdningsbara koden beror på din webbplats.
Om din webbplats är i HTML, leta reda på HEAD-området i filen index.html och klistra in följande kod:
Om din webbplats är WordPress, leta reda på HEAD-området i din header.php-fil och klistra in följande kod:
/favicon.ico" />
Dessa koder tillåter webbläsare att hitta dina favoritikoner.
Så du har installerat din favicon!
Hur man lägger till en favoritikon på WordPress och andra plattformar
Om din resurs är baserad på WordPress eller ett annat CMS är det mycket enkelt att lägga till en favoritikon på webbplatsen. Generellt sett kommer algoritmen för att lägga till en favicon för olika plattformar vara densamma.
1. Du måste gå till webbplatskonsolen.
2. Hitta avsnittet "Design" eller "Utseende".
3. Gå till avsnittet "Temainställningar" och hitta "Favicon" där.
4. Ladda upp en favoritikon från din dator.
5. Spara och uppdatera sidan.
Hur man skapar mer komplexa favoriter
Den här artikeln tar upp enkla och snabba sätt att skapa favoritikoner som är kompatibla med nästan alla webbläsare och operativsystem. Men när det kommer till webbdesign och utveckling finns det ingen gräns för perfektion. Om du vill lära dig hur du gör mer avancerade favoritikoner, pekikoner på iOS-startskärmen, ikoner för Windows Metro-gränssnitt, Google TV-ikoner och mer rekommenderar jag att du kollar in dessa handledningar: favicon fuskblad. Den innehåller fullständig information om ämnet och bra källor ges. Detta är ett bra alternativ för de designers och utvecklare (inklusive mig själv) som ständigt letar efter att utöka sin kunskap.
Med Favico.js kan du skapa dynamiska nummerfaviconer.
Du kan också behöva en dynamisk favicon, som har en ikon med ett skiftande nummer. För att skapa sådana favoriter rekommenderar jag dig att använda tjänsten favico.js, tillgänglig på Github. Medan dynamiska favoritikoner inte är kompatibla med alla webbläsare. Men för de webbläsare som stöder dem kan dessa ikoner vara ett intressant och användbart tillägg.
Om du vill lägga till ytterligare ett tips till den här artikeln eller ställa en fråga, lämna en kommentar nedan!
Hur man skapar en favicon för en webbplats - tips och tjänster uppdaterad: 7 februari 2018 av: administration
Hej kära vänner! Idag ska jag skriva om hur man gör en favicon för en hemsida eller blogg. Dessutom kommer jag att överväga två sätt att skapa en favoritikon. Du kommer att lära dig hur man gör en favicon-ikon i Photoshop och att använda en onlinetjänst ;-).
Innan du går vidare till att läsa den här artikeln råder jag dig också att läsa andra användbara inlägg som kommer att förbättra din resurs: "", "?", "".
Och nu tillbaka till ämnet för inlägget. Om sajten inte har en favicon, förlorar den mycket. För det första kan faviconen öka trafiken från Yandex. Fråga hur? Väldigt enkelt. Faktum är att Yandex, bredvid rubriken Titel, också visar webbplatsens favicon. Och om titlarna och beskrivningarna av två resurser är ungefär desamma, men den ena har en favicon och den andra inte har det, så kommer besökaren med största sannolikhet att gå till en resurs med en favicon.
Tja, och för det andra kan en så liten ikon skilja din resurs från andra. Därför måste faviconen vara ljus och minnesvärd. Låt oss försöka skapa det så här.
Hur man gör en webbplatsfavicon från början
För att skapa en favoritikon använder jag . Det är väldigt lätt att använda. Först måste du ange vilken färg du ska använda när du skapar favoritikonen. För att göra detta, ställ in nyansen och mättnaden.
När du har valt en färg, börja rita favoritikonen. Om du ritade något felaktigt kan det raderas. För att göra detta, markera rutan bredvid det "transparenta" verktyget.
Så jag gjorde en sådan favicon på några minuter ;-).
Längst ner finns en förhandsgranskning så att du alltid kan se vad du har. När du har ritat en favoritikon måste du ladda ner den till din dator. För att göra detta klickar du helt enkelt på knappen "ladda ner Favicon".
Hur man gör en favicon för en webbplats från en färdig bild
Du kan skapa en favoritikon från vilken bild som helst. Det kan vara ditt foto, webbplatslogotyp eller något annat. För att göra detta måste du öppna Photoshop-programmet och ladda upp bilden som du vill konvertera till en favoritikon. Klicka på "Arkiv" - "Öppna".
Sedan måste du beskära bilderna så att de blir fyrkantiga. För att göra detta väljer jag beskärningsverktyget, ritar runt den del som jag vill behålla och trycker på Enter.
Då måste du minska bilderna till 16 px. För att göra detta, välj från verktygsfältet Bilder - Bildstorlek.
Ställ in bredd och höjd till 16 px och klicka på OK.
Om du vet hur du använder Photoshop kan du enkelt skapa en favoritikon för en webbplats från grunden. För att göra detta, skapa en ny fil med en bredd och höjd på 16 px, rita sedan vad du vill där och spara den här filen i iso-format.
Det finns också en mängd tjänster på Internet där du kan ladda ner en favoritikon för din webbplats. Här är de mest populära:
- www.audit4web.ru/info/favicon
- www.favicon.cc är en bekant tjänst
- www.iconj.com
- www.favicon.co.uk/gallery.php
- thefavicongallery.com
- favicon-gallery.ru/gallery
Hur man gör en favoritikon för wordpress
När du har skapat eller laddat ner en favoritikon måste du på något sätt knyta den till webbplatsen. Jag ska nu visa dig hur du gör detta i wordpress.
Först måste du ladda upp ikonen till webbhotellet på följande adress: wp-content/themes/theme names/images/
Efter det, gå till Kontrollpanelen - Utseende - Editor, öppna header.php-filen och skriv följande kod där, före "/head"-taggen:
Denna kod måste ändras:
- webbplats - ange din domän;
- BusinessBlog - ange namnen på ditt ämne;
- favicon.ico - ange namnen på din ikon som du laddade upp till webbhotellet.
Spara nu dina ändringar och se vad du har:
Det kan också vara så att du inte kommer att se några ändringar efter att du har uppdaterat sidan. Detta beror på att webbläsaren inte laddar din webbplats från servern, utan från cachen. Därför behöver du.
Och om du har ett caching-plugin på din webbplats, till exempel Super Cache, ta bort cachen där också.
Uppdatera sedan sidan igen och leta efter favoritikoner. Nu ska det definitivt dyka upp om du har angett rätt sökväg till den på hostingen.
Ja, och en sak till. Yandex kommer inte att visa ikonen i sökresultaten omedelbart. Du måste vänta lite på att roboten ska återindexera din webbplats.
Tja, nu är allt relaterat till frågan om hur man gör en favicon-ikon för webbplatsen. Allt för nu.
Onlineikonredigerare tas inte på allvar av många, men i själva verket underlättar sådana verktyg arbetsflödet avsevärt. Bara ett par klick kan spara timmar av sökning, surfning eller självutveckling. Dessutom är det ingen mening att använda fullfjädrade när det finns specialtjänster med skärpta funktioner för dessa specifika uppgifter.
Ikonredigeringswebbplatser som denna är mycket effektiva. De låter dig:
- enkelt och snabbt skapa nya material;
- ge befintliga utvecklingar ett komplett utseende;
- spara resultatet i olika format (SVG, ICO & PNG);
- skapa ikoner för .
I den här artikeln har vi valt ut fem av de bästa gratis ikonredigerarna online och försökt skapa en uppsättning i var och en av dem för jämförelse.
Ikoner Flow
IconsFlow.com - vektorikoner + editor som låter dig skapa personliga uppsättningar och exportera dem i bra kvalitet (SVG, ICO & PNG). Den största fördelen med tjänsten är närvaron av två redaktörer:
- den huvudsakliga, där paletten, stilen, effekterna är valda;
- formulärredigerare, där du kan ändra det nuvarande formuläret eller rita ett nytt.
Om du redan har skapat ikoner i Illustrator, ladda bara upp SVG-filerna och experimentera med olika bakgrunder. IconsFlow har vissa begränsningar när du använder det gratis, så se till att du läser dem innan du börjar. För nybörjare finns det lektioner och en hjälpsektion, dessutom är det möjligt att arbeta i ikonredigeraren på ryska.
Vy över IconsFlow vektorredigerare:
Arbetsexempel:
platta ikoner
Med FlatIcons.net kan du skapa din egen platt stilikon baserat på färdiga mallar. Ställ in måtten, välj en bild och huvudbakgrunden (cirklar, ringar, rektanglar), ändra färgen. Denna ikonredigerare är gratis, men den har två nackdelar:
- För det första kan du bara ladda ner filer i PNG-format.
- För det andra måste du skapa varje objekt separat, eftersom det är omöjligt att utveckla hela uppsättningen på en gång.
Trots det faktum att toppen av popularitet redan har passerat, använder många människor dem i sina mönster. Som ett exempel låter utvecklare dig ladda ner en gratis uppsättning sociala platta ikoner. Resultatet av att arbeta i FlatIcons-redigeraren:
Launcher Icon Generator
Launcher Icon Generator-projektet är gratis och vi tror att det är mer lämpligt för avancerade användare. Denna onlineikonredigerare låter dig ladda upp bilder / clipart och lägga till text. Du kan ladda ner en ikon åt gången i 5 storlekar (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
Som en bas clipart används en uppsättning grafik i stil med Material Design från GitHub. Tjänsten innehåller sådana inställningar som: stoppning, form, bakgrundsfärg eller transparens, skalning + ytterligare effekter. Resultat:
Android Material Icon Generator är ett annat verktyg för att skapa platta ikoner. Funktionen hos tjänsten är definitivt effekten i form av en lång skugga. Om du behöver sådana lösningar kommer denna ikonredigerare att vara det perfekta alternativet.
Börja med att välja en bild från galleriet, definiera sedan en färg, bakgrundsform (cirkel eller fyrkant), skugglängd, mättnad, blekning och din ikon är klar. Allt är extremt enkelt. Webbplatsen är helt gratis för personligt bruk.
Efter nedladdning i arkivfilen hittar du 6 PNG:er i olika storlekar och en vektor SVG-fil. I Illustrator blir SVG-ikonen suddig, men som tur är ser den bra ut i webbläsaren. Resultatet är något i stil med:
Simunity-webbplatsen är en HTML5-baserad generator där du kan skapa en ikon och sedan kopiera koden för att visa den i dina webbprojekt. Ikoner från Font Awesome används som källmaterial, för vilka olika parametrar väljs: färg, kant, storlek och skuggstil.
Den här tjänsten är användbar om du snabbt behöver skapa enkla originalikoner för webbplatsen. Resultatet av att använda Simunity:
Total. De onlineikonredigerare som diskuteras ovan är utmärkta verktyg för att optimera designers arbete. Det är ingen mening att ladda ner vissa program när allt kan göras snabbt och enkelt online. Från denna samling kanske IconsFlow kan urskiljas. Den har största möjliga antal funktioner: ikongalleri, SVG-uppladdning, bädda in kod, förhandsgranska, skapa dina egna mallar, PNG, ICO och SVG-export, storleksanpassning, modestilar och en inbyggd vektorredigerare. Dessutom är detta den enda gratis ikonredigeraren på ryska, om detta är viktigt för dig.
Om du känner till andra liknande tjänster, skicka alternativ i kommentarerna.
I den här handledningen kommer du att lära dig hur du skapar en favoritikon, du kommer att lära dig vad den här ikonen är till för, få rekommendationer om hur du kan förbättra dess utseende och attraktionskraft.
Dessutom kommer vi att titta på processen att skapa och lägga till en favoritikon för webbplatsen.
favicon- det här är en liten ikon som du kan se i webbläsarens adressfält och på flikarna på öppna sidor, såväl som när du lägger till en webbplats i webbläsarens bokmärken, läggs den här ikonen också till där.
Dessutom visar Yandex-sökmotorn Favicon-ikonen i sökresultaten bredvid din webbplats. Din uppgift är att få den här ikonen att sticka ut, bli ihågkommen, fånga ögat mot bakgrunden av andra ikoner i sökresultaten och även ha en viss koppling till din webbplats. En vackert utformad och uppseendeväckande Favicon-ikon kan avsevärt öka antalet besök på din webbplats jämfört med de som inte har den eller ser oattraktiva ut.
Här är några riktlinjer att tänka på när du skapar en favoritikon.
#ett. Ikonen ska vara lätt att känna igen och ha associationer till din webbplats eller den nisch din webbplats tillhör. Som en ikon kan du använda en logotyp eller en symbol som är kopplad till din webbplats. Dessutom kan du använda färgschemat som din webbplats eller logotyp skapades i.
#2. Använd inte standardikoner. Många, efter att ha skapat en webbplats på ett visst CMS, lämnar ikonen utan att ändra något. Som ett resultat kan sökmotorresultaten inte innehålla en webbplats med en sådan ikon, utan många. Genom att göra detta kommer du inte att få din webbplats att sticka ut, så använd endast unika Favicon-ikoner som skapats specifikt för din webbplats. Detta inkluderar även situationen när ikoner från olika samlingar eller gränssnittselement på andra webbplatser används. Kom ihåg att du behöver en unik favicon för att sticka ut.
#3. Försök att använda ljusare och ljusare färger när du skapar en ikon, som regel lockar de mer uppmärksamhet.
#4. Använd inte animerade ikoner. För det första stöds inte animering av alla webbläsare, och för det andra ska besökarens uppmärksamhet fokuseras på innehållet och inte på ikonen.
Låt oss nu titta direkt på processen att skapa en favicon. Det finns många tjänster för detta. Däremot är de mer lämpade för dem som redan har en färdig ikon som de har slitit av någonstans eller tagit från någon samling. Men som jag sa ovan måste ikonen vara unik, så här kommer jag att överväga processen att skapa den med Photoshop, med hjälp av webbplatsen som ett exempel.
Skapa en förinställning för favoritikoner i Photoshop
#ett. Skapa ett nytt Photoshop-dokument 64*64px i storlek genom att gå till Arkiv >> Ny... eller trycka på Ctrl+N. I allmänhet bör själva ikonen vara 16*16px, men det är bättre att först skapa den i samma storlek och sedan minska den till önskad storlek.
#2. I mitt fall har jag ingen logotyp för webbplatsen, så jag bestämde mig för att använda "W"-tecknet som startar webbplatsadressen, och färgerna som råder högst upp på sidan är blå och gula. Så jag satte färgvärdet till #6A91D0 och använde Fill Tool (G) ställde in den blå färgen till det tidigare skapade dokumentet.
#3. Efter det valde jag typverktyget (T), lade till en "W"-symbol och gav den följande färgvärde #FAC31D.
För att symbolen skulle sticka ut mer mot den blå bakgrunden lade jag till ett svart streck och en storlek på 2px. För att göra detta, gå till menyalternativet "Layer" >> "Layer Style" >> "Stroke", välj en färg och storlek för strecket.
Efter det måste du slå samman lagren, för detta måste du gå till menyalternativet "Layer" >> "Slå samman synliga" eller tryck på kortkommandot Skift + Ctrl + E.
För att linjerna skulle bli jämna utan seriffer lade jag till en oskärpa. För att göra detta, gå till menyalternativet "Filter" >> "Oskärpa" >> "Gaussisk oskärpa..." och ställ in radien till 0,3 pixlar.
Placera din symbol eller bild så att den tar upp så mycket plats som möjligt, för om den är liten kommer den inte att märkas med en ikonstorlek på 16 * 16.
#4. Nu måste vi ändra storlek på ikonen. För att göra detta, gå till menyn "Bild" >> "Bildstorlek" och ställ in storleken på 16*16px.
#fem. Det återstår att spara ikonen. Favicon-ikonen måste ha namnet favicon och tillägget .ico. Saken är den att Photoshop som standard inte sparar bilder i .ico-format. Spara den därför i .png-format, för att göra detta, gå till menyalternativet "Arkiv" >> "Spara som ..." och välj PNG från rullgardinsmenyn.
Konvertera en bild till .ICO-format
Efter det konverterar vi det till .ico-format med hjälp av tjänsten. Gå till den här tjänsten och använd knappen "Bläddra" för att välja en tidigare sparad fil i PNG-format, klicka sedan på knappen "Skapa favicon.ico".
Efter det kommer länken "Ladda ner favicon.ico!" upp på den laddade sidan. genom att klicka på vilken du kan spara den färdiga Favicon-ikonen på din dator.
Nu är det dags att lägga till en favoritikon på din webbplats så att den visas på alla dess sidor. För att göra detta, placera ikonen i rotmappen på din webbplats. Om din webbplats redan är värd kallas denna mapp vanligtvis "public_html". Sedan, på varje sida på din webbplats, före den avslutande taggen lägg till följande rader:
Men dessa rader måste läggas till på varje sida om du har en HTML-sida. Men eftersom din webbplats troligen skapades på grundval av någon form av CMS, kommer det att räcka för dig att lägga till dessa rader i huvudfilen för ditt tema som du använder för webbplatsen.
Om du använder WordPress, gå till wp-content/themes/your-theme-folder/ hitta den och öppna header.php-filen, klistra in de nödvändiga raderna och spara filen.
Om du använder Joomla, gå sedan till mallarna/ditt-tema-mappen/ och öppna filen index.php, infoga de nödvändiga raderna och spara.
Vissa teman i WordPress och Joomla kan redan ha sina egna sökvägar till filen favicon.ico, i det här fallet, ta bort dem och ersätt dem med dina egna.
Om du använder något annat CMS, gör sedan allt analogt.
På sidflikarna och i webbläsarens adressfält kommer din ikon att visas omedelbart, som för Yandex sökresultat, det tar tid för en speciell Yandex sökrobot att hitta din ikon, varefter den kommer att visas i sökningen resultat.
Materialet utarbetades av projektet:
En integrerad del av moderna webbplatser är Favicon-ikonen, som gör att du snabbt kan identifiera en viss resurs i listan över webbläsarflikar. Det är också svårt att föreställa sig ett datorprogram utan sin egen unika etikett. Samtidigt förenas sajter och mjukvara i det här fallet av en inte helt självklar detalj – båda använder ikoner i ICO-format.
Dessa små bilder kan skapas både tack vare speciella program och med hjälp av onlinetjänster. Förresten, det är det senare för sådana ändamål som är mycket mer populära, och vi kommer att överväga ett antal sådana resurser med dig i den här artikeln.
Grafik är inte den populäraste kategorin av webbtjänster, men när det kommer till att generera ikoner finns det definitivt massor att välja mellan. Enligt operationsprincipen kan sådana resurser delas in i de där du själv ritar en bild och webbplatser som låter dig konvertera en redan färdig bild till en ICO. Men i princip alla ikongeneratorer erbjuder båda.
Metod 1: X Icon Editor
Denna tjänst är den mest funktionella lösningen för att skapa ICO-bilder. Webbapplikationen låter dig rita ikonen i detalj manuellt eller använda en färdig bild. Den största fördelen med verktyget är möjligheten att exportera bilder med upplösning upp till 64×64.
Så om du behöver skapa en hel uppsättning av samma typ av ikoner i olika storlekar, hittar du inget bättre än X-Icon Editor för dessa ändamål.
Metod 2: Favicon.ru
Om du behöver generera en favicon-ikon med en upplösning på 16x16 för en webbplats, kan den ryskspråkiga onlinetjänsten Favicon.ru också fungera som ett utmärkt verktyg. Som i fallet med den tidigare lösningen, här kan du antingen rita en ikon själv, färglägga varje pixel separat, eller skapa en favicon från den färdiga bilden.
Som ett resultat sparas en ICO-fil på din PC, vilket är en bild på 16x16 pixlar. Tjänsten är perfekt för dig som bara behöver konvertera en bild till en liten ikon. Det är dock inte förbjudet att visa fantasi i Favicon.ru.
Metod 3: Favicon.cc
Liknar den föregående både i namn och funktionsprincip, men ännu mer avancerad ikongenerator. Förutom att skapa vanliga 16×16 bilder, gör tjänsten det enkelt att rita en animerad favicon.ico för din webbplats. Dessutom innehåller resursen tusentals anpassade ikoner tillgängliga för gratis nedladdning.
Om det engelskspråkiga gränssnittet inte stör dig, finns det absolut inga argument för att arbeta med den tidigare tjänsten. Förutom det faktum att Favicon.cc kan generera animerade ikoner, känner resursen också korrekt igen transparens på importerade bilder, som tyvärr den ryskspråkiga motsvarigheten är berövad.
Metod 4: Favicon.by
Ett annat alternativ för favicon-ikongenerator för webbplatser. Det är möjligt att skapa en ikon från början eller baserat på en specifik bild. Bland skillnaderna kan man peka ut funktionen att importera bilder från tredje parts webbresurser och ett ganska stilrent, kortfattat gränssnitt.
I allmänhet finns det inga skillnader i att arbeta med de tjänster som redan diskuterats i den här artikeln, men Favicon.by-resursen klarar sig mycket bättre med att konvertera bilder till ICO, och detta är ganska lätt att märka.
Metod 5: Online-konvertera
Det är troligt att du redan känner till den här sidan som en nästan allätande filkonverterare online. Men inte alla vet att detta är ett av de bästa verktygen för att konvertera bilder till ICO. Vid utgången kan du få ikoner med en upplösning på upp till 256×256 pixlar.
Som du kan se är det inte alls svårt att skapa en ICO-ikon med hjälp av webbplatsen Online-Convert, och det görs med bara ett par musklick.
