Logo
To create a brand and identity around our app, we will need a logo. We will use AI to generate our logo. It used to be quite challenging to generate logos using AI. The generated logos tended to be too detailed. This has improved a lot with more recent models. It is now easier to generate more simplistic logos using AI.
Creation
To create our logo, we will use Leonardo.Ai. If you have followed the Image Generation section on the AI page of this guide then you should already have an "Apprentice" subscription with Leonardo.Ai.
Generate initial logo
To generate a logo, go to the Leonardo.Ai image generation tool and select "Graphic Design" as the "Model/Preset". For the "Style" select "Graphic Design Vector". Set the "Generation Mode" to "Quality" and the "Image Dimensions" to "1:1" and "Large". Open the "Advanced Settings" accordion and enable the "Transparency" toggle switch. Then enter the prompt for the generation. The prompt used to generate the Epic Fantasy Forge logo was "logo, vector art, realistic looking, fantasy phoenix bird". Then click the "Generate" button:
After some delay the AI should have created some images for you based on the prompt you provided. If none of the generated logos seem suitable you can repeat this process until you get an image that looks usable.
For more detailed instructions of how to use Leonardo.Ai to generate logos, see the Creating a Quick Logo with Leonardo.Ai guide.
Refine logo
Once you have generated a logo that seems usable, you can generate variations of this logo in order to have a larger selection of similar logos to choose from. To do so, hover your mouse over the logo you prefer, click on the three dots that appear and select "Use as Image Guidance":
On the "How would you like to use your image?" prompt, select "Image to Image" and click "Confirm":
Now your preferred logo should be used as a reference when generating new logos. You can optionally change the prompt text and then click "Generate" to generate variations of your preferred logo:
After some delay the AI should generate variations of your preferred logo. You can repeat this process until a logo is generated that meets your expectations.
Once you have a logo that you like you can download it and rename it "logo.png".
Usage
Technical Documentation
To take into use the logo you generated above, navigate into the root directory of your Material for MkDocs project. From there navigate into the "docs" directory. Then create a new directory named "assets":
mkdir assets
Now copy and paste the logo you downloaded from Leonardo.Ai into this newly created directory. Next update "mkdocs.yml" as per the below to take the logo into use:
theme:
favicon: assets/logo.png
logo: assets/logo.png
Now both the logo and favicon on your Material for MkDocs page should be the logo you generated with Leonardo.Ai:
If your logo does not look so good in combination with the primary background color of your Material for MkDocs site, then you can consider changing the background color, to for example black by modifying "mkdocs.yml" as per the below:
theme:
palette:
primary: black
With this color adjustment the Epic Fantasy Forge logo looks much better on the technical documentation site:
User Documentation
To use the log on our user documentation site, open your Featurebase dashboard and click on the "Settings" icon on the left sidebar. Under the "Branding & Customizations" section click on "Branding". Now you can upload a custom logo. Once you are done click "Save":
Your logo should now be used on your user documentation site:
Additionally the logo is also used on other Featurebase pages, such as the feedback and roadmap pages:
Web Favicon
Our Phoenix project is currently using a default favicon located at priv/static/favicon.ico. We will replace this file with our logo. Technically it is possible to specify multiple favicon files for your website, however in my opinion this is not worth the additional hassle and complexity. Unless your website is a PWA (Progressive Web App), a single favicon should be sufficient. Epic Fantasy Forge is not offered as a PWA since there are native apps of Epic Fantasy Forge available.
Test
Before replacing the favicon, we should first add a test. Since the favicon is a static element with no logic, we will not add unit or integration tests for it. Instead we will only add a simple manual E2E test for the favicon. The favicon may be displayed differently by different browsers or the favicon format may not be supported at all by certain browsers. Our favicon should be supported by all major browsers, so it is a good idea to add a manual test case to verify this during release testing. During release testing we will be using Browserstack to easily verify the the favicon looks good on a variety of browsers.
For more details about E2E testing practices see the E2E Tests section on the Testing page of this guide.
In Qase, create a manual test case for the favicon. Place it under the "Web Exclusive" suite:
Replace Default Favicon
To replace the default favicon, copy your "logo.png" file into the directory "priv/static/" and rename it to "favicon.png". Then using an image editor such as Pinta, resize the image to have a resolution of 192x192. Google recommends favicons are at least 48x48 or a multiple of that.
Now you can delete the default favicon.ico located at priv/static/favicon.ico. To take our new "favicon.png" into use, edit the file "epic_fantasy_forge_web.ex" located in the directory "lib/epic_fantasy_forge_web/" to replace "favicon.ico" with "favicon.png" in the static_paths function:
def static_paths, do: ~w(assets fonts images favicon.png robots.txt)
Next add the below line inside the "<head>" block in "root.html.heex" located at "lib/epic_fantasy_forge_web/components/layouts/":
<link rel="icon" type="image/png" href={~p"/favicon.png"}>
Now the favicon should be displayed as the icon in your browser tab:
App Icon
Test
Before replacing the app icon, we should first add a test. Since the app icon is a static element with no logic, we will not add unit or integration tests for it. Instead we will only add a simple manual E2E test for the app icon. The app icon may be displayed differently and in different locations on different platforms.
In Qase, create a manual test case for the app icon. Place it under the "App Exclusive" suite:
Replace Default App Icon
To replace the default app icon, run the below command in the root directory of your Tauri project. The last parameter given should point to the location of your logo:
bunx tauri icon ../development-guide/docs/assets/logo.png
The command above should have replaced all icons in the src-tauri directory with icons generated from your logo. Various sizes and formats for your logo were automatically generated. When installing and starting your app now, your custom logo should be used everywhere, e.g. for the icon displayed on the task bar and a few other places depending on the platform:
Tip
Due to caching of the icons, it can be very hard to get your OS to show the new icon. If your OS persistently keeps showing the old icon even after reboot, you can consider testing on a different machine, e.g. on a virtual machine with Instant Workstation.