Здравствуй, читатель. Сегодня хочу рассказать подробнее о том как создать фавикон и установить его на свой сайт. Я покажу вам, что это намного проще чем может показаться на первый взгляд. Но для начала определим значение иконки для сайта, чем полезен Favicon и нужен ли он для вашего блога.
Что такое Фавикон и зачем нужна иконка сайту
Иконка для сайта или Фавикон – это значок сайта, который можно разглядеть в строчке браузера рядом с URL и в закладках. Фавиконы также отображаются в выдаче Яндекса рядом с ссылками, чего кстати нет в Гугле (ай-ай). Иконкой для сайта является файл favicon.ico, который браузер пытается загрузить из корневого каталога сайта при переходе. По размеру обычно 16х16 пикселей и имеет .ico расширение.
Чтобы понять одну из главных причин использования фавиконов, давайте проведем маленький эксперимент. Наберите в Яндексе «фавикон» и в выдаче вы увидите, что у всех сайтов, стоящих в первых строках есть иконки. Разберемся, как это связано. Как мы знаем, в топ выдачи попадают только кто Яшке отстегнул бабосов самые авторитетные сайты, а значит, иконка сайта является показателем качества вашего ресурса. Также пробегая глазами по выдаче, ссылки без фавиконов теряются на фоне имеющих оные.
Мы уже разобрались, что фавикон способствует развитию вашего сайта. Если иконка есть и она привлекает внимание, то это вызывает большее доверие у пользователя, что в целом повышает вероятность клика и сохранения в закладки. Отвечая на вопрос нужен ли фавикон для сайта, ответ ДА. Если вы не умеете, не хотите или нет времени сделать иконку самостоятельно, то ее можно заказать у фрилансеров.
Рассмотрим несколько способов создания иконки для сайта.
Создание иконки для сайта с помощью Photoshop
У меня установлен Photoshop CS5. И как оказалось, он не поддерживает сохранение файла в формате .ico, который нам нужен. Однако существует выход из этого положения, а точнее специальный плагин ICO. Скачать который вы можете вот на этом сайте.
Дальше дело остается непосредственно за созданием уникальной иконки и сохранением ее в нужном формате. Я воспользовался этим способом, результат которого вы можете наблюдать.
Как вы заметили в основном я использую Google Chrome, который довольно легок в использовании и весьма расширяем. Но вернемся к созданию фавикона.
Онлайн-сервисы для создания иконок для сайта
Этот способ попроще и подходит для тех, кто с Photoshop на «ВЫ», или не имеет установленной лицензионной (нет пиратству!) копии данной программы у себя на компьютере. Так вот, представляю вашему вниманию пару онлайн-сервисов по созданию иконок для сайтов.
Favicon.ru — для создания иконки необходимо загрузить уже готовую картинку любого размера со своего компьютера (1) или указать ссылку на изображение в интернете (2).
Далее следуя простым инструкциям (3) создаем фавикон и сохраняем его у себя на жестком диске.
Favicon.cc — Возможности этого онлайн-сервиса входит как загрузка уже готового изображения (2) с преобразованием его в иконку, так и создание фавикона с нуля (1) и (3).
Онлайн-сервисов для создания достаточно, но эти два мне показались наиболее удобными.
Готовые галереи фавикон
Уж если вам не подошли вышеописанные способы, то можно скачать уже готовый фавикон из галереи. Но в этом случае никто не даст гарантии, что эта иконка будет установлена только на вашем сайте. А уж если хотите просмотреть пару галерей, то вот: The Favicon Gallery, ICONJ.
Установка иконки на сайт
Для того чтобы установить фавикон, его достаточно загрузить в корневой каталог сайта под именем favicon.ico и, в принципе, икнока уже будет отображаться. Но веб-мастера рекомендуют прописать следующий код в header.php внутри тэга <head> </head>.
|
1 2 |
<link rel="icon" href="название_сайта/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="название_сайта/favicon.ico" type="image/x-icon"> |
Вот так все достаточно просто создать и установить иконку Favicon на сайт.
А зачем вот расширение .ico? я вот себе взял формат gif и пока нормально ..:)
Действительно, формат gif также поддерживается для иконки сайта. С его помощью можно сделать анимированный фавикон, как у Шакина например. Для установки gif-иконки нужно добавить соответствующую ссылку в код. Формат ico запрашивается браузерами по умолчанию (добавление ссылки в код не обязательно) и, если его не обнаруживает, то ищет дальше.
В корневой каталог — это непосредственно в publik.html или глубже? Там еще папка с названием моего сайта — ее уже не надо открывать, favicon.ico рядом положить? Пардон за лексику.
Светлана, фавикон можно положить в любую папку, но лучше всего в корневую папку, так чтобы адрес вашего файла выглядел следующим образом _http://ваш-сайт.ру/favicon.ico.
А чтобы браузер не рыскал по вашему сайту в поисках этого файла, а сразу же определил его местонахождение, то следует добавить код, который я указал в статье.
Добавляется он в файл header.php в абсолютно любое место, с новой строки, внутри контейнера «head» «/head» (вместо кавычек треугольные скобки <). Чтобы не путаться, можно вставить перед закрывающим тэгом «/head».
Все получилось. И без кода, но я код все равно вставила. Благодарю!
Действительно можно и без кода, но в этом случае браузер тратит лишние усилия на поиск фавикона на вашем сайте, они не значительны, но все-таки. А код позволяет устранить эти поиски и сразу дать браузеру путь к фавиконке, тем самым облегчая ему (браузеру) работу. Рад, что у вас все получилось