Как создать favicon для сайта
Опубликовано: 24.08.2018
Мне часто задают вопрос начинающие веб-мастера: «Как сделать иконку для сайта, чтобы она отображалась на вкладке браузера?»
Друзья мои, нет ничего проще. Вопрос решается прописыванием двух строк кода в секции <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. Не забываем подписываться на обновления сайта . Это очень Важно! )))