15 bästa gratis ficicongeneratorer

Gratis Favicon-generatorer


När det gäller din webbplats är din varumärkesstrategi avgörande för att konvertera besökare till kunder. Ingen liten detalj bör förbises. Detta inkluderar behovet av att skapa favicon-ikoner och en gratis favicon-generator kan hjälpa dig att göra dessa.

Favoriter är de små bildikonerna som visas bredvid en webbplatss titel i fliken i ett webbläsarfönster.

Eftersom du också kan använda dem som skrivbordsappikoner, behöver du minst några olika storlekar som kan ingå i en favicon ICO-filtyp. I de flesta fall kan du också ställa in en PNG-fil som en favicon-ikon.

Favoriter är viktiga eftersom användare ständigt jagar efter information på flera webbplatser samtidigt i flikar. Favicons hjälper användare att identifiera innehåll och varumärket snabbare för mer lockande användarupplevelse.

Så här är 15 gratis favicon-generatorverktyg online samt mer information om hur man skapar favicon-ikoner och installera dem.

Låt oss gräva in.

OnlineCOicon Generator ICO File Best Practices

När du vill skapa favicon-ikoner är det första steget att lära sig mer om dem, inklusive deras krav och bästa praxis.

Termen “favicon” är en portmanteau för “favoritikonen.” Det var ikoner som, precis som i dag, visades med en webbplatstitel högst upp i en webbläsare.

Förutom visades de ursprungligen när en användare lägger till en webbplats i sin “favorit” -mapp. Moderna webbläsare hänvisar till den här mappen som dina bokmärken.

En favicon-ikon måste vara av en viss storlek. Annars använder inte webbläsare och enheter dem.

De nakna minimistorlekarna du behöver är:

  • 16 × 16 pixlar för webbläsare
  • 32 × 32 pixlar för skrivbordsuppgiftsfält
  • 96 × 96 pixlar för desktop-app-favicon-ikoner
  • 180 × 180 pixlar för iOS- och Android-enheter

Tänk på att du kan välja mellan 16 × 16 px och 32 × 32 px. Om du inte är orolig för varumärke borde en av dessa bildstorlekar räcka.

För mer information, kolla in Favicon Cheat Sheet.

När du skapar en favoritikon är det en bra idé att också följa dessa bästa metoder:

  • De ska vara enkla och inte alltför stiliserade så att de är lätta att se i små storlekar.
  • Välj en eller två färger för färgschemat. Högst högst tre färger.
  • Favicon-ikoner bör vara antingen i 8-bitars eller 24-bitarsfärger.
  • Utformningen av favicon-ikonerna bör inte innehålla många rader eller bokstäver.
  • Även om du kan ha en transparent bakgrund är det viktigt att notera att Apple-enheter inte tillåter det.
  • Favicon-ikoner ska motsvara ditt befintliga varumärke och logotyp.

Skapa en logotyp snabbt om du inte har en

Som tidigare nämnts är det en bra idé att låta din favoritikon kopplas till ditt märke och din nuvarande logotyp. Om du inte redan har en kan du skapa en snabb, till exempel med TailorBrand Logo Maker.

Den kan generera en logotyp för dig med hjälp av en AI. Efter att ha svarat på några enkla och snabba frågor om logotypen du vill ha, inklusive teckensnittet, sedan registrerat dig för ett gratis konto, genereras flera högkvalitativa, professionella och moderna logotyper.

Ett exempel genererad logotyp från TailorBrand webbplats.
Ett exempel på logotyp och alternativ som är tillverkade med TailorBrand Logo Maker.

Om du hittar en logotyp du gillar kan du uppgradera till ett premiumkonto för att ladda ner den. Även om du kan ladda ner en favicon-ikonversion av logotypen gratis.

Vi har listat 15 gratis logotyptillverkare online om du också vill kolla in andra alternativ.

Bästa gratis favicon-generatorer: onlineverktyg

Om du är intresserad av att skapa egna favikonikoner som är mer förenklade, eller om du bara vill ladda upp en bild och ha den i lämplig storlek och konverteras till en ICO-bildfil, här är flera gratis favicongeneratorer.

