Предиконите (favicons) във вашия сайт - необходимост и удобство

(Темата идва до вас благодарение на предложението на evgeni)

По-запалените собственици на сайтове, както и правещите сайтове, определено знаят какво значи "предикона" (съкращение на "предпочитана икона", като при английското "favicon" - "favorites icon"), но понеже този сайт е главно за начинаещите, ще обясня: това е специалната малка иконка, която се появява в лентата с адреса на сайта, който отваряме, намираща се непосредствено преди самия адрес (URL). За пример, ако сте в АБВ поща, ще виждате характерната бяла къщичка на зелен фон, ако сте в blogger сайт - бялото "B" на светло червен фон... Няма да се спирам на подробности - тях ще намерите в Wikipedia :), само ще допълня, че предиконата (favicon, уебикона, лого) дава на всеки сайт още една доза персоналност и донякъде играе ролята на аватар за целия сайт, който помага на вашите посетители, дори ако само следят публикациите ви по е-мейл, лесно да идентифицират съдържанието идващо от вашия сайт. Все повече сайтове се възползват от възможността чрез предикона да заявят своята идентичност и уникалност. А нейното създаване и използване е толкова лесно, че трябва много да ви мързи, за да не си поставите и вие.

Ако сте тръгнали натам - да сложите собствена предикона (favicon) на вашия сайт, но не знаете как, то можете да се възползвате от инструкциите по-долу. Основното, от което се нуждаете, е разбира се, самата иконка, която искате да поставите, т.е. вашето лого. Можете да я създадете в кой да е от форматите PNG, GIF и дори JPG, защото ICO форматът вече не е задължителен и единствен вариант (освен за Интернет Експлорер). Ако не знаете как или се нуждаете от малко вдъхновение, за да направите своя предикона, вижте тези адреси:
И така, ако вече сте въоръжени със своя предикона, да видим как можете да я поставите в своя сайт. В общия случай, вариантите са два:
  1. За притежаващите достъп до основната директория на сървъра, който хоства сайта им, решението може да е изключително лесно. Нужно е само файлът с предиконата да е в ICO формат. Тогава просто го именувайте favicon.ico и го поставете в тази основна директория. Това е.

  2. За всички, които нямат такъв достъп, ще е нужен достъп до HTML кода на сайта. В този случай форматът на файла може да е всеки от изброените по-горе (ico, png, gif, jpg). Предиконата трябва да се качи на видим адрес и да се укаже в HTML кода на сайта (между маркерите <head> и </head>) да бъде ползвана като предикона от този си адрес чрез добавянето на следния код:
<link rel="icon" href="http://example.com/favicon.ico" />
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
От само себе си се разбира, че удебеленият от мен адрес в примера, трябва да бъде заменен с истинския адрес (и име на файл), на който се намира предиконата.

Ще обърна още малко внимание на втория вариант, с оглед на това, че всички ползващи сайт, хостван в blogger, могат да се възползват от една допълнителна хитрина. Тя е, че могат да качат своята предикона и в обикновена публикация в blogger сайта си по стандартния за това начин. Когато го направите, превключете в режим Редактиране на HTML кода на публикацията и ще видите адреса, който вашата икона има.


Запазете публикацията. За да не се появи като най-новата публикация в сайта ви, можете да използвате предатиране. Поставете адреса на вашата предикона в съответните мяста в кода по-горе. Така модифицирания код трябва да поставите непосредствено преди затварящия маркер </head> в Оформление -> Редактиране на HTML кода и да запазите промяната.

Е, готови сте. Отворете сайта си в своя браузър и се порадвайте на резултата.

Забележка: Internet Explorer си има проблеми с предиконите и може да не ги визуализира.

И накрая ще допълня, че предиконата ви може да бъде и анимирано изображение, но "рецептата" запазвам за категорията "платени услуги". Ако желаете именно такова за вашия сайт, то потърсете ме - цената е смешно ниска!

Ако информацията ви е била полезна, подкрепете ме!

Направи си сайт - въпроси и трикове
Споделете тази статия от "Направи си сайт!" в още мрежи и/или гласувайте за нея!

13 коментара:

drJeckyll каза...

"предикона" (съкращение на "предпочитана икона", като при английското "favicon" - "favorites icon")

ужас ... това звучи като съкращение от армията или бившия СССР (не че и сега не си ги съкращават така де) ...

Xixterious каза...

Да, и? Как да ги нарича, според теб, на български?

evgeni каза...

Благодаря!
Кода вече е в действие:)

Eвгени каза...

На адрес http://www.pic-bg.org може да се качи и вземе директен линк, изображение формат ICO. По този начин фавиконките се разпознават от всички браузъри, включително и от експлоръра, който за съжаление не разпознава GIF, PNG, и GPEG.

Анонимен каза...

Всичко казано по-гoре си е окей..Обаче,при мен проблема е,че фавикона излиза единствено срещу цифровия ми адрес..примерно http://77.xx.xx:80.Аз регистрирах върху този адрес редирект от друг серв.. примерно http://podzone.org. Не мога да изкарам фавикона срещу него..Предполагам ,че нещо бъркам с пътя до иконата.Не се получава, ако напиша примерно href=http://podzone.org/images/favicon.ico.WEB серва е на моя компютър.Ще бъда благодарен ,ако някой подскаже какво точно да направя и въобще възможно ли е за изкарам фавикона срещу нереалния ми адрес.Благодаря.

Georgi Borisov каза...

Аз пробвах да сложа Fave icon .ico но не се получава, някои можели да даде съвет?

http://wayworkathome.com/

Божидар каза...

и при мен не се полуава. Не знам дали го слагам на правилното място в HTML кода. Има няколко места "head" "/head" в кода на шаблона.

xSEOn каза...

към Georgi Borisov: за да ти се даде съвет трябва да опишеш как точно се пробваш. Освен ако проблемът не е в грешно име (задължително трябва да е favicon.ico без интервали в името на файла както ти си го написал) на файла, то без повече информация няма как да ти помогем.

към Божидар: правилното място е след първия маркер head и преди затварящия /head. А ако имаш повече от два такива маркера, то шаблонът ти е със сериозна грешка.

Анонимен каза...

Как може да се направи анимиран фавикон? (като този http://thefavicongallery.com/b/n/bnr.bg.ico)

duckster каза...

Ми слагам favicona в head и нищо. ..провал :(

evgeni каза...

Вече има и опция на директно качване на favicon в Blogger.

В панела "Дизайн" , в горния ляв ъгъл (над "Navbar") има прозорче "Уеб икона"

От там може директно да се качи изображение, което автоматично се конвертира (и фиксира на място) в ico формат . Изискването е мисля изображението да е с квадратни пропорции.

Любопитно е , че не може да се качи директно ico

След качването на собствена фавикона е възможно фактическото и появяване да отнеме известно време

xSEOn каза...

evgeni, благодаря ти за полезното допълнение. Доста нови неща въведоха Blogger, откакто е писана статията и тази нова възможност е само една от тях.

Анонимен каза...

Някой може ли да ми каже как мога да си сложа логото на facebook за споделяне и логото на skype на e-maila си?

Публикуване на коментар

Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица. Можете да използвате някои HTML оператори, например <b>, <i>, <a>.
Благодаря ви!