Favicon WordPress – установка значка ico на сайт

Для визуального отличия любого сайта в Интернете используется значок с расширением ico и называется favicon. Вот так favicon для моего сайта на WordPress выглядит в окне обозревателя:

Favicon WordPress

Теперь о том, как создать и установить значок favicon на сайт WordPress.

Прежде всего нужно подобрать рисунок, который хотите, чтобы отображался в качестве favicon. Рисунок можно брать, в принципе, любой, однако желательно, чтобы он был в виде квадрата, поскольку отображаться favicon в окне обозревателя будет с размерами 16*16 пикселей.

Стоит также обратить внимание на то, что поскольку значок favicon достаточно маленький, — то и рисунок следует подбирать довольно простой, с отсутствием мелких деталей в изображении. Можно для favicon использовать рисунок с отображением всего одной буквы, например как у поисковой системы Яндекс:

Favicon Yandex

Рисунок можно и вручную нарисовать в фотошопе, а можно для этих целей поискать в интернете готовые варианты favicon , либо другие готовые варианты значков.

Предположим, что вам понравился рисунок, который вы хотите использовать в качестве favicon, форматом 300*250, такой вариант и у меня был с моим значком favicon, — он не был квадратным.

Для этого заходите в Photoshop, и на вкладке панели задач нажимаете «Изображение» – «Размер холста», после этого задаете размер холста с равными сторонами, например, 300*300. Если больше ничего в рисунке редактировать не нужно, то просто теперь изменяете размер изображения до 16*16 или 32*32 или 64*64.

Я использовал последний вариант, а именно изображение для favicon сделал размером 64*64. Здесь стоит также обратить внимание на то, что чем больше размер изображения, тем дольше будет загружаться вся страница сайта в окне обозревателя, хоть это и совсем незначительно влияет на скорость загрузки (практически не заметно) – однако не стоит не учитывать данного факта, и если у сайта приоритет сделан не на качество изображений и дизайн , а на смысловую нагрузку и значимость контента сайта, то лучше, конечно, использовать значок favicon размером 16*16 или 24*24, или 32*32.

Создание значка favicon для WordPress с расширением ico.

Теперь, когда готов рисунок с равными сторонами (т.е. в виде квадрата), этот рисунок нужно сохранить с расширением ico (не jpg, png, а именно с расширением ico). Для этого можно воспользоваться онлайн сервисом по созданию favicon, который находится по адресу favicon.ru

Нужно иметь в виду, что этот онлайн сервис создает favicon размерами 16*16, а значит изображение favicon будет не сильно отличаться качеством, но если заданный рисунок достаточно прост, то можно и воспользоваться данным сервисом.

Если же размер favicon 16*16 вас не устраивает, придется создать его в фотошопе (photoshop). По умолчанию в фотошопе не предусмотрено создание favicon, поэтому для этого придется установить плагин в саму программу. Плагин для создания favicon в фотошопе можно скачать тут:

После этого, скачанный плагин по созданию favicon, необходимо закачать в программу Photoshop, в папку по адресу: C:\Program Files\Adobe\Adobe Photoshop CS5\Plug-Ins\File Formats

Затем, заходите в программу Photoshop и исходный рисунок вначале изменяете до желаемых размеров 16*16 или 32*32 (или 64*64- как у меня), и потом, при открытом рисунке, который хотите сделать как favicon, нажимаете в программе Photoshop в панели задач «сохранить как», и в поле «тип файлов» выбираете «ICO (Windows Icon) (*.ICO) » , как показано на рисунке ниже:

Плагин для Favicon Photoshop

а в поле «Имя файла» сохраняете рисунок под названием favicon,- именно под таким названием и никак иначе.

Прикрепление favicon WordPress к сайту.

По этому поводу есть два варианта действий:

1) Заливаете в корень вашего сайта созданный значок favicon.ico, далее открываете в дизайне используемого вами шаблона WordPress файл header.php и между тегами <head> и </head> после тегов начинающихся на <link rel= ……. /> дописываете две строчки:

&amp;lt;link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon» /&amp;gt;
&amp;lt;link rel=»icon» href=»favicon.ico» type=»image/x-icon» /&amp;gt;

После описанных выше действий значок favicon на сайте WordPress у меня начал отображаться, но только на главной странице, в рубриках и архивах, а в самих статьях значок favicon.ico — у меня не отображался;

2) Второй способ, после которого у меня значок favicon.ico начал отображаться на всех страницах сайта WordPress:

  • закачиваем значок favicon.ico не в корень сайта, а в папку используемого шаблонного дизайна WordPress, по адресу /wp-content/themes/название-шаблона;
  •  открываем для редактирования блокнотом файл header.php, используемого шаблонного дизайна, и записываем вот такую строчку:
    &amp;lt;link rel=»shortcut icon» href=»&amp;lt;?php bloginfo(‘template_directory’); ?&amp;gt;/favicon.ico» /&amp;gt;

Именно после применения второго варианта, значок favicon WordPress у меня начал отображаться на всех страницах сайта.

Всем удачной установки значка favicon WordPress на ваш сайт или блог!

Добавить комментарий