De är inte i någon speciell ordning eftersom de är alla fantastiska alternativ där du kan skapa en favoritikon med några klick. När du har gjort en favorit med något av dessa onlinealternativ är de gratis att ladda ner och använda.

1) Favicon.io

Den gratis favicon-generatoren Favicon.io

Med denna gratis favicon-generator kan du skapa favicon-ikoner från en text, en bild eller en emoji.

Med det textbaserade alternativet kan du välja bakgrundsfärg och form, teckensnittsfamilj och storlek samt teckensnittsfärg. Favicon-generatorn använder Google-teckensnitt som har 800+ teckensnitt tillgängliga.

Alternativt kan du välja att ladda upp en fil för favicon-generatorn för att omvandla den till lämplig storlek. Eller så kan du ladda ner en emoji-favicon-ikon från en gigantisk lista med alternativ.

Det genererade favikonet fungerar för alla webbläsare och flera plattformar.

2) Favicon-Generator.org

Favicon Generator-webbplatsen för att göra en favorit.

Denna gratis favicon-generator ger dig möjligheten att ladda upp en bildfil och välja mellan standardstorleken 16 × 16 px för webbläsare, eller en större storlek som passar Android, Microsoft och iOS.

Du har alternativet att behålla de aktuella bilddimensionerna istället för att ändra storleken på en kvadrat. Kom bara ihåg att om du håller detta alternativ markerat eller avmarkerat kan det ske slutliga resultatet av din favorit.

Så det är bäst att se till att din bild redan är ganska nära att vara en kvadrat.

3) Real Favicon Generator

Webbplatsen Real Favicon Generator för att skapa favicon-ikoner.

Den här favicon-generatorn är ganska unik eftersom den är en av de få i listan som innehåller en förhandsgranskningssektion för webbläsarsimulator så att du kan se hur din favicon-ikon kommer att se ut när den har formats och konverterats.

Du kan också få storlekar för alla webbläsare, plattformar och de flesta tekniker.

Men denna favicon-generator har bara möjligheten att välja en bild för konvertering till en favicon-ikon.

4) Favicon.cc

Webbplatsen Favicon.cc

Med denna gratis favicon-generator kan du antingen ladda upp en bild för att skapa ett favicon, eller så kan du skapa en egen favicon-ikon genom att rita en med en mus.

Du kan välja de färger du vill använda med en färgväljare samt växla genomskinligheten för favicon-ikonen.

Det finns också ett alternativ att skapa favicon-ikoner med en animation. Det finns också inställningar som att sätta animationen i loop, redigera och ta bort ramar.

Denna favicon-generator har också ett förhandsgranskningsläge, så du kan se hur din favicon ser ut när den är klar.

5) FaviconGenerator.com

Ett gratis alternativ för favicon-generator.

Detta är en enkel gratis favicon-generator där du kan ladda upp en bild och sedan välja den storlek du vill att den ska vara. Det är väldigt grundläggande, men ett bra alternativ när du vill skapa en favicon-ikon snabbt utan att krossa med inställningar och alternativ.

Med denna generator kan du också skapa retina-favoriter som fungerar med Apple touch-enheter. Det kräver lite extra arbete, men alla instruktioner finns på deras webbsida.

6) Favicomatic

Favicomatic-webbplatsen, en gratis favicon-generator.

Favic-o-Matic genererar favoriter, både ICO och PNG (även transparenta).

Du kan ladda upp en bild med denna gratis favicon-generator och sedan välja om du vill ladda ner en ICO-fil med 16 × 16 och 32 × 32 pixlar eller inkludera olika storlekar som är kompatibla med alla enheter.

Det finns också avancerade inställningar som att kunna redigera bakgrundsfärgen och några avancerade kompatibilitetsalternativ.

7) Ionos Favicon Generator

Sonos gratis favicon-generatorwebbplats

Ionos Favicon Generator låter dig rita en favicon-ikon, använda initialer eller ladda upp en bild du vill använda för att skapa ett favicon.

