Ako vytvoriť HTML podpis do Outlooku aj s fotkou? Návod a bezplatné šablóny

Zákazník v našej scénke potrebuje tri veci: meno, aby vedel, s kým hovorí, firmu, aby si ponuku zaradil, a telefón, ktorý môže stlačiť. Ak k tomu vidí aj tvár, ľahšie si spojí meno s človekom, s ktorým minulý týždeň telefonoval. Presne toto robí dobrý podpis.

Ukážka od Mediana

Doručená pošta · Outlook

RE: Ponuka na dovoz vozidla PF Peter Fuňák · dnes 9:42

Dobrý deň,

v prílohe posielam upravenú ponuku podľa nášho telefonátu. Ak by ste mali otázky, pokojne mi zavolajte.

S pozdravom

RE: Ponuka na dovoz vozidla Peter Fuňák

Dobrý deň, v prílohe posielam upravenú ponuku…

Podpis číta zhora nadol tak, ako ho číta aj zákazník: najprv tvár, potom meno výrazne vo farbe značky a hneď pod ním tri kontakty s ikonami. Zlatobéžová farba mena a oddeľovacej čiary je prevzatá z loga, takže podpis pôsobí ako súčasť firemnej identity. Logo, adresa a právna poznámka sú až na konci, nekonkurujú menu a telefónu.

Prečo sa podpis oplatí a kedy použiť fotku

• Rýchly spätný kontakt. Zákazník nemusí hľadať číslo na webe. Ťukne na telefón priamo v e-maile.
• Orientácia v preposlaných e-mailoch. Keď sa ponuka posúva v firme od kolegu k šéfovi, podpis hovorí, kto je jej autor.
• Jednotná komunikácia tímu. Rovnaký podpis u všetkých kolegov pôsobí profesionálne a posilňuje značku pri každom e-maile.

Portrét má zmysel všade, kde je obchod postavený na vzťahu: obchodníci, konzultanti, realitní makléri, remeselníci, ktorí chodia ku klientom. Pri spoločnej schránke typu info@ alebo objednavky@ je vhodnejšie logo, pretože odpovedajú rôzni ľudia.

Rady k fotke:

• jasná tvár s prirodzeným výrazom, pohľad do objektívu,
• jednoduché, pokojné pozadie bez rušivých detailov,
• výrez hlava a ramená, aby bola tvár čitateľná aj v malom krúžku,
• aktuálna fotka, na ktorej vás zákazník spozná aj osobne.

Čo do podpisu dať: plná a krátka verzia

Pripravte si dve verzie. Plnú pre nové e-maily a krátku pre odpovede, aby sa v dlhej konverzácii neopakoval celý blok. Ukážeme to na modelovom príklade.

Modelový príklad, osoba aj firma sú vymyslené.

E-mail do podpisu pridajte vtedy, keď sa správa bude preposielať ďalej, inak ho zákazník vidí v hlavičke. Odkazy na sociálne siete pridajte len tie, ktoré naozaj aktívne používate a ktoré zákazníkovi niečo povedia, napríklad LinkedIn alebo Instagram s referenciami.

Meno a kontakty musia byť skutočný text, nie súčasť obrázka. Mnohé e-mailové programy obrázky na začiatku blokujú. Ak je celý podpis jeden obrázok, zákazník uvidí prázdny rámik alebo prílohu a nemá kam zavolať. Text sa navyše dá skopírovať, vyhľadať a na mobile kliknúť.

Ako si vytvoriť HTML podpis

Cesta 1: bez kódu, cez bezplatný generátor alebo šablónu

HubSpot Email Signature Generator je zadarmo a nevyžaduje registráciu. Postup:

1. V prvej záložke vyplníte meno, pozíciu, firmu, telefón a e-mail.
2. V ďalšej pridáte fotku alebo logo. Obrázok musí byť nahratý na webe a vložený cez priamu adresu (URL). HubSpot sám odporúča nepoužívať na to Google Disk.
3. Vyberiete šablónu a nastavíte farby a písmo podľa značky.
4. Kliknete na Create Signature a tlačidlom Copy skopírujete hotový podpis, prípadne jeho zdrojový kód.
5. Skopírovaný podpis vložíte do Outlooku (postup nižšie).

