#favicon tutorial

Hello anon! I’ve gotten this ask a couple times but I held off from doing it since I feel like I over explain WAY too much .. but i hate gatekeeping so here we r. This gonna be more of a basic tut, press the ‘keep reading) to continue!

Hii there! It’s very simple. First step I do is just finding photos, I usually just use Pinterest and sometimes sites with pre cut out photos.

Then I use IbisPaint X to actually edit the pngs ect, I use: the lineout effect aka the stroke one and i’ll sometimes add a blur frame to mines if i feel like it needs / looks good with it. (Depending on the photo it might not show up as much) I normally don’t do this for my pixels, but i’m sure it turns out just as good as my larger favicons. 💝🍀

Then for animation I just move around the photo, so if I want it go to small to big I just make it go like this 👇 if I want it tilted I tilt it ect!

To get it to be a actual GIF i use ez gif! And the gif maker option! I have the speed be around 50 and make sure to select the “don’t stack frames” option!

whats a favicon? a favicon is a shortcut icon, something you can identify your blog / website / etc. on my blog, the favicon is a yellow and white flower, the favicon is located at the top of my page and looks like this. 

how do you get them?

[TUTORIAL] How to change your favicon. (The icon next to your blog title on the tabs)

Resources: x, x, x (for favicons)

Code: <link rel=”shortcut icon” href=”{favicon}”>

(just gonna publish this in case anyone else was wondering ^^)

I’m not very good at explaining things so you will have to bear with me for this.

So when you customize your theme’s html, there should be the usual stuff at the top like theme credit and whatnot. Then there is the , and below that is usually defaults (a lot of things like “meta name” here).

Next you have to place this code:

somewhere below that stuff. Okay that was not very helpful….OTL

Anyways, replace “pixel image” with the url of a (small) image of your choice (I got mine here). You may have to try placing the code in various places of your theme. This shows you where the code is in my theme, if that helps at all.

So, I'm going to teach you how to get a cute icon like this:

First of all, go to your blog, then to the customize page. Click on Edit html and look for this (it should be at the beginning of the theme's code):

<link rel=”shortcut icon” href=”{favicon}”>

Now, replace {favicon} with the URL of the image you want to have as your icon, it should look like this now: 

<link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lkl5vq3ahM1qfamg6.gif" />

Always retype all quotation marks, or it may not work. Ok so now all you have to do is click update preview, then save~