What's a Favicon?
Updated: 1 Dec 2022
The favicon (short for favourite icon) is the little icon or logo that shows on the tab of an open website and on your favourites or bookmark bar. In this diagram the arrows are pointing to the favicon.
Some favicons are instantly recognizable, like those for the national Archives (UK and USA), social media sites like twitter, blogging sites like word press and blogger, all have their own icon. In the above diagram you can see in the first tab my blogger manager is open.
The second tab is my blog site showing the favicon I created for all my blogs, which are under the umbrella of Dianne at Home. My logo is a fancy D with a little house on it. You should be seeing my favicon on the tab now.
A favicon is a ".ico" file (rather than a .jpg) which is 16px x 16px and can be created with an online favicon generator. The reason for using a generator is that most image programs do not give you the option to save an image as a .ico file.
When choosing an image, remember the image you use must be able to go square. Most generators want to start with at least 260 x 260, for best results they may ask for 512 x 512 ... and it will be reduced to 16 x 16 in the program. Save your image as a png file.
I made my image in Photoshop elements, using a small image on top of a letter, then I uploaded it to the favicon generator. If you are using image only, make sure the image is not too complicated as when it is reduced to 16 x 16 it is harder to see, and you can just go ahead and upload it to the generator. If you don't like what you get, try another image. It's all free, so you can play around with it.
Once you have created your favicon, save it on your computer as favicon.ico
I will give instructions for adding it to Blogger, as that is what I have.
Open blogger manager and go to Settings. The last element under Basic is for the favicon. The default is the blogger logo you see on most blogger blogs.
Click on Favicon then Choose File, then upload your "favicon.ico" image.
Click Save.
It may take a while for the favicons to appear. Sometimes it will appear right away and other times you may have to close, press F5, or even restart your computer. But it will show up and appear on the tab when you open your site, and on your favourites bar. One of mine only appeared the next day. Clearing your cache helps.
If you have WordPress - try this post 3 Easy Ways to Add a Favicon in WordPress
If you have your own website add this code in the header element... (remember, if your ico file is in a folder, perhaps named images, then use "images/favicon.ico")
Below are some links to favicon generators. Some, like the first one, will download a list of files in a zip folder, pick out the ico file.
Relevant Links
The 1&1 Favicon Generator
Favicon cc
Faviconer
Favikon
Antifavicon
The favicon (short for favourite icon) is the little icon or logo that shows on the tab of an open website and on your favourites or bookmark bar. In this diagram the arrows are pointing to the favicon.
Some favicons are instantly recognizable, like those for the national Archives (UK and USA), social media sites like twitter, blogging sites like word press and blogger, all have their own icon. In the above diagram you can see in the first tab my blogger manager is open.
The second tab is my blog site showing the favicon I created for all my blogs, which are under the umbrella of Dianne at Home. My logo is a fancy D with a little house on it. You should be seeing my favicon on the tab now.
A favicon is a ".ico" file (rather than a .jpg) which is 16px x 16px and can be created with an online favicon generator. The reason for using a generator is that most image programs do not give you the option to save an image as a .ico file.
When choosing an image, remember the image you use must be able to go square. Most generators want to start with at least 260 x 260, for best results they may ask for 512 x 512 ... and it will be reduced to 16 x 16 in the program. Save your image as a png file.
I made my image in Photoshop elements, using a small image on top of a letter, then I uploaded it to the favicon generator. If you are using image only, make sure the image is not too complicated as when it is reduced to 16 x 16 it is harder to see, and you can just go ahead and upload it to the generator. If you don't like what you get, try another image. It's all free, so you can play around with it.
Once you have created your favicon, save it on your computer as favicon.ico
Open blogger manager and go to Settings. The last element under Basic is for the favicon. The default is the blogger logo you see on most blogger blogs.
Click on Favicon then Choose File, then upload your "favicon.ico" image.
Click Save.
It may take a while for the favicons to appear. Sometimes it will appear right away and other times you may have to close, press F5, or even restart your computer. But it will show up and appear on the tab when you open your site, and on your favourites bar. One of mine only appeared the next day. Clearing your cache helps.
If you have WordPress - try this post 3 Easy Ways to Add a Favicon in WordPress
If you have your own website add this code in the header element... (remember, if your ico file is in a folder, perhaps named images, then use "images/favicon.ico")
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">Upload your "favicon.ico" image and altered file with your ftp manager.
Below are some links to favicon generators. Some, like the first one, will download a list of files in a zip folder, pick out the ico file.
Relevant Links
The 1&1 Favicon Generator
Favicon cc
Faviconer
Favikon
Antifavicon
No comments:
Post a Comment
Leave me a note to tell me you were here! Thanks for visiting.