Resultatet är ett favicon som fungerar över alla webbläsare och enheter. Den har också ett trevligt förhandsgranskningsområde där du snabbt kan se hur din favorit ser ut live.

8) Webbplats Planet Favicon Generator

Webbplats Planet webbplats gratis favicon generator för att göra en favicon.

Denna gratis favicon-generator erbjuder alternativen för att ladda upp en bild (antingen JPG, PNG eller GIF), eller välja från ett gratis galleri med premade favicons.

Det kan vara viktigt att notera att om du vill skapa favicon-ikoner för ditt företag, kommer du sannolikt att skapa ett favicon som är din logotyp eller liknande den. När du gör detta ger det en mer sammanhängande look som är mer minnesvärd.

Så att välja en av premadebilderna kanske inte passar bra, särskilt eftersom andra webbplatser kan använda exakt samma som du valt.

9) RedKetchup Favicon Generator

Webbplatsen för Red Ketchup Favicon Generator

För denna generator finns det ett alternativ att ladda upp en bild eller skapa en med text.

Om du skapar favicon-ikoner med text finns det många inställningar, inklusive att ändra teckensnittsfamiljen, teckenstorlek, bakgrundsfärg, textfärg och det finns en justerbar skala för att växla gränsen mellan en kvadrat och en cirkel. Så du kan skala gränsen så att du har rundade kanter med olika rundhet.

Det finns också ytterligare alternativ för kompatibilitet mellan enheter.

10) Genfavicon

Skapa favicon-ikoner med Genfavicon webbplats gratis favicon generator.

Denna gratis favicon-generator är unik för att när du laddar upp en bild har du möjlighet att beskära för att göra det till ett favicon.

Det finns också ett förhandsgranskningsfönster för att se hur din nya favoritikon ser ut live i en användares webbläsare.

Du kan välja mellan storleksalternativ: 16 × 16, 32 × 32, 48 × 48, 64 × 64 och 128 × 128 pixlar.

11) FavIcon.pro

Skapa favicon-ikoner med webbplatsens gratis favicon-generator på Favicon.pro-webbplatsen.

Här är ett annat snabbt alternativ när det gäller en gratis favicon-generator. När du laddar upp en bild för att skapa en favorit kan du välja den bildstorlek du vill använda: 16 × 16, 32 × 32, 48 × 48, 64 × 64 och 128 × 128 pixlar.

FavIcon låter dig konvertera filtypen JPG, GIF, PNG till ICO och du kan använda den för att konvertera appikoner, skrivbordsikoner och favoriter till dina webbplatser.

12) Faviconr

Du kan skapa en favicon-ikon med Faviconrs gratis favicon-generator.

Faviconr är ett annat enkelt och snabbt alternativ för en gratis favicon-generator.

Ladda upp antingen en JPG-, PNG- eller GIF-fil och välj om du vill ha en transparent bakgrund (du kan bara skapa transparenta favikoner om din källfil också är en transparent PNG- eller GIF-fil). Klicka på knappen, spara filen och du är klar.

13) ICOConvert

IcoConvert-webbplatsen

Den här gratis favicon-generatorn är ganska unik eftersom du kan skära upp den och utforma den efter att ha laddat upp en bild du vill använda för att skapa ett favicon.

Det finns alternativ för att forma gränsen till olika former inklusive en fyrkant, hjärtaform, kvadratisk mitt, en cirkel, en lutad hjärtaform eller kvadrat, och ett alternativ att välja en vit kant.

Du kan också välja att ladda ner favikonen som en ICO- eller PNG-fil med flera storleksalternativ inklusive 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 96 × 96, 128 × 128, 192 × 192 och 256 × 256 pixlar. Det finns också ett alternativ att skapa favicon-ikoner för Windows 7, 8, Vista och XP-datorer.

Denna gratis favicon-generator innehåller alternativ för komprimering och konvertering av filer från PNG till SVG också.

14) Wizlogo Favicon Generator

Wizlogo gratis favicon generator för att skapa favicon ikoner

