Как создать favicon для сайта

favicon

Мне часто задают вопрос начинающие веб-мастера: «Как сделать иконку для сайта, чтобы она отображалась на вкладке браузера?»

Друзья мои, нет ничего проще. Вопрос решается прописыванием двух строк кода в секции <head> Вашего сайта. Чуть ниже расскажу, каких именно...

Но для начала немного теории. )))


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

По своей сути favicon — это картинка (рекомендую делать в формате .ico или .png — потому что эти форматы поддерживают прозрачность).

Стандартный размер фавиконки — 16×16 пикс. Так что особо мудреные логотипы туда не поместятся — надо использовать что-то попроще.

А сейчас главный вопрос — Как сделать саму фавиконку?

Для создания фавиконок можно использовать любой графический редактор (фотошоп и др.). Но... без дополнительных плагинов фотошоп не может сохранять формат .ico (правда можно сделать иконку в .png).

Но это не то, о чем я хотел сегодня рассказать.

Я хотел рассказать Вам, как сделать иконку совсем без фотошопа или какого-либо другого редактора. Это можно сделать при помощи онлайн сервисов. Именно их мы сейчас и рассмотрим.

X-Icon-Editor

X-Icon-Editor — довольно функциональный инструмент, содержащий в себе инструменты рисования. В то время как другие подобные сервисы позволяют рисовать только отдельные пиксели, X-Icon-Editor содержит специальные кисти и другие фишки для отрисовки овалов и квадратов.

В качестве загружаемых изображений данный сервис поддерживает форматы JPEG, PNG, ICO и другие. На выходе favicon-ке можно задать размер 16, 24, 32, 64 пикселя.

Favicon.cc

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

 Antifavicon

Стандартный размер favicon-ки (16×16) — это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь :) .

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

Faviconist

Faviconist немного похож на Antifavicon в том, что данный сервис тоже позволяет нарисовать favicon c текстом. Однако тут, мы уже можем выбирать из нескольких вариантов шрифтов. Фон можно сделать как одного цвета, так и применив градиент или текстуру.

Genfavicon

Последний сервис, который мы рассмотрим, — это Genfavicon. Здесь можно загрузить изображение, преобразовать его в иконку и сразу же увидеть, как она будет смотреться в браузере. После этого вы можете скачать иконку заданного размера.

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

Как привязать favicon к сайту?

Ну и как обещал, две строчки кода, чтобы привязать фавиконку к вашему сайту.

В секции <head> добавляем следующий код:

<link rel="icon" href="http://Ваш_сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://Ваш_сайт.ru/favicon.ico" type="image/x-icon">

Как Вы уже поняли, Ваш_сайт.ru заменяем на доменное имя Вашего сайта. А саму фавиконку закидываем в корневую папку Вашего сайта.

Тут есть еще один нюанс. Когда Вы все это сделаете — Вы не увидите Вашу новую фавиконку... Чтобы ее увидеть, нужно обновить кэш браузера (и желательно еще перезапустить браузер). Вот тогда Вы сможете полюбоваться своими трудами в полной мере.

Желаю удачи!

P.S. Не забываем подписываться на обновления сайта. Это очень Важно! )))

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.