Как да сложим фавикон (favicon) на сайта си

Преди няколко дни моят читател Петър ми писа с въпрос по темата фавикон (favicon). Затова в тази статия ще опиша какво е фавикон, как да си го направим и как да го качим на своя сайт, базиран на WordPress. Целият процес няма да ви отнеме повече от десетина минути.

 

Какво е фавикон (favicon)?

Фавиконът е малка картинка, която се появява до заглавието на сайта в браузъра. Тя помага на редовните ви посетители да разпознават сайта и му придава идентичност. Въобще сайтът ви ще изглежда по-професионално, ако си имате фавикон.

Защо ни трябва?

Освен, че по-горните точки, фавиконът е и удобство за посетителите на сайта ви. Това се демонстрира от следното изображение:

Повечето хора имат много на брой едновременно отворени табове (раздели) в браузъра си. В този случай браузърът скрива заглавието на сайта и показва само картинката. Фавиконът помага на потребителите да разпознаят сайта ви бързо и да включат раздела, на който искат да отидат.

Как да си направим фавикон?

Фавиконът е обикновена картинка. Тя е квадратна и трябва да бъде с размери 32х32 или 16х16 пиксела. Може да я създадете с всяка програма за обработка на изображения – Photoshop, Gimp, Paint.NET и т.н. Аз ще ви покажа как да го направите с Pixlr. Ако в възможно, ползвайте за favicon логото си. В повечето случай, логото е прекалено голямо за фавикон. Затова изберете някаква част от логото си или го напаснете за малкия размер. Например фавиконът на Apple е прословутата ябълка, а на Google – бяло „g” на син фон. Запазете файла във PNG-формат. Ползвам този формат, защото поддържа прозрачен фон.

Форматът .ICO

Повечето модерни браузъри в днешно време поддържат .PNG и .GIF като формати за фавикон, но стари версии на Internet Explorer – не. Затова е по-добре да конвертирате своя .PNG файл в .ICO формат. Можете да го направите на този сайт. Повечето програми за обработка на изображение не поддържат директно запазване на изображение в .ICO-формата (с изключение на Gimp).

Да качим фавикона на своя WordPress-сайт!

Много от темите за WordPress (особено платените) дават възможност за качване на фавикон директно от настройките на темата. Възползвайте се от това, ако е възможно.

Ръчно качване на фавикона

1) Ако по-горната опция не е възможна, можете да качите фавикона си ръчно. Качете го директно в главната директория на сайта си. Можете да го направите през FTP или през файловия мениджър на хостинга си. Убедете се, че сте именували файла си правилно: favicon.ico

2) Незадължително, за напреднали ентусиасти: за да осигурите 100% съвместимост с всякакви екзотични или стари браузъри следва да въведете следния код в header.php на темата  си:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Можете да го направите като редактирате директно файла, но той ще бъде презаписан при евентуална актуализация на темата. Затова е по-добре да се ползва „тема-дете“ (child theme). Друг по-прост вариант е да ползвате плъгина Insert Headers and Footers, за да вкарате кода.