Favicon Generator - Text to Favicon.ico

Skapa anpassade favoritikoner direkt - perfekt för webbplatser, appar och PWA:er

Skapa din favoritikon

Aktivera SVG

Hur man installerar favoritikoner på din webbplats

Förbättra din webbplats utseende på alla enheter genom att installera anpassade favoritikoner. Följ dessa enkla steg för att integrera ditt nygenererade favicon-paket:

  1. Generera din favoritikon: Använd vår favicongenerator för att skapa anpassade ikoner med önskad text, färger, form och typsnitt. Klicka på 'Generera favicon' för att ladda ner ditt faviconpaket.

  2. Ladda ner och packa upp: När det har skapats, ladda ner favicon-paketet och extrahera filerna till din webbplats rotkatalog.

  3. Lägg till HTML-kod: Infoga följande kod i avsnittet "huvud" i din HTML-fil för att säkerställa kompatibilitet mellan olika enheter och webbläsare:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Hur man använder Favicon Generatorn

  1. Ange önskad text (1-2 tecken).
  2. Anpassa färger, form och typsnitt.
  3. Klicka på 'Generera Favicon'.
  4. Ladda ner ditt favicon-paket.
  5. Implementera det med den medföljande koden.

Storlekar på genererade Favicons

Vår favicon-generator skapar ikoner i följande viktiga storlekar:

Vanliga Apple Touch Icon-storlekar:

  • 57x57px: iPhone och iPod touch.
  • 60x60px: Touch-ikoner för de senaste iPhones.
  • 72x72px: Ikoner för iPad.
  • 76x76px: iPad med Retina-skärm.
  • 114x114px: iPhone med Retina-skärm.
  • 120x120px: Retina-touch-ikoner för de senaste iPhones.
  • 144x144px: iPad med Retina-skärm.
  • 152x152px: iPad med Retina-skärm.
  • 180x180px: iPhone 6+ och nya Retina-ikoner.

Allmänna ikonstorlekar:

  • 16x16px: Favicons för webbläsarflikar.
  • 32x32px: Standardstorlek på favicons.
  • 48x48px: Windows-genvägar.
  • 64x64px: Windows-genvägar.
  • 96x96px: Chrome- och Android-enheter.
  • 192x192px: Android-enheter.
  • 512x512px: Ikoner för högupplösta skärmar och vissa Progressive Web Apps (PWA).

Ytterligare format:

  • favicon.ico (32x32px): En ikonfil med flera upplösningar för maximal kompatibilitet med äldre system och webbläsare.
  • SVG-format: Om aktiverat, innehåller paketet även en skalbar vektorbildikon (SVG), idealisk för olika storlekar och enheter tack vare dess skalbarhet.

Varför flera favicon-storlekar är viktiga

I dagens värld med många enheter är det avgörande att ha flera favicon-storlekar:

  • Säkerställer kompatibilitet på alla enheter och webbläsare
  • Förbättrar visuell klarhet på högupplösta skärmar
  • Uppfyller kraven för Progressive Web Apps (PWA)
  • Ökar igenkännbarheten på trånga webbläsarflikar

Vanliga frågor