Wizlogo är ett annat enkelt alternativ för en gratis favicon-generator. Allt du behöver göra är att välja en bild som ska laddas upp och välj sedan antingen en 32 × 32 ICO-fil eller en favicon-ikon för webb, iOS, Windows och Android. Och du är klar.

Wizlogo kan också användas som en gratis logotyptillverkare.

15) FavICO

Favico-webbplatsen

FavICO är ett sista grundalternativ för en gratis favicon-generator. Ladda upp en bild som du vill använda för att skapa en favorit. Välj sedan mellan en storlek på 16 × 16 eller 32 × 32 pixlar och tryck på skapa. Och det är allt.

Hur man installerar en Favicon-ikon

När du har använt en av de gratis favicon-generatorerna för att skapa en favicon-ikon kan du installera den så att den kan visas på din webbplats.

För vanliga eller icke-WordPress-webbplatser, ladda upp först favicon-ikonen till roten till din server.

Sedan börjar du i taggen i filen index.html, använd den officiella koden nedan från W3C:

...


...

Se bara till att ändra “https://example.com/myicon.png” med den faktiska länken till din favicon-ikon.

Ändra också “image / png” för att återspegla vilken typ av bildfil du använder för favoriten.

Här är de bildtyper som ska ersättas av “image / png” som är kompatibla när det gäller att skapa ett favicon:

  • PNG-bildfil – image / png
  • GIF-bildfil – bild / gif
  • ICO-bildfil – bild / x-ikon
  • SVG-bildfil – image / svg + xml

Glöm inte att spara filen.

I de flesta fall genererar de gratis favicon-generatorerna som listas ovan också den kod du behöver som är specifik för de inställningar du valde, t.ex. för animationer eller kompatibilitet. Så om den här koden inte fungerar kan du hänvisa till den favicon-generator som du använde för att skapa ett favicon för din webbplats.

Installera en Favicon-ikon automatiskt i WordPress

För WordPress-webbplatser kan du skapa en favicon-ikon utan att behöva använda en av de gratis favicon-generatorerna som listas ovan.

Du kan använda vilken bild du vill så länge den är minst 512 px bred.

För att automatiskt installera den, logga in på din självhostade WordPress-webbplats och i admin-instrumentpanelen, gå till Utseende> Anpassa.

När Customizer har laddats klickar du på Webbplatsidentitet i menyn till vänster. Sedan under Webbplatsikon, klick Välj bild.

Customizer i WordPress
Du kan automatiskt skapa favicon-ikoner i WordPress.

I popup-fönstret klickar du på Ladda upp filer fliken, sedan på Välj filer. Välj en bild du vill ha från din dator.

Klick Välj, beskär sedan bilden om det behövs och klicka på Beskära bild. Eller så kan du lämna bilden som den är och klicka Hoppa över beskärning.

Spara dina ändringar genom att klicka på Publicera -knappen i Customizer.

Installera en Favicon manuellt för WordPress-webbplatser

För att manuellt installera ditt favicon som är en ICO-fil för WordPress, ladda upp först favikonet till roten på din webbplats samt roten till ditt nuvarande tema.

Se till att filen heter “favicon.ico”, annars kommer favicon-ikonen inte att visas.

Detta borde göra tricket, men vissa äldre webbläsare kanske inte märker din favorit så det finns ett ytterligare steg du kan ta för att säkerställa kompatibilitet.

Hitta din header.php-fil via SFTP eller värdleverantörens kontrollpanel.

Öppna den och sök efter koden som liknar exemplet nedan:

...

...

Sedan, ersätt den med koden nedan eller lägg till den om den inte finns där:

...

...

Spara filen så är du klar.

Avslutar

Något så litet som en favicon-ikon kan verka obetydlig till en början, men det hjälper till med varumärkesigenkänning och användarupplevelse. Dessa gratis favicon-generatorer bör göra tricket för att skapa egna favicon-ikoner för att lägga till på din webbplats.

Något vi har missat? Lämna en kommentar nedan.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me