How to change the favicon, the images used in Facebook and Twitter embeds, and more

Ever wondered how the icon in the tabs of your browser work? How sites like Facebook or Twitter manage to grasp a cool image of the websites when you share a link on them?

All of this works quite simply: by using images! Those images are located inside the assets folder and if you haven't changed them, they currently show the Chisai logo. Here's how to change them.

First, delete all these images inside the assets folder:

• apple-icon-57x57.png
• apple-icon-60x60.png
• apple-icon-72x72.png
• apple-icon-76x76.png
• apple-icon-114x114.png
• apple-icon-120x120.png
• apple-icon-144x144.png
• apple-icon-152x152.png
• apple-icon-180x180.png
• android-icon-192x192.png
• favicon-32x32.png
• favicon-96x96.png
• favicon-16x16.png
• favicon.ico
• social.png
• rss.png

Now prepare your image. It's often better to have large square image for this.

1. Go to the Favicon Genrator dot org
2. Select your image and click on create favicon.
3. The website will return you with a link. Click and download the zip file.
4. Select all the images inside this zip file and upload them inside the assets folder following this guide

Don't forget to create both social.png and rss.png and upload them too, or the website won't work. They can be copies of your original source file.

And that's all! Now embeds to your website should be clean and personal. But to embed something, you need to write it. Before we start creating pages, let's just talk about the Markdown syntax