Hur man skapar en Favicon för din blogg

har din blogg En anpassad favicon? Om inte, borde det verkligen. Idag lär vi oss vad en favicon är, varför du behöver en, och slutligen hur man skapar en favicon för din blogg eller webbplats.

jag ser fortfarande massor av bloggar utan en, så om din blogg är en av dem, gör dig själv en tjänst och skapa en nu med hjälp av handledningen nedan. Jag lovar att det inte tar lång tid och det är också roligt!

uppdaterad: 11/4/2020

Disclosure: detta inlägg kan innehålla affiliate länkar (betecknas med en *) vilket innebär att jag kan få en liten provision om du väljer att göra ett köp med min länk. Jag uppskattar ditt stöd och kommer aldrig att rekommendera produkter jag inte står själv.

först av allt, vad är en Favicon?

en Favicon, uttalas fave-ikon, är en förkortning för Favoriter ikon som namngavs eftersom de dyker upp i din lista över webbplats bokmärken, med andra ord, dina favoritwebbplatser. Favicons är en liten version av din logomark som visas som en webbläsarflikikon, en bokmärkesikon eller en genvägsikon.

Favicons är ett snabbt sätt för användare att känna igen din webbplats vid första anblicken. Ta en titt på mina webbläsarflikar nedan. Känner du igen de flesta webbplatser Jag har öppnat här?

Varför behöver du skapa ett Favicon?

när du inte tilldelar en anpassad favicon till din blogg eller webbplats, tilldelas antingen en generisk ikon eller ingen ikon alls. I värsta fall använder din blogg ditt webbhotell favicon. I bästa fall tilldelar varje webbläsare sin egen sak åt dig: Chrome lägger till en liten jordglob (se bilden ovan), Safari lägger till den första initialen på din webbplats URL i en grå ruta (se bilden nedan), och Firefox lägger till ingenting alls. Hur som helst, prata om tråkigt!

titta igen på webbläsarflikarna ovan. Att ha igenkännliga ikoner gör det enkelt att klicka fram och tillbaka snabbt mellan webbplatser eller hur? Om du sparar en webbplats i dina bokmärken ser du också favicon i din bokmärkeslista. Detta gör det enkelt att snabbt hitta det du letar efter. Hjälp dina läsare att snabbt hitta din blogg i sina flikar eller bokmärken genom att integrera ett favicon.

det finns en annan plats jag slår vad om att du inte tänkte på var favicons visas: om du har webbplatser du besöker ofta på din telefon kan du alltid lägga till dem på telefonens startskärm som en genväg. Om dina läsare älskar att besöka din webbplats ofta kanske de vill lägga till en genväg till den från startskärmen så att du definitivt vill att de ska ha en snygg ikon för att sticka ut från de andra appikonerna som de redan har lagt till.

och här är en ny fliksida från Safari. Bild din webbplats genväg här. Du vill inte att din blogg representeras av en tråkig grå ikon som ”C” – ikonen nedan gör du?

hur man utformar en Favicon för din blogg

några designregler för att skapa en Favicon

Låt oss först prata om några bästa metoder för att designa din favicon.

1. din favicon ska vara märkbar och omedelbart igenkännbar
   det bästa sättet att göra din favicon igenkännlig är att använda din logotyp som utgångspunkt. Även om din blogg inte är superberömd än, är det ok. Att använda konsekventa designelement och teman i hela ditt varumärke hjälper det att sticka ut från resten och hjälpa människor att så småningom känna igen ditt varumärke.Här är ett par alternativ för dig att överväga när du designar din favicon:
   • din logotyp eller logomark
   • enklare variant av din logotyp
   • en symbol eller ikon som representerar ditt varumärke
   • initialerna (eller bara den första initialen) av ditt varumärke – se till att stilen på initialerna matchar din ursprungliga logos design och stil
   • ett enkelt foto – nyligen har jag sett bloggare som använder sina profilbilder för att skapa en favicon
2. din favicon bör använda en mycket enkel design
   ta en ordentlig titt på favicons din webbläsare flikar just nu. Vad märker du? De är små! Den typiska favicon visas med 16 x 16 pixlar. Av denna anledning är det viktigt att se till att du använder en mycket förenklad version av din logotyp eller varumärkeselement. Detaljerad och detaljerad grafik kommer inte att skala bra i en så liten storlek. De kommer sannolikt att se ut som en suddig röra.
3. se till att din favicon kontrasterar bra med ljusa och mörka bakgrunder
   beroende på dina läsares preferenser kan deras webbläsarflikar vara vita, svarta, ljusa eller mörkgrå. Av denna anledning vill du se till att skapa en favicon med färger som kontrasterar bra på både ljusa och mörka bakgrunder.Vissa favicons har transparenta bakgrunder och de fungerar eftersom deras färger kontrasterar bra på vilken bakgrund som helst. Om din grafik är för ljus eller för mörk kan det hjälpa till att lägga till en solid färgad cirkel eller fyrkant bakom grafiken eller logotypen för att hjälpa den att sticka ut och vara läsbar på vilken färgad flik som helst.
