Gillade du den här guiden?
Om du tycker guiden var kass så skriv det i kommentarsfältet! :)
Video transcript
Hej och välkomna till Bloggdesignskolan.se.
I den här guiden ska jag visa er hur man byter favicon. Ni ser den här fyrkanten här. Om man går på Bloggdesignskolan så ser ni att den är rund. Alla stora sajter har en egen ikon här och det är ju lite coolt om man kan ha sin egen ikon på sin blogg. Så jag tänkte jag skulle visa er hur man gör det.
Det vi först behöver göra är att fixa den här bilden. Som ni ser är jag inne i Photoshop här. Det här är inga svåra grejer.
Jag slänger in min bild här som jag vill ha som favicon. Det är en fyrkant bild och storleken på den här bilden är 180 x 180 px men det skulle lika gärna kunna vara mer eller mindre. Det viktiga är att det är en fyrkant.
Det bästa vore om det var så lite utrymme som möjligt på sidorna eftersom det är en så liten bild ikonen, så vill man inte slösa på en massa utrymma.
Jag sparar den såhär. O så sparar jag den som en PNG för att jag vill att den ska vara genomskinlig på sidan. Det blir coolare än om det är vit på sidan. Som ni ser så är min rund så om det hade varit en vit kant så hade det inte blivit lika snyggt.
Sådär, nu har jag den här bilden sparad på datorn. Då ska jag gå till Google.se då det är ett verktyg som jag vill hitta. Favicon generator.
Den här sajten fungerar säkert också men jag har alltid använt mig av den här tjänsten.
Så väljer jag vilken fil som jag vill hämta. Logo_small2 hette den va, logo_larger2 var det.
Och sen så skapar jag den. och då ser ni att bilden här och så kan man ladda ner den här ikonen. Så har den laddats ner.
Det jag ska göra nu vilket är lite meckigare är att få upp bilden på internet. Eftersom Blogg.se inte tillåter att man laddar upp .ico som det här filnamnet avslutas med så är det inte så enkelt att få upp den på nätet om man inte har en egen FTP-server eller liknande. Men det finns faktiskt en tjänst jag hittade där man kan ladda upp .ico.
Jag går den här vägen som jag tidigare hittade den här tjänsten.
Den hette Picture Stack, som jag tycker verkar sjysstast. Den var enkel och simple.
Browse, och så ska jag hitta den här filen. Upload!
Och så ser ni att ni får en massa olika länkar. Ta den här första för det är adressen till den här ikonen. Ni kan ta och kopiera den här adressen, öppna en ny flik och klistra in så ser ni om det kommit fram. Jepp, nu ligger den här. Då har vi skapat faviconen och fått upp den på nätet, nu ska vi bara länka den här ikonen från er blogg.
Då går jag till Design --> Redigera kodmallar.
Och sen är det en kodsnutt som jag har här vi sidan av. Jag skriver ner den här:
<link rel="shortcut icon" type="image/x-icon" href="" />
Det här är alltså ursprungslänken till er favicon. Har jag missat..nej det ska vara rätt. Då tar jag den här länken och kopierar och slänger in den här.
Så kopierar jag hela strängen och publicerar. Det viktiga är att hela raden finns mellan <head> och avslutnings </head> men annars spelar det ingen roll.
Så publicerar jag den på alla sidor.
okey, då går jag till min blogg och klickar på uppdaterar. Så ser ni att det spinner här. WOW! snyggt! Det fungerar!
Det är så det fungerar med favicon. Jag har inte testat PictureStack innan men förhoppningsvis så är det ingen tjänst som raderar bilderna efter en vecka eller två. Men det jag läst om det så ska det vara väldigt bra.
Jag hoppas den här guiden har kommit till er glädje.
Ha det bra