Mail-Signatures.com ponúka bezplatné šablóny aj generátor. V galérii šablón použite filter Content a zvoľte Photo, zobrazia sa šablóny s fotkou. Stiahnete ZIP archív, v ktorom je súbor .html. Otvoríte ho v prehliadači, označíte všetko (Ctrl + A), skopírujete (Ctrl + C) a vložíte do editora podpisu s voľbou Zachovať formátovanie zdroja. Potom prepíšete zástupné údaje ako {First name} svojimi.

Cesta 2: vlastný HTML súbor

Ak už máte podpis ako súbor .html, alebo si ho chcete upraviť ručne, držte sa troch pravidiel: rozloženie cez tabuľku, štýly priamo pri prvkoch a obrázky cez HTTPS adresu. Tu je jednoduchá šablóna na úpravu:

<!-- ŠABLÓNA NA ÚPRAVU: prepíšte údaje a adresu fotky -->
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,sans-serif;font-size:14px;color:#222222;">
  <tr>
    <td style="padding-right:16px;vertical-align:top;">
      <img src="https://www.vasa-firma.sk/podpis/foto.jpg" width="90" height="90"
           alt="Martina Kováčová" style="display:block;border-radius:45px;">
    </td>
    <td style="vertical-align:top;border-left:2px solid #C8A96E;padding-left:16px;">
      <b style="font-size:18px;color:#222222;">Martina Kováčová</b><br>
      <span style="color:#666666;">projektová manažérka · Stolárstvo Dub s. r. o.</span><br><br>
      <a href="tel:+421900123456" style="color:#222222;text-decoration:none;">+421 900 123 456</a><br>
      <a href="https://www.stolarstvodub.sk" style="color:#C8A96E;text-decoration:none;">www.stolarstvodub.sk</a>
    </td>
  </tr>
</table>

Telefón začína tel:, aby sa dal na mobile stlačiť, a fotka je na vašom webe, nie priložená. Okrúhly orez cez border-radius niektoré verzie Outlooku ignorujú, preto je istejšie pripraviť už okrúhlu fotku s bielym pozadím.

Cesta 3: stiahnite si našu šablónu

Ak sa vám páči podpis z ukážky vyššie, pripravili sme z neho šablónu na stiahnutie zadarmo. Rozloženie aj farby sú rovnaké, osobné údaje sme nahradili zástupnými textmi v [hranatých zátvorkách] a fotku aj logo neutrálnymi obrázkami.

Pozor: obrázky v šablóne sú v base64

Keď súbor otvoríte v editore, namiesto krátkej adresy obrázka uvidíte niečo ako src="data:image/png;base64,iVBORw0KGgo…" a za tým tisíce znakov. Nie je to chyba. Base64 je spôsob, ako zapísať obrázok ako obyčajný text. Fotka, logo a ikony sociálnych sietí sú tak uložené priamo v HTML súbore, nie na samostatnom serveri.

Prečo sme to tak urobili: šablóna je jeden súbor, ktorý funguje hneď po stiahnutí. Nepotrebujete web ani hosting, kam by ste obrázky nahrali, a po otvorení v prehliadači vidíte podpis aj s obrázkami. Pri skopírovaní do Outlooku na počítači sa obrázky prenesú spolu s podpisom.

Na čo si dať pozor:

• Base64 obrázok je asi o tretinu väčší ako pôvodný súbor a posiela sa v každom e-maile. Fotku preto zmenšite na približne 200 × 200 px.
• Gmail a niektoré ďalšie webové schránky obrázky v base64 nezobrazia. Príjemca potom namiesto fotky vidí prázdne miesto.
• Niektoré e-mailové programy takéto obrázky zobrazia ako prílohy správy.

Na vyskúšanie a na interné e-maily base64 stačí. Pre podpis, ktorý posielate zákazníkom každý deň, odporúčame obrázky nahrať na váš web a v kóde nahradiť celý data:image/png;base64,… obyčajnou adresou, napríklad https://www.vasa-firma.sk/podpis/foto.png. Ikony telefónu, e-mailu a webu sú v šablóne už teraz načítané cez adresu.