4. titta på dina webbläsarflikar för inspiration
   klicka runt på webben och titta på favicons som används på dina favoritwebbplatser. Lägg märke till om de kommer att arbeta på ljusa eller mörka bakgrunder. Har grafiken en transparent bakgrund eller är den på en färgad fyrkant eller cirkel?

Favicon Inspiration

Favicons using transparency

Lägg märke till hur dessa ikoner kan sticka ut på antingen en mörk eller ljus bakgrund, förutom den sista, ’Säg ja. Den borde antagligen ha placerats på en vit fyrkant. Och det är lite svårt att säga, men den fjärde ikonen, lotusblomman har faktiskt en mycket fin svart kontur. På så sätt kan du se det enkelt även om det visas på ljusa flikar.

Favicons med en färgad bakgrund

dessa favicons designades med en fyrkantig eller rundad fyrkantig bakgrund för att säkerställa att de är tydligt synliga på både mörka och ljusa flikar.

Favicons använder initialer

några av dessa initialer ikoner använder en färgad backround, vissa använder en transparent en. Hur som helst, se till att det är läsbart.

Favicons använder ett profilfoto

att använda ett profilfoto verkar vara en ny trend som fångar på. Om du går denna väg, se till att använda samma profilbild i alla dina online-profiler så att det är omedelbart igenkännbar.

så här skapar du en Favicon för din blogg

skapa en Favicon-fil steg för steg

1. skapa grafiken i en bildredigerare
   med en bildredigerare som Photoshop (registrera dig för GRATIS Provperiod)*, Pixlr, BeFunky eller Canva,* skapa din favicon-fil med 512 x 512 pixlar. Även om det bara visas 16 16 i webbläsarflikar, kommer det också att visas i större storlekar i några av de andra applikationerna som jag nämnde ovan.
2. förhandsgranska din Favicon i liten storlek
   om du är klar med att skapa en grafisk favicon, zooma ut ur bilden tills din grafik blir liten, ungefär storleken på de favicons du ser i din webbläsare. Är det fortfarande läsbart? Är det vettigt? Om det gör det, bra, gå vidare till nästa steg.
3. spara filen
   spara först din grafik som en redigerbar fil i ditt program så att du kan gå tillbaka och finjustera den om du behöver.Spara sedan den som en PNG-fil.
4. generera en Favicon.ico-fil
   använd en favicon-generator för att konvertera din PNG-fil till en ICO-fil. Detta steg är nödvändigt eftersom vissa webbläsare bara läser ICO-filer.

alternativ till att designa din egen från början

om du vill ha ett snabbt och enkelt sätt att skapa en text eller initialer favicon, använd texten > ICO favicon generator. Jag skapade snabbt den här för DYOB:

du kan också använda Emoji > ICO favicon generator om du verkligen vill göra det enkelt för dig själv.

slutligen, lägg till din nya Favicon till din blogg eller hemsida

WordPress

det enklaste sättet att lägga till en favicon i en egen värd WordPress blogg är att logga in på din instrumentpanel. Gå sedan till utseende > Anpassa och klicka sedan på fliken Webbplatsidentitet. Under avsnittet webbplatsikon väljer du ditt nya favicon.ico-fil att ladda upp.

och boom, du är klar, kolla in det i din webbläsare! Observera att du kan behöva uppdatera några gånger och/eller rensa cachen i din webbläsare innan den visas.

hur man lägger till en favicon till en WordPress.com blogg.

Squarespace

det är väldigt enkelt att lägga till ett favicon i Squarespace också.

Blogger

logga in på din blogg och klicka på Inställningar i den vänstra kolumnen. Klicka sedan på Favicon under avsnittet Grundläggande. Ladda sedan upp din favicon.ico-fil, Spara och boom!

testa din nya Favicon

om du vill testa hur din favicon ser ut i olika plattformar och inställningar, Använd denna Favicon Checker. Om du vill redigera hur dina ikoner ser ut på någon av plattformarna, säg iOS (iPhones), kan du använda generatorn för att optimera dem för varje inställning. Följ sedan bara instruktionerna för att lägga till dem alla i din blogg.

du har just lärt dig hur du skapar en Favicon

Grattis! När du utformar din egen blogg vill du se till att du inte lämnar några detaljer, även de minsta. Att lägga till ett anpassat favicon till det hjälper inte bara dina läsare att snabbt hitta din blogg i sina flikar eller bokmärken, det visar att du bryr dig om att hålla ditt varumärke konsekvent.

nu är det din tur

Låt mig veta i kommentarerna om du har några frågor om hur du skapar en favicon eller om du behöver hjälp med att identifiera en typ av favicon att skapa för ditt varumärke. Annars kan du dela din favicon med oss i kommentarerna!
och om du har haft denna handledning, Vänligen dela den genom att klicka på en av ikonerna under min signatur!
detta inlägg publicerades ursprungligen den 8/14/2013 och uppdaterades den 2/11/2015, sedan igen den 11/4/2020.