Создание и установка фавикон для сайта

16 Фев 2012 в 23:48

Создание и установка фавикон для блога на WordPress

Фавикон для сайта
Для тех, кто не в курсе...

Favicon (фавикон)(сокр. от англ. FAVorites ICON — «иконка для избранного», взято от названия папки с закладками) — значок (иконка) веб-сайта или веб-страницы. Служит для отображение интернет-обозревателем в адресной строке перед URL страницы сайта, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Для файла Favicon используется изображение размером 16*16 пикселей формата ICO, который помещается в корень сайта под именем favicon.ico.

В предложенной статье рассматривается создание и установка фавикона для сайта без плагина и без дополнительных функций!!!

Создание фавикона

Создать фавикон для сайта можно в любом редакторе иконок. Самым сложным будет выразить суть сайта в изображении 16х16 пикселей. Хотя если у Вашего сайта есть хороший, эффективный логотип, то половина работы уже сделано. Дальше необходимо упростить логотип до предела и сжать до нужного размера.

Для создания файла favicon.ico существуют специальные программы, которые необходимо устанавливать на свой компьютер. Но этот вариант можно использовать, если Вам необходимо создать много таких иконок. В этом посте я не рассматриваю этот вариант.

Для единичных случаев создания фавикона целесообразно пользоваться онлайн-сервисами.

Для генерации фавикона своего сайта я воспользовалась бесплатным сервисом создания фавиконов на  сайте favicon.by.  Принцип работы онлайн-сервисов по созданию фавиконов прост: подготовленный файл с картинкой для фавикона загружается на сайт и сервис сайта возвращает вам уже готовый фавикон.

Создание фавикона для сайта

 

Через несколько секунд страница сайта обновится и предлагается предосмотр фавикона.предосмотр и закачка фавикона

Если полученный вариант фавикона вас устраивает, то архив с файлом фавикона необходимо скачать на свой компьютер в отдельную папку.

Установка фавикона на сайт

Скачанный архив с файлом favicon.ico необходимо разархивировать и файл favicon.ico средствами FTP или менеджера файлов, предоставленным вашим провайдером,  закачать на сервер своего сайта в корневую директорию сайта (обычно www или public_html) - ~/www/[доменное-имя].

Далее необходимо программе нашего сайта указать, что у нас есть фавикон для сайта. Для этого в админке нашего сайта ("Дизайн" → "Редактор") редактором открыть файл header.php и поискать строку, указывающую на фавикон. По идее, подобная строка, указывающая на фавикон,  должна  быть в каждой теме шаблона WordPress:

<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

Замените ее на строки:

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

Если же ее нет, то допишите эти 2 строки. Вставлять их можно до закрытия тэга <head>.

Но, как всегда, есть "но"... Указав таким образом фавикон, он будет виден на страницах блога. Для того, чтобы фавикон был виден и на странице входа в админку, то файл favicon.ico необходимо продублировать и в папке с темой Вашего блога!

В Интернете еще есть несколько онлайн-сервисов, предлагающие услугу по формированию из готовых картинок или созданию фавикона для сайта.

Вот список, которые я знаю:

www.favicon.ru Русский сервис для создания иконок. Иконки получаются довольно качественные. Позволяет создавать favicon из картинки, которую вы загружаете в специальную форму.
www.favicon.by Принцип работы сервиса такой же, как и предыдущего.  Но обращайте внимание на длину полученного фавикон -файла. А то сервис иногда глючит и делает файлы с иконками очень больших размеров.
tools.dynamicdrive.com  англоязычный сайт. Для формирования фавикона необходимо перейти по ссылке FavIcon Generator
faviconGenerator.com  англоязычный сайт
antifavicon.com  англоязычный сайт

Буду благодарна за комментарий и отзыв в соц. сетях!

Буду благодарна, если Вы поделитесь этой статьей:

0

Рубрики: 2. Сайт своими руками

Обсуждение
Отзыв gemnata 24 февраля 2012

благодарю, полезно!

[Ответить]

Отзыв Татьяна 14 марта 2013

Спасибо за статью. Всегда пользовалась для создания иконки сервисом сайта favicon.by, а вчера обнаружила, что этот сервис начал формировать файлы иконок с размером файла больше 4х метров! Какая там уж иконка в 16 пикселей, когда это уже целый паровоз!
Пришлось искать другие сервисы. Иконка из сайта http://www.favicon.ru не понравилась, совсем плохое качество. Пришлось воспользоваться сервисом http://tools.dynamicdrive.com/favicon/
Ответить

[Ответить]

Отзыв Сергей 14 марта 2013

Отличная статья, всё понятно и доступно. Вот только favicon в этом случае будет отображаться на страницах блога. А вот на странице входа и регистрации, а так же в админке отображаться не будет. Кстати на Вашем блоге так и есть 🙂

[Ответить]

Валентина Ответил(а):

Сереж, у меня в хроме фавиконы на блоге и на админке. Сейчас посмотрю в ЕИ

[Ответить]

Сергей Ответил(а):

За админку я не знаю, а вот на страничке входа точно нет 😉

[Ответить]

Валентина Ответил(а):

Сереж,спасибо Вам! Я статью подправила и свой хидер тоже. Посмотрите, пожалуйста, как теперь смотрится мой фавикон

[Ответить]

Сергей Ответил(а):

Валентина смотрится отлично, вот только на страничке входа пользователей как не было так и нет:-(

[Ответить]

Валентина Ответил(а):

Все, Сереж! Спасибо Вам огромное! Сейчас должен быть на обеих страничках!

[Ответить]

Сергей Ответил(а):

Хотя думаю это не столь ВАЖНЫЙ момент 🙂

[Ответить]

Сергей Ответил(а):

Отлично, Всё заработало!

[Ответить]

Валентина Ответил(а):

Тогда можно обойтись и без функции!

[Ответить]

Сергей Ответил(а):

А чем функция плоха?

[Ответить]

Валентина Ответил(а):

Ничем! Только, как всегда, лишний код в программе блога — это лишний код. Я же бывший программер, а меня в свое время учили максимуму минимизации:-)

[Ответить]

Сергей Ответил(а):

Понятно. Спасибо!

[Ответить]

Валентина Ответил(а):

Подправила текст статьи. Хотя мой вариант — это лишняя память на хостинге. Благо, файл с фавиконом небольшой совсем. Еще раз, большое спасибо! А мне Ваш блог понравился!

Валентина Ответил(а):

Сергей. я там коммент написала у Вас.

Валентина Ответил(а):

Спасибо Вам огромное за помощь!!!!! Я Ваша должница 🙂

[Ответить]

Валентина Ответил(а):

Если Вы видите обе странички, я немного внесу изменение в статью.

[Ответить]

Валентина Ответил(а):

Статья с годичной датой, но я ее сегодня переписала и постаралась оптимизировать

[Ответить]

Отзыв Людмила 15 марта 2013

А я просто закидываю фавиконку в корень сайта, обновляю кэш и он сразу появляется и на сайте и в админке без вставки кодов…видимо они все же предусмотрены в программе сайта и шаблонов.
Еще фавикон можно сделать здесьhttp://www.cy-pr.com/tools/favicon/ , правда вес не замеряла.

[Ответить]

Валентина Ответил(а):

Люд, может еще от темы зависит, но у меня вот так, как я написала в статье

[Ответить]

Людмила Ответил(а):

да, скорей всего, у каждой темы свой «сюрприз» 🙂 !

[Ответить]

Отзыв Bert 8 июня 2013

I really like your blog.. very nice colors & theme.
Did you make this website yourself or did you hire someone to do it for you?
Plz respond as I’m looking to construct my own blog and would like to know where u got this from. many thanks

[Ответить]

Отзыв pikasso 8 октября 2013

где то видел скрипт где можно менять каждый час иконки фавиконов…вы такой не встречали?

[Ответить]

Валентина Ответил(а):

Сразу возникает вопрос, а зачем? Ведь назначение фавикона — это в закладках браузера показывать фавиконы сайтов и он должен быть узнаваемым. Посетители же привыкают к фавикону, а если он меняется, то узнаваемости не будет. На мой взгляд, это ненужная фишка — менять фавикон.

[Ответить]

Ваш отзыв