Vad är meningen med favicons?

När jag börjar berätta för folk om vikten av ett favicon till deras övergripande strategi för online branding, säger de vanligtvis samma sak: "Tar du inte den här märkesvaran lite för långt?"

Mitt svar går vanligtvis: "Inte om du är seriös om din egen branding-insats!"

Det är sant, favicons är mycket små saker, förmodligen den minst viktiga delen av en webbplats, men det är uppmärksamhet på detaljer som gör att en webbplats sticker ut; och även om det låter galet är favicons mycket viktiga från en branding point-of-view.

Med tanke på WDD är en webbplats riktad mot en designers publik, är min gissning att många av er redan vet vad favicons är och hur man skapar dem. men den här artikeln kan fortfarande hjälpa dig att förstå varför du borde göra dem och också fungera som en bra resurssida.

Jag delar en stor lista med favicon-relaterade resurser nedan, så överväga att bokmärke denna sida för framtida referens. Åh, och om du gör så märker du WDD-favicon direkt i din bokmärkeslista;)

Bara om du inte är en formgivare eller något slags svartband i favicon-arts, täcker den här artikeln noga allt du någonsin behöver veta om dessa smärtsamma lilla 16 × 16 pixlar, och även några intressanta favicuriosities . Så njut!

Vad är en favicon?

Favicons är små kvadratiska bilder vanligen 16 × 16 pixlar som används av webbläsare för att visa en grafisk representation av webbplatsen som besöks på vänster sida av webbläsarens adressfält. Du har nog sett många favicons innan, även om du inte vet vad de är. Om det är osäkert, kommer bilden nedan att hjälpa till.

Två exempel på favikoner i en webbläsare med Google Chrome.

Om du är intresserad av att förstå en del internethistoria är här ett intressant faktum:

Ordet favicon är en portamentau gjord av orden "favorit" och "ikon", och den namngavs som sådan eftersom den först stöddes av Microsofts Internet Explorer 5 och bara om du inte använder IE, kan den här bokmärkesfunktionen för webbläsare kallas favoriter.

Vad är syftet med ett favicon?

Tillbaka i de tidiga dagarna på internet var verktyg som Google Analytics bara drömmar i några näkter, så konstigt som det här låter, då användes favikoner som ett sätt att uppskatta webbplatsens trafik genom att räkna antalet besökare som bokmärkt sidan. (Det är ett annat intressant utdrag i internetets historia!)

Men intressanta fakta åt sidan, den främsta orsaken till att ha favicons nuförtiden är att förbättra användarupplevelse. Favicons används i alla moderna webbläsare i adressfältet, i länkarfältet, i bokmärkesområdet och i dess flikar. Dessutom visar några webbläsare också favicons när du skapar en genvägslänk för motsvarande webbplats på skrivbordet och din mobila enhet.

Visst är den främsta anledningen att ha en favicon den uppenbara förbättringen av användarupplevelsen. En webbplats utan en kommer att visa en generisk webbläsarsymbol på alla de punkter av samspel som jag nämnde ovan, och om du bryr dig om din användarupplevelse, måste du bryr dig om favicons.

Men jag kan inte undvika att se saker genom varumärkesbranschen, mitt kompetensområde, så jag tror att favicons är ännu mer relevanta från en branding-point-of-view. Återigen, med så många interaktionspunkter, att inte använda dem för att öka varumärkeskännedom är ett brott. Sanningen är att hitta kreativa sätt att förbättra din online branding är alltid en utmanande uppgift, och att ha en favicon är ett enkelt och enkelt sätt att uppnå det. Så få dig en min vän!

Hur skapar man en favicon?

Skapa en webbplats favicon är lätt som paj. Faktum är att du inte ens behöver vara en formgivare för att göra det. Det hjälper säkert om du är, eftersom du kan sätta dina färdigheter på jobbet och skapa något som verkligen står ut, men även de mindre tekniskt kunniga kan vi göra det på cirka 5 minuter eller mindre med hjälp av rätt verktyg.

På webbplatserna i listan nedan kan du skapa ett favicon helt enkelt genom att ladda upp en existerande bild. Så om du vill skapa ett favicon för ditt varumärke är allt du behöver göra för att ladda upp din logotyp till en av följande webbplatser och ladda ner favicon-filen. Lätt som en plätt.

Här är listan Favicon generator du letar efter:

Webbsidorna ovan varierar mycket när det gäller den resulterande filen du får speciellt när det gäller filstorlek och förlängning. Om du vill ha den mest kompatibla filen, rekommenderar jag starkt att du laddar ned en bild med en storlek på 16 × 16 pixlar med "ico" -formatet.

Om du behöver lite inspiration, kolla in favicon gallerierna nedan:

Hur använder du ditt favicon?

När du har fått ditt favicon noggrant utformat, bör installationen på din server inte ta mer än ett par minuter i två enkla steg. För det behöver du tillgång till din webbplatskarta och ett textredigeringsverktyg för att ändra HTML-koden för din webbplats.

Steg 1

Du måste ladda upp filen "favicon.ico" till din server. För att göra det, peka webbläsarens adressfält på din FTP-server; Din webbadress ska likna detta:

ftp://[email protected]

Tryck på enter och webbläsaren kommer att be dig om ett användarnamn och lösenord innan du ger åtkomst till filservern. När du är inne, ladda bara upp filen "favicon.ico" till rotmappen och du är klar.

Steg 2

Nu behöver du redigera din webbplats HTML-sida för att hjälpa webbläsare att hitta din favicon-bild. Håll ditt FTP-fönster öppet, sök och hämta filen "index.html" eller "header.php" från din server och följ stegen nedan enligt filen du får:

Om din webbplats är gjord av vanlig HTML, sätt in koden nedan i huvudområdet för filen "index.html" och glöm inte att ändra "yoursite.com" för din egen webbplatsadress.

Om du använder WordPress, sätt in koden nedan i HEAD-området i din "header.php" -fil.

Med det gjort, ladda upp filen tillbaka till var du fick den från. Du är klar!

Faktum är att de flesta moderna webbläsare är klara nog för att hitta din favikonfil även utan någon kod, men bara så länge som favikonbilden har 16 × 16 pixlar, har den fått namnet "favicon.ico" och är sparas i rotmappen i din hemsidamapp.

Så här skapar du ett favicon i Photoshop

Med så många verktyg som finns tillgängliga för att hjälpa dig skapa ditt favicon, varför vill du ta den hårda vägen och skapa den i Photoshop? Tja, om du är designer och vill få ut det mesta av ditt favicon, så är det verkligen det professionella sättet att göra det. Tricket är att Photoshop inte stödjer "ico" -filer, så du behöver ladda ner det här pluginet från Telegraphics .

Var noga med att installera den innan du följer instruktionen nedan. Photoshop fungerar inte utan det.

Leta efter alternativet "ICO" i rutan "Spara som" i Photoshop för att bekräfta att plugin är installerad.

Skapa ett nytt dokument i Photoshop välj menyalternativet "Arkiv" och följande alternativ "Nytt" och ställ sedan in din duk på 64 × 64 pixlar. Varför? Eftersom den 16 × 16 slutliga favikonstorleken är så liten kan du få din kreativa juice att flyta med en större duk att arbeta med. Sedan klistra in din logotyp i dokumentet och släpp din magiska unicorn-kreativ kraft.

När du är klar, välj bara menyn "Bild" och följande alternativ "Bildstorlek" och minska bilden till 16 × 16 pixlar. Kom ihåg att klicka på "Resample Image" och välj "Bicubic Sharper", för att se till att bilden inte suddas när den ändras. Om du inte gillar det slutliga resultatet, helt enkelt ångra dina senaste ändringar med "AltCtrl / AltCmd + Z" och fortsätt arbeta med designen tills du är nöjd med det.

För att avsluta ditt favicon behöver du bara klicka på menyn "File" och följande alternativ "Spara som", du kommer då ihåg att namnge din fil som "favicon.ico". Än en gång jobbet gjort!

Slutsats

Favicons är en av de små sakerna som vi vanligtvis inte betalar för mycket uppmärksamhet till, men sanningen är så långt ifrån obetydlig, de är en mycket viktig del av webben, både från ett användargränssnitt och en branding point- of-view.

Vissa säger att stora saker kommer i små storlekar, och jag tror att det även gäller favicons, för att någon webbdesigner och / eller varumärkesspecialist som alltid tar sig tid att lägga till en favicon på sina kunders webbplatser, även när kunden inte har någon Idén om vad en favicon är, visar en hel del professionalism och uppmärksamhet på detaljer. vilken typ av kvalitet varje kund uppskattar.

Skapar du favicons för dina kunder? Är de för mycket besvär för för lite belöning? Låt oss veta dina tankar i kommentarerna.

Utvalda bild / miniatyrbild, förvirrad bild via Shutterstock

webbdesign branding hur favicon tips och tricks

Vad är Favicons punkt?