Как да поставите или промените favicon в сайта

Здравейте, приятели! В днешната статия ще ви разкажа как да поставите или смените favicon иконката на вашия сайт и ще разберем какво въобще означава термина фавикон.

И така, под favicon се подразбира картинката, която може да видите в таба на прозореца на браузъра когато отворите даден сайт. Тази иконка, въпреки, че е миниатюрна (с размери 16×16 пиксела), има голямо значение за общото впечатление което оставя сайта у посетителите. Днес ще ви разкажа за два варианта как да поставите или да смените favicon иконата на вашия сайт.

favicon-1

Задаваме иконката от административния панел на WordPress

След като влезете във вашия акаунт, кликнете “Външен вид” -> “Настройки” -> ”Идентичност на сайта” -> кликнете бутон “Избор на изображение” и качете картинката която искате да използвате за favicon. Препоръчвам ви картинката да е във png формат.

favicon-2

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

Как да смените favicon чрез html код

Този начин е за тези, които искат да се “поровят”в кода и да разберат как това работи отвътре. Иконката на сайта винаги се е задавала в таг head, където се включват външните файлове – стилове, библиотеки, скриптове и т.н. За да включите favicon се използва таг link. В него е нужно да се зададат няколко атрибута, а също и пътя до картинката. Типичния код за включване на favicon изглежда по този начин:

<link rel = "shortcut icon" href = "icon.png" type = "image/png">

Хайде да разгледаме всеки атрибут подробно:

  • rel – винаги този атрибут се използва за да се укаже ролята на файла който се включва. Например, stylesheet – таблица на стиловете, shortcut icon – икона на сайта и т.н. Този параметър е задължителен.
  • href- най-важния параметър, той определя пътя до картинката. Ако пътя е зададен грешно, то вие просто няма да видите иконката. В този пример пътя е зададен така, като че ли файл icon.png лежи във същата папка, в който е файла с кода на страницата.
  • type – днес използването на този атрибут не е задължително. Той показва mime-типа на включвания файл. Все пак ви препоръчвам да го вписвате, за да нямате проблем при обработката на кода в старите браузъри.

Формат на картинката

Формата може да е всеки – png, gif, jpeg, ico. Последният формат е създаден специално за изобразяване на такива икони. За да включите такава картинка е нужно само да промените атрибут type:

type = "image/x-icon"

Но днес е по-просто и разумно да използвате png формат.

От къде да намерите иконка?

Може да направите  favicon икона по следните начини:

  1. Да я нарисувате самостоятелно във PhotoShop или в друг графичен редактор, за това не се изискват големи познания. А и не е задължително да правите всичко от нула, може да използвате картинка намерена в Интернет.
  2. Да използвате готова иконка като я редактирате или я поставите както си е. Просто намерете безплатно изображение, намалете размерите и го използвайте. Може да използвате онлайн сайтове за създаване на favicon, например сайта www.favicon.cc.

Не губете време и задължително сложете favicon на вашия сайт, без него днес сайта ви ще изглежда непрофесионално. Успех.

С уважение, Николай Томов.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *