Så här skapar du en favicon för webbplatsen: användbara tips och tjänster

  1. Hur man skapar en favicon
  2. Hur man gör en favicon i Photoshop
  3. Hur man sparar en favicon
  4. Så här lägger du in favicon-webbplatsen
  5. Hur man byter ut favicon
  6. Hur man skapar mer komplexa favicons

Det är svårt att gissa vad en favicon är när du först hör det här ordet. Det här är en miniatyrikon som visas på flikarna i webbläsare, adresslistor och andra områden, beroende på vilket operativsystem du använder och webbläsaren. Det kan säkert kallas ett av de mest komplexa och lustfulla elementen i webbdesign.

Att skapa ett bra favicon är ganska svårt, eftersom ikonen är liten bör den vara tydlig och visa något som är relaterat till din webbplats
Att skapa ett bra favicon är ganska svårt, eftersom ikonen är liten bör den vara tydlig och visa något som är relaterat till din webbplats. Att skapa ett favicon som är kompatibelt med alla populära webbläsare kan också vara en skrämmande uppgift. I den här artikeln kommer vi att hantera alla komplexa aspekter av dess skapande. Om du också behöver en logotyp, så har vi en artikel hur man gör det

Hur man skapar en favicon

Låt oss börja med utformningen av favicon. Bra design, trots kompaktiteten, bör spegla kärnan på din webbplats och vara en organisk del av företagsidentiteten. Ikonen är typiskt ett grafiskt tecken (ikon) för ett företag och inte en hel logotyp (ikon, text och slogan).

Som en favicon använder dessa webbplatser sina ikoner (eller bilder nära dem) Som en favicon använder dessa webbplatser sina ikoner (eller bilder nära dem).

Texten i favicon ska inte användas, eftersom den här texten blir oläslig på grund av den lilla bildstorleken. De enda undantagen från denna regel är världsberömda texttecken som automatiskt kopplas till ett specifikt varumärke. Till exempel lämnade online-resursen Wikipedia på favicon sin bokstav "W" och Facebook - bokstaven "F".

På dessa favicons finns bokstäver som är starkt förknippade med ett visst varumärke
På dessa favicons finns bokstäver som är starkt förknippade med ett visst varumärke. Till exempel använder Facebook sitt grafiska tecken. Observera också att pixlar är synliga på Disney-bilden. Detta beror på att skärmdumpen togs på en näthinneskärm, som är kompatibel med 16 × 16 ikoner, medan webbplatser använder 32 × 32 ikoner.

Eftersom favicons är små bilder spelar varje pixel en viktig roll. Ibland efter att ha minskat logotypen blir enskilda pixlar synliga, varigenom bilden blir "suddig". För att uppnå tydlighet måste du redigera ikonen på pixelnivå.

För att undvika detta måste du ändra storlek på logotypen med hjälp av speciella redaktörer som Photoshop eller GIMP
För att undvika detta måste du ändra storlek på logotypen med hjälp av speciella redaktörer som Photoshop eller GIMP. Först måste du minska bildens storlek till 64x64 pixlar (detta är den största storleken favicon). Då måste du redigera varje pixel med hjälp av penncirkeln tills bilden är klar. Detta är en mödosam process, men resultatet är värt det. När favicon 64x64 är klart måste du göra samma jobb med bilden 16 × 16, 24 × 24 och 32 × 32 pixlar. Så många storlekar behöver du för att bilden ska visas korrekt i alla webbläsare och gadgets:

  • 64x64 - Safari webbläsare bokmärken;
  • 32x32 - högupplösta skärmar (näthinnan);
  • 24x24 - bokmärken Internet Explorer och MicroSoft Edge;
  • 16x16 - Google Chrome och andra webbläsare.

Hur man gör en favicon i Photoshop

Först måste du skapa några canvaser med ovanstående dimensioner.

Då måste du lägga till en ikon, ett brev eller en annan bild till duken
Då måste du lägga till en ikon, ett brev eller en annan bild till duken.