Ako vložiť podpis do Outlooku

Zdrojový kód verzus naformátovaný podpis. Súbor .html je zdrojový kód, teda text so značkami. Do bežného editora podpisu v Outlooku nevkladajte tento kód, ale to, čo z neho vidíte v prehliadači:

1. Kliknite na súbor .html pravým tlačidlom a zvoľte Otvoriť v programe → Edge alebo Chrome.
2. V prehliadači stlačte Ctrl + A a Ctrl + C. Skopíruje sa naformátovaný podpis.
3. Vložte ho (Ctrl + V) do editora podpisu podľa verzie Outlooku nižšie.

Nový Outlook pre Windows a Outlook na webe

1. Otvorte Nastavenia (ozubené koliesko) → Účty → Podpisy.
2. Ak máte viac účtov, najprv vyberte ten správny.
3. Kliknite na Pridať podpis, pomenujte ho (napríklad „Plný“) a vložte podpis.
4. Rovnako vytvorte krátku verziu („Odpovede“).
5. Nižšie nastavte predvolený podpis pre nové správy a pre odpovede a preposlania a uložte.

Ručne vložíte podpis pri písaní správy cez kartu Správa → Podpis. Ak používate Outlook aj Outlook na webe s kontom Microsoft, Microsoft upozorňuje, že podpis treba vytvoriť v oboch.

Klasický Outlook pre Windows

1. Otvorte novú správu a na karte Správa zvoľte Podpis → Podpisy.
2. V časti E-mailové konto vyberte správny účet.
3. Kliknite na Nový, zadajte názov a do poľa Upraviť podpis vložte podpis.
4. V časti Vybrať predvolený podpis nastavte Nové správy na plnú verziu a Odpovede a preposlania na krátku.
5. Potvrďte OK.

Podpisy v klasickom Outlooku sa ukladajú v počítači, na novom zariadení ich preto treba nastaviť znova. V inej jazykovej verzii Outlooku sa môžu názvy položiek mierne líšiť.

SúvisíLogo v krivkách: aký formát loga kam použiť

Ako podpis otestovať a používať

• Pošlite skúšobnú správu mimo firmy, napríklad na súkromný Gmail.
• Otvorte ju v Outlooku, v Gmaile aj na mobile.
• Kliknite na telefón a web, či vedú tam, kam majú.
• Prepnite si tmavý režim a skontrolujte, či je logo aj text čitateľný.
• Vypnite zobrazovanie obrázkov a pozrite sa, či sú meno a kontakty stále viditeľné.
• Odpovedzte na správu a overte, že sa použila krátka verzia.

Fotka sa po odoslaní nezobrazuje

1. Overte, že fotka je na webe a jej adresa začína https://. Otvorte ju priamo v prehliadači v anonymnom okne.
2. Ak je obrázok uložený na Google Disku alebo v zdieľanom priečinku, presuňte ho na vlastný web alebo do generátora, ktorý obrázky hostuje.
3. Vložte podpis znova a pošlite si novú skúšobnú správu. U príjemcu môžu byť obrázky blokované, kým ich nepovolí, preto musí byť podstatné všetko v texte.

Formátovanie sa rozpadlo

1. Podpis vložte znova z prehliadača a pri vkladaní zvoľte Zachovať formátovanie zdroja.
2. Ak sa tabuľka zúži alebo rozhodí, zjednodušte ju: menej stĺpcov, žiadne rozloženie cez div, šírky obrázkov nastavené priamo v kóde.
3. Ak to nepomôže, nechajte podpis v klasickom Outlooku uložiť priamo ako súbor do priečinka s podpismi. To je už úloha pre niekoho, kto s HTML pracuje.

Časté otázky

Zdroje: Microsoft Support: pridanie a zmena podpisu v Outlooku, HubSpot: profesionálne e-mailové podpisy (apríl 2026), HubSpot Email Signature Generator, Mail-Signatures: šablóny, Mail-Signatures: generátor, Mail-Signatures: návod. Modelové príklady a šablónu kódu sme pripravili sami.