# Importera varumärke från webbplats: fyll i kitet i ett steg

[Canonical HTML page](https://gradiently.design/sv/guide/import-brand-from-website)

Din webbplats vet redan ditt namn, din enradspitch, din färg och din ikon. En knapp på sidan Varumärke läser av dem, och du avgör vad som ska sparas.

## The short version

- Gradiently kan läsa ett varumärkes webbplats och föreslå dess namn, beskrivning, temafärg och ikon till varumärkeskitet.
- Inget läggs till automatiskt: varje fynd visas som ett förslag som du kan använda eller strunta i.
- Namnet kommer från sidans egna namntaggar, beskrivningen från dess meta-beskrivning, färgen från dess theme-color-tagg och ikonen från dess touch-ikon eller favicon.
- En sida utan theme-color-tagg eller med bara en SVG-ikon ger färre förslag, så några rader i HTML-huvudet förbättrar resultatet.
- Att läsa en webbplats är en del av varumärkeskitet, som ingår i Gradiently Pro.

För att **importera varumärke från webbplats** i Gradiently öppnar du sidan Varumärke, skriver in din adress under **Webbplats** i Identitet och väljer **Läs sidan**. Gradiently hämtar sidans namn, beskrivning, temafärg och ikon och erbjuder var och en: använd namnet, använd beskrivningen som slogan eller Om, lägg till färgen bland dina varumärkesfärger, lägg till ikonen som logotyp. Du väljer vad som kommer med. Det tar några sekunder och sparar den mest tråkiga delen av att ställa in ett kit.

## Så importerar du ditt varumärke från en webbplats

1. **Öppna sidan Varumärke** Välj det varumärke du vill fylla i. Varje varumärke i ditt konto har sitt eget kit, så se till att du är i rätt ett.
2. **Ange webbplatsen** Under **Identitet** skriver du adressen i **Webbplats**. En vanlig domän som `crumb.co` räcker; du behöver inte skriva https.
3. **Välj Läs sidan** Gradiently besöker sidan en gång, läser dess huvud och hämtar dess ikon. Knappen visar **Läser…** medan det pågår.
4. **Använd det som passar** Varje fynd visas med sin egen knapp: **Använd ”Crumb” som namn**, **Använd beskrivningen som slogan**, **Använd beskrivningen som Om**, **Lägg till färgen**, **Lägg till ikonen som logotyp**. Bortse från det som är fel.
5. **Läs igen efter ändringar** Om du uppdaterar din webbplats väljer du **Läs igen**. När allt användbart redan finns i kitet säger sidan det.

Webbplatsens färg dyker också upp senare som ett förslag i avsnittet **Färger**, märkt med din webbplats namn, så att du kan lägga till den där om du hoppade över den första gången.

## Vad Gradiently läser från din webbplats

Den läser bara den publika startsidan på adressen du anger, och bara de delar som beskriver varumärket. Den genomsöker inte andra sidor, loggar inte in och läser inte ditt innehåll.

| Kitförslag | Varifrån det kommer | Blir |
| --- | --- | --- |
| Namn | `og:site_name`, `application-name` eller Apple-webbappens titel | Varumärkesnamn |
| Beskrivning | `meta name="description"`, eller Open Graph-beskrivningen | Slogan eller Om |
| Färg | `meta name="theme-color"` som hex eller rgb() | En varumärkesfärg |
| Ikon | Den största `apple-touch-icon`, andra rasterikoner och sedan `/favicon.ico` | En logotyp, upp till 256 px |

Fyra förslag och deras källor. Ikonen ritas om som en PNG på högst 256 px innan Gradiently sparar den.

Två detaljer är bra att känna till. SVG-ikoner hoppas över, eftersom Gradiently inte rastrerar någon annans SVG, så en sida med bara en SVG-favicon ger ingen ikon. Och färgen måste vara ett vanligt hex- eller rgb()-värde; en CSS-variabel i theme-color-taggen går inte att läsa.

## Gör din webbplats lätt att läsa

Om Läs sidan ger magert resultat är lösningen oftast några rader i sidans HTML-huvud. De hjälper fler än Gradiently: webbläsare använder theme-color för adressfältet på mobiler, och länkförhandsvisningar använder dina Open Graph-taggar. [Open Graph-taggar](https://gradiently.design/sv/guide/open-graph-tags) och [favicon-design](https://gradiently.design/sv/guide/favicon-design) går djupare.

```html
<head>
  <title>Crumb · Sourdough bakery in Leeds</title>
  <meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
  <meta property="og:site_name" content="Crumb">
  <meta name="theme-color" content="#c2410c">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>
```

Allt Läs sidan letar efter: ett sidnamn, en beskrivning på en rad, en temafärg i hex och en rastrerad touch-ikon på 180×180.

### Ger lite

- Ingen meta-beskrivning, eller en proppfull med nyckelord
- Ingen theme-color-tagg, eller en CSS-variabel i den
- Bara en SVG-favicon
- En startsida som omdirigerar till en inloggning

### Ger en komplett start på kitet

- En ärlig mening om vad du gör
- En temafärg i hex som matchar din logotyp
- En touch-ikon i PNG på 180×180
- En publik startsida som laddar snabbt

## Vad du gör efter importen

Importen ger dig en grund, inte ett färdigt kit. Fyra saker är värda att göra härnäst, i den här ordningen.

1. **Ladda upp riktiga logotypfiler.** En favicon är liten och kvadratisk. Lägg till din fullständiga logotyp som PNG, JPEG, WebP, GIF eller AVIF, en för mörka bakgrunder och en för ljusa; se [logotyp på en gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background).
2. **Komplettera färgerna.** En temafärg är en början. Lägg till en stödfärg och dina mörkaste och ljusaste neutraler; [så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors) hjälper dig.
3. **Ställ in typsnitten.** Välj ett typsnitt för rubriker och ett för brödtext, eller [ladda upp dina egna typsnittsfiler](https://gradiently.design/sv/guide/custom-fonts-upload).
4. **Skriv rösten.** En webbplatsbeskrivning talar om för Designer vad du är, inte hur du låter. Fyll i Ton, Med dina ord, Alltid och Aldrig; [varumärkesröst för AI](https://gradiently.design/sv/guide/brand-kit-voice) visar hur.

Ett Instagram-inlägg som presenterar Crumb, ett surdegsbageri, med namn och beskrivning inlästa från dess webbplats

Ett första inlägg direkt efter importen: namn och beskrivning från webbplatsen.

Samma Crumb-presentation som en stående Instagram-story

Samma varumärke som en story i 1080×1920, redo när kitet är inställt.

## När det inte går att läsa en webbplats

Om du ser **Vi kunde inte läsa den webbplatsen** svarade sidan inte i tid, returnerade ett fel eller blockerade förfrågan. Kontrollera att adressen öppnas i ett privat webbläsarfönster. Adresser som pekar på ett privat nätverk, en inloggningssida eller en fil i stället för en webbsida nekas med flit. En sida bakom en strikt botspärr kanske aldrig går att läsa; skriv in uppgifterna för hand, vilket tar ett par minuter.

> **Vem kan göra detta** Att läsa en webbplats är en del av varumärkeskitet, som ingår i Pro. I en delad arbetsyta kan bara ägare och administratörer ändra ett varumärkeskit. Gradiently läser sidan en gång, när du ber om det, utan cookies eller inloggningsuppgifter.

När kitet är ifyllt lägger Studion dina färger först i varje väljare, erbjuder dina logotyper och startar designer i dina typsnitt, och Designer skriver utifrån din beskrivning. Kombinera det med en Mark som ingen annan kan använda så ser dina inlägg ut som du från det första. Resten av kitet beskrivs i [ställa in varumärkeskit](https://gradiently.design/sv/guide/brand-kit-setup).

## FAQ

### Hur hämtar jag mina varumärkesfärger från min webbplats?

I Gradiently anger du din webbplats på sidan Varumärke och väljer Läs sidan. Om din webbplats har en theme-color-tagg erbjuds dess färg som en varumärkesfärg.

### Varför hittade Läs sidan inte min logotyp?

Den letar efter rasterikoner som apple-touch-icon eller favicon.ico och hoppar över SVG-ikoner. Lägg till en PNG-touch-ikon på din webbplats, eller ladda upp din logotyp direkt.

### Skriver importen över mitt varumärkeskit?

Nej. Varje fynd erbjuds som ett förslag, och inget ändras i kitet förrän du väljer att använda det.

### Kan jag importera ett varumärke från någon annans webbplats?

Verktyget läser vilken publik webbplats som helst, men använd det för varumärken du driver eller arbetar för. Kitet ska innehålla material du har rätt att använda.

### Vad händer om min webbplats saknar beskrivning?

Läs sidan erbjuder ändå det den hittar. Skriv din slogan och Om för hand, och överväg att lägga till en meta-beskrivning på webbplatsen, vilket också hjälper i sökresultat.
