Создание иконки сайта (favicon)

Рад приветствовать читателей моего блога!

Сегодня я расскажу о том, как создать иконку сайта (так называемый favicon), которая придаст индивидуальность вашему ресурсу.

Что такое favicon?

Favicon представляет из себя значок веб-сайта, отображаемый браузером во вкладках, в закладках при добавлении туда сайта, в адресной строке левее URL сайта и в других элементах интерфейса.

Само слово favicon образовано из двух других, а именно FAVorites ICON, что переводится на русский язык как «значок для избранного». Чтобы вы наглядно могли оценить, что из себя представляет иконка сайта favicon, размещаю скриншот, на котором стрелками обозначены иконки разных интернет-ресурсов:

Создание иконки сайта (favicon)

Думаю, что теперь понятно, что из себя представляет favicon и можно переходить к рассмотрению вопроса о его создании.

Создание иконки сайта (favicon)

При создании иконки для сайта первым делом нужно определиться с изображением, которое будет использоваться в качестве нее. Предлагаю выбрать в качестве данного изображения что-то схожее по смыслу с тематикой вашего сайта/блога.

Далее это изображение нужно создать с помощью графического редактора, например Photoshop. Можно также воспользоваться сайтом http://www.favicon.cc, на котором есть возможность создать свой, либо скачать уже существующий favicon в рубрике Top Rated Favicons.

В любом случае, в результате должен получиться файл с изображением размером 16×16 или 32×32 пиксела с расширением gif или png. После этого переименовываем его в favicon.ico и загружаем с помощью FTP-клиента на хостинг в корень (или в любое другое место, главное запомнить путь к файлу) вашего сайта.

Теперь, когда выбранная для вашего сайта иконка уже загружена на хостинг, осталось лишь найти в файле header.php вашего шаблона WordPress тег <head></head> и перед закрывающим тегом </head> (с использованием текстового редактора, рекомендую использовать notepad++ по FTP, либо в админ-панели найти пункт Внешний видРедакторheader.php) вставить следующий код, отвечающий за отображение этой самой иконки сайта:

<link href="http://имя сайта/путь к файлу favicon.ico/favicon.ico" rel="shortcut icon" type="image/png" />

Сохраняем изменения, обновляем страницу и наблюдаем появившуюся иконку вашего сайта/блога.

Если иконка не отображается, то проверьте правильность написания пути к ней. Не размещайте файл favicon.ico сильно глубоко, лучше всего разместить его в корне сайта на хостинге.

На этом создание иконки сайта (favicon) для сайта/блога на WordPress завершено!

Подписывайтесь на обновления моего блога, чтобы не пропустить публикацию новых статей!

До скорых встреч. С уважением, Владимир Денисов!

Комментарии 1

  • Мне вот интересно, если изменяется расширение пиктограммы — нужно ли как-то изменять код интеграции, для правильной интерпретации кода браузером?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *