Как изменить блогу иконку (favicon)

Автор: | 28.03.2013

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

Как изменить блогу иконку (favicon)

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


Как создать favicon:

Сразу хочу сказать, что изображение для favicon должно быть строго квадратным. В качестве иконки (favicon) можно использовать абсолютно любое изображение, будь то картинка или скриншот. После того как вы подберёте картинку, нам нужно её уменьшить до требуемых размеров. Размер favicon должен быть 16×16 px. Для уменьшения можно использовать разные редакторы и онлайн сервисы. Лично я вам покажу два варианта, первый в adobe photoshop, а второй в одном онлайн фотохостинге.

Уменьшение картинки через photoshop.
Сейчас я покажу как сделать маленькую иконку, использую photoshop. Для примера я взял вот такую картинку.

Как изменить блогу иконку (favicon)

Как видите картинка больших размеров по этому она в исходном варианте не подойдёт, по этому открываем её через photoshop.

Как изменить блогу иконку (favicon)

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

Как изменить блогу иконку (favicon)

Выбираем раздел изображения → размер холста.

Как изменить блогу иконку (favicon)

Как мы видим ширина и высота не равны, давайте сделаем их одинаковыми.

Как изменить блогу иконку (favicon)

После этого сохраняем и видим, что картинка стала квадратной.

Как изменить блогу иконку (favicon)

Ну вот, теперь можно и уменьшать картинку до размеров иконки. Лезем опять в раздел изображение, но выбираем пункт размер изображения.

Как изменить блогу иконку (favicon)

Далее в этом разделе устанавливаем ширину в 16×16 пикселей и сохраняем. После этого у нас получается маленькая иконка.

Как изменить блогу иконку (favicon)

Теперь сохраняем её в формате png. Всё иконка готова.
Подробнее о том, как её можно вставить на наш сайт в конце статьи, а пока что о том, как уменьшить её через онлайн фотохостинг.

Уменьшение через онлайн фотохостинг.
Сразу хочу сказать, что для уменьшения через фотохостинг нужна сразу квадратная картинка, поскольку обрезать там нельзя будет. Вот небольшой минус данного метода.
Для начала открываем фотохостинг radikal.ru и на нём загружаем нашу картинку, только перед загрузкой прописываем, что бы её уменьшили до 16px.

Как изменить блогу иконку (favicon)

Далее просто загружаем картинку, она уменьшается и после этого сохраняем её на свой компьютер.


Ставим favicon на сайт:

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

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

Вместо favicn.png пишите название своей картинки. хочу отметить что favicon не обязательно должен быть в формате .ico, формат может быть любой картинкой.

Ну вот и всё, favicon установлен на ваш сайт, комментируйте.

Как изменить блогу иконку (favicon): 2 комментария

  1. Den

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

  2. Ferablog

    Здравствуйте Иван, спасибо за вашу инструкцию, она мне очень помогла. Я сначала взял, нарисовал favicon в фотошопе, а потом не мог понять как её поставить на сайт, везде пишут, что нужно строго ico, а вы тут скинули замечательный код, который разрешает грузить любой формат, теперь не надо мучаться над поиском программы делающей ico. Спасибо еще раз, поменял свой favicon и теперь не могу нарадоваться.

Обсуждение закрыто.