Då måste du lägga till en ikon, ett brev eller en annan bild till duken

Hur man sparar en favicon

Har skapat ikoner av olika storlekar, spara varje som en transparent PNG-fil (24 bitar). I Photoshop kan du använda funktionen Spara för webb som är tillgänglig på Arkiv-menyn. Då måste du slå samman alla PNG-filer i en ICO-fil. Du kan använda både PNG-filer och ICO-filer på samma gång, men även Safari och Chrome föredrar ofta bara ICO-formatet. Enligt min mening är det lättare att skapa en ICO-fil. ICO-format är inte så vanligt, men lyckligtvis finns det ett antal verktyg som kan hjälpa dig att konvertera dina filer till det här formatet. För detta ändamål föredrar jag att använda X-ikonredigerare . Detta är en gratis onlinetjänst som omedelbart konverterar nedladdade bilder till en ICO-fil, varefter du kan ladda ner den. Det här är inget komplicerat, bara följ instruktionerna på webbplatsen. Om du anser dig som en desperat person kan du experimentera med pixelredigeraren av den här tjänsten och rita en favicon själv. (Även om jag föredrar att redigera favicons i en mer professionell redaktör, till exempel i Photoshop).

Genom att ladda upp dina PNG-bilder till X-Icon Editor får du en ICO-fil vid utmatningen
Genom att ladda upp dina PNG-bilder till X-Icon Editor får du en ICO-fil vid utmatningen.

Så här lägger du in favicon-webbplatsen

Så, du har redan en ICO-fil. Nu behöver du lägga till den på webbplatsen. Byt namn på filen till favicon.ico och placera den i rotmappen på din webbplats (där index.html-filen och andra standardfiler lagras). Efter det framgångsrika tillägget kan du se det på din webbplats. Com / favicon.ico. Nästan alla webbläsare letar efter favicon.ico-filen i rotmappen. Därför är det viktigt att du hämtar favicon i den här mappen. För kompatibilitet med olika webbläsare är det bättre att inte lägga till några HTML-element eller länkar som anger platsen. Det här tricket fungerar för alla webbläsare, upp till IE6. Om du har en WordPress-webbplats kan du också i många teman lägga till ett favicon i temainställningarna. Denna metod kan också användas.

Hur man byter ut favicon

För någon oförklarlig anledning lägger webbläsare till cacheminnet. När du sedan laddar upp en ny ICO-fil kan webbläsaren fortsätta att visa ditt gamla favikon. Vad ska man göra i det här fallet? Du kan lägga till en tillfällig HTML-fil som anger platsen för ditt nya favikon. Också i slutet av webbadressen måste du lägga till en kort frågesträng:

<link rel = "genvägsikon" href = "din hemsida .com / favicon.ico? v = 2" />

Så webbläsaren kommer att tro att det här är en unik URL, och kommer därför att tvingas visa en ny ikon. Efter uppdatering av favicon kan denna HTML-kod helt tas bort. Om du behöver göra ändringar i favicon använder du samma teknik, varje gång du ökar numret efter "v" i frågesträngen. Således kommer webbläsaren varje gång att uppfatta den här webbadressen som unik och visa sin nya version. Och glöm inte att radera HTML-koden efter en lyckad uppdatering.

Hur man skapar mer komplexa favicons

I den här artikeln ville jag beskriva ett universellt och enkelt sätt att skapa favicons som kommer att fungera på praktiskt taget vilken plattform som helst. Men i webbdesign och utveckling finns det ingen gräns för perfektion. Om du vill lära dig att skapa mer komplexa ikoner kan du försöka använda tjänsten favico.js . Det låter dig skapa dynamiska bilder med olika antal. Tack vare den här ikonen kan du se antalet olästa meddelanden, även om motsvarande flik inte är aktiv. Om du vill skapa animerade favicons online kan du försöka använda en favicon-generator favicon.cc .

Fler online generatorer du kan hitta här .

Om du vill dela dina tips om att skapa favicons eller ställa en fråga väntar jag på dig i kommentarerna!