Ett favikon är den coola lilla bilden bredvid ditt adressfält i din webbläsare. Det är det som skiljer din webbplats från fliken bokmärken och kan användas för att öka varumärkesmedvetenheten. Om du har en webbplats men aldrig har övervägt att skapa ett favikon bör du ompröva ditt beslut. I allt större utsträckning använder mjukvaruutvecklare favicons för olika aspekter av sina applikationer, till exempel ikoner på startskärmen på surfplattor. Lyckligtvis är att designa, skapa och implementera ett favicon något nästan alla kan göra om de följer rätt steg.
Steg
Metod 1 av 3: Designa ditt Favicon
Steg 1. Skapa ett favikon som representerar din webbplats
Den typ av webbplats du har bör avgöra utseendet på ditt favikon. Försök att designa något som kommer att hålla fast vid din varumärkesimage och som kommer att vara igenkännligt och minnesvärt för människor. Ditt favikon kommer att vara det första som människor ser när de tittar på flikarna i webbläsaren och kommer också att visas i människors bokmärken.
- Om du till exempel har en livsmedelswebbplats kan det vara mer minnesvärt att välja ett favikon som har en frukt eller grönsak som design.
- Om din webbplats är för en advokatbyrå eller ett investeringsföretag är en traditionell och snygg favikon bäst.
- Om din webbplats riktar sig till yngre människor, försök skapa en lekfull och färgstark favikon.
Steg 2. Bestäm om du vill ha en transparent bakgrund
Om du inte anger en bakgrund fylls den i vitt, vilket kanske inte följer ditt varumärke. En transparent bakgrund får färgen på personens webbläsare och ser mer strömlinjeformad ut i vissa fall. I andra fall får förfärgade bokstäver eller grafik att dyka upp med en färg för bakgrunden. Bestäm vad som skulle vara bäst för din design och ha det i åtanke när du gör det.
Den mest grundläggande favicon är en 16x16 kvadrat och har en bakgrundsfärg
Steg 3. Skapa ett favikon som är lätt att läsa
Eftersom favikonbilden du använder är liten är det viktigt att du kan få fram ditt varumärke utan att förvirra dina besökare. Ett favikon som är svårt att läsa lämnar ett negativt intryck och kan skapa frågor hos besökaren om kvaliteten på arbetet du kan tillhandahålla. Alltför komplexa bilder och logotyper ser inte bra ut när de krymper till 16x16 eller 32x32 pixlar.
- Om din befintliga logotyp är för komplicerad kan du använda taktik för att förenkla den, så att den kan kännas igen med favikonstorlek. Använd initialer istället för att visa hela företagsnamnet, eller designa en enkel ikon istället för att använda en bild.
- Om du redan har en enkel logotyp kan du krympa ner bilden och ställa in den som ditt favoritikon. Du kan behöva ändra den innan du konverterar den till en ikonfil.
- Du kan också använda en bild av ett objekt som beskriver webbplatsens övergripande tema.
Steg 4. Skapa ett estetiskt tilltalande favikon
Strukturen på ditt favikon kallas dess form. Favikoner tar vanligtvis former, som en cirkel eller en kvadrat. När du utformar ditt favikon är det i allmänhet bättre om det kan passa in i en av dessa grundläggande former eftersom former i fri form ofta kan bli förvirrade eller förvirrade med 16x16 pixlar. En annan viktig aspekt av din design kallas estetisk enhet. Estetisk enhet innehåller detaljer och storlekar på olika komponenter i ditt favikon och hur ditt favikon är balanserat. Ju mer enhetliga detaljerna, desto mer sammanhängande kommer ditt favikon att se ut. Till exempel är det inte tilltalande för dig att använda olika typsnitt eller storlekar i ditt favikon och kan få ditt favikon att se förvirrat eller stökigt ut.
- Ett annat exempel på estetisk enhet är att behålla rundade hörn genom formerna i ditt favikon.
- Ett bra exempel på en ikon som har ändrat form är Googles favikon. Den har ändrats från en kvadrat till en cirkel.
Steg 5. Använd färger som är sammanhängande med ditt varumärke
När du skapar ditt favikon bör du skapa det i 8 bitars (256 färger) eller 24 bitar (16,7 miljoner färger) färgdjup, eftersom det fungerar på moderna webbläsare. Se till att de färger du väljer kan hittas någon annanstans på din webbplats eller på något sätt är associerade med ditt varumärke. Ett favoritikon med färger som inte finns på din webbplats, logotyp eller applikationer kommer inte att minnas, och människor kommer inte att kunna associera ikonen med ditt varumärke.
- Vissa kreativa användningsområden för favikonfärg inkluderar GitHub som ändrar färger beroende på din systemstatus och Trello, som ändras beroende på din bakgrundsfärg.
- De vanligaste färgerna som används i favicons är rött och blått.
Steg 6. Tänk på din publik när du utformar ett favikon
Förutom att identifiera ditt varumärke måste ditt favikon se tilltalande ut för dina besökare. Människor med olika smaker, intressen och samhällsnormer kommer att titta på olika ikonologier ur olika perspektiv. Kulturella skillnader finns i vårt samhälle och kan förvirra eller avvärja den publik du försöker locka till dig.
Till exempel använder Mac Os X en stämpel som är en universell symbol för post. Att använda en brevlåda skulle inte vara lika effektivt eftersom postlådor varierar i olika delar av världen
Steg 7. Få synpunkter från vänner och kollegor
Även om det inte är otroligt grafiskt intensivt, är ett favikon en viktig del av ditt varumärke. Tänk till exempel på dina favoritwebbplatser som Twitter, Gmail, Facebook eller wikiHow, och hur mycket du förknippar favicon med varumärket. Om du inte har ett bra öga för design, eller om du funderar över vilken typ av design du ska ha för din webbplats, kontakta vänner som har ett öga för design eller som arbetar med grafisk design.
- Fråga runt i ditt nätverk av vänner för att se om någon kan ge designråd gratis.
- Större företag har interna grafiska formgivare som kan skapa favicon-bilden.
Metod 2 av 3: Skapa ditt Favicon
Steg 1. Använd fotoredigeringsprogram för att skapa ditt favoritikon
Du kan använda fotoredigeringsprogram som Adobe Photoshop eller Illustrator för att skapa bilden för ditt favikon. Med dessa program kan du också ändra storlek och exportera bilden i rätt format. Viss programvara låter dig skapa din favicon för hand.
- Det finns också favicon -specifika redigeringsprogram som du kan hitta online.
- Använd en sökmotor och skriv in "favicon -redaktörer".
- Gör din dukstorlek 512x512 pixlar eftersom det här numret bryts ner till de mest tillämpliga favikonstorlekarna och fortfarande är tillräckligt stort för att du ska kunna redigera effektivt.
- Andra populära fotoredigeringsprogram inkluderar GIMP, PhotoScape och Paint. NET.
- När du använder den här programvaran kan du inte redigera.ico -filerna direkt, men du kan använda.png-,.jpg- eller-g.webp" />
Steg 2. Ändra storlek och spara din favicon
32x32 px är storleken på Windows -skrivbordsobjekt medan 16x16 px är storleken på favicons i webbläsarens flik. När du har skapat ditt favikon i ett större format är det viktigt att minska dess storlek så att du kan se hur det kommer att se ut i människors webbläsare. Om det är oläsligt eller inte estetiskt tilltalande, börja om på din ursprungliga design. Tänk på de plattformar som din webbplats eller applikation sannolikt kommer att användas på och skapa sedan ett favikon för att täcka alla dina baser.
- Det är viktigt att notera att olika hårdvaror och programvaror använder olika favikonstorlekar.
- Några andra favikonstorlekar inkluderar 57x57px för standard iOS -startskärm, 72x72px för iPad, 96x96px för Google TV, 128x128px för Chrome Web Store och 195x195px för Opera Snabbval.
- Om du vill täcka alla dina baser kan du skapa versioner av ditt favikon i var och en av dessa storlekar.
- Spara separata versioner av din favicon, så att du inte förlorar det arbete du har gjort.
Steg 3. Kombinera dina filer med en omvandlare
Det fina med.ico -filer är att du kan kombinera mer än en fil för att skapa den. Detta är användbart eftersom olika webbläsare och programvara kommer att vilja ha en annan stor favikon. För att se till att ditt favikon ser bra ut på alla olika plattformar, konvertera dina filer med en online -omvandlare. Skriv "ikonomvandlare" i din favorit sökmotor för att hitta gratis onlineapplikationer för att göra detta. Spara den sammanslagna filen som "favicon.ico."
- Du kan också använda ett program som GIMP som har en inbyggd funktion eller ladda ner ett plugin som heter ICO FORMAT till Adobe Photoshop.
- Skapa en ny mapp så att du kan lagra nya favoriter eller pågående arbeten.
- Skriv ".ico converter" eller "favicon generator" i en sökmotor för att hitta olika verktyg du kan använda.
Metod 3 av 3: Implementera ditt Favicon
Steg 1. Ladda upp ditt favikon om du använder en webbplatsredigerare
Många webbplatsredaktörer har ett inbyggt formulär som låter dig ladda upp ditt favikon automatiskt till din webbplats. Om du använder en webbplatsredigerare som har detta inbyggt, leta efter alternativ som säger "Ladda upp Favicon" eller "Lägg till Favicon" i din webbplats inställningsmeny. Välj din favicon.ico -fil och ladda upp den till din webbplats.
Om du inte hittar en plats för att ladda upp ditt favikon på din webbplatsredigerare måste du göra det manuellt
Steg 2. Ladda upp filen till din webbplats rotkatalog
Om din webbplats stöder filöverföringsprotokoll eller FTP kan du använda din FTP -klient för att ladda upp din nya favicon.icon -fil till din rotkatalog (index). Om inte, måste du gå till din webbhotellssida och ladda upp bilden manuellt. Kom ihåg att ersätta den befintliga favicon.ico -filen med din nya fil.
Steg 3. Lägg till filen i din rubrik
Hitta platsen där du kan komma åt PHP- och CSS -filerna för din webbplats. Gå till din webbplats header.php -fil och redigera den. Under taggtypen"
-
. Detta bör ansluta din webbplats till ditt favoritikon.
Eftersom du använder PHP betyder det att alla webbplatser som använder din rubrikfil nu kommer att ha samma favicon
Skapa din egen Favicon -ikon Steg 14 Steg 4. Uppdatera din webbläsare
När du har laddat upp favicon kan du uppdatera din webbläsare för att se din nya bild bredvid adressfältet. För att gå direkt till en bild av ditt uppdaterade favikon skriver du "https://www.yourdomain.com/favicon.ico."
- Om ditt favikon inte visas först kan du behöva återställa webbläsarens cache.
- För att rensa cacheminnet, gå till webbläsarens inställningar och ta bort dina tillfälliga internetfiler, cookies och historik.
