«

»

Сен 05 2014

Фавикон для сайта. Как сделать и установить?

Фавикон для сайта. Как сделать и установить?

Приветствую Вас уважаемые посетители блога boqdanov.ru. С вами Антоха.  Не писал новые посты уже 4 дня. Был загружен работой офлайн. Просили на только что купленный новенький ноутбук поставить систему и все необходимые дрова. Мучился с ним 2 дня, но зато теперь знаю, как установить «Windows 7» и драйвера на ноутбук, который предназначен  для установки «Windows 8». Напишу в дальнейшем об этой беде с подробной инструкцией к применению.

Не пропустите и подпишитесь на обновление блога. А сегодня хочу затронуть тему: «Как сделать фавикон для сайта».

Что такое фавикон?

Фавикон (с перевода означает «значок для избранного") — небольшой персональный знак в виде картинки для сайта (блога) или отдельной веб-страницы. Все наверно уже поняли, о чем идет речь. Эта картинка, которая отображается в адресной строке браузера перед url сайта, во вкладках и в закладках. Фавикон также будет отображаться в rss- лентах, а поисковик «Яндекс» выводит его в строке сайта.

favicon da saita1Fovicon2fovicon3

В качестве фавикона обычно используют графический файл с расширением «ico» и со стандартным названием «Favicon». Сделать такой значок можно при помощи обычного графического редактора. Если с рисованием и дизайном у вас все в порядке, то создать фавикон вам не составить большого труда. В качестве фавикона сейчас все чаще выступают фотография или обычный рисунок. После загрузки и удаления всего лишнего в изображении, уменьшаем его до размера 16×16 или 32×32 пикселей( это стандартный размер для фавикона) и сохраняем его в формате «gif» или «png». После этого меняем расширение с «gif» или «png» на «ico». Если в качестве создания фавикона вы используете программу «Paint.NET», то там можно сразу сохранять в нужном расширении.

saita

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

Еще проще можно сделать фавикон с помощью специальных онлайн редакторов. Расскажу вам про бесплатный сервис, через который делал фавикон лично я и остался доволен. Заходим в браузер, в адресной строке прописываем url- сайта «favicon.сс» и переходим на указанный адрес. Сервис этот на английском языке, но с браузером «Гугл Хром» не составит труда сделать перевод страницы. Также можно воспользоваться русифицированным сайтом «Favicon.ru». Интерфейс там удивительно прост и понятен. С помощью встроенного редактора можно нарисовать фавикон самому, можно загрузить на сайт свое изображение или выбрать прямо в сервисе из готовой базы. Сначала попробуем нарисовать фавикон самостоятельно.

da saita1favicon da

После того как вы определились с цветом будущего творения, переходим в специально выделенную область и приступаем к рисованию. Если в процессе работы вам необходимо удалить не нужный пиксель, то воспользуйтесь для этой цели специальной функцией. Для этого необходимо поставить галочку напротив «Transparent», затем перейти обратно на рабочую область и кликнуть по квадратикам, которые необходимо удалить. После того как закончили создание своего шедевра, спускаемся вниз и смотрим как он будет выглядеть в адресной строке.

dla

Если что-то не устраивает можно вернуться обратно и все поправить. После всех исправлений скачиваем фавикончик себе на компьютер. Для этого спускаемся опять вниз и нажимаем на кнопку «скачать фавикон». Для себя я создавал из готового изображения. Давайте рассмотрим и этот вариант. Переходим обратно на сайт «Favicon.сс» и нажимаем импорт изображения. Далее, нажимаем на кнопку «выберете файл», в открывшемся окне выбираем файл у себя на компьютере и загружаем его на сервер, предварительно выбрав размер.

okok1ok3

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

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

Для этого соединитесь с вашим хостингом с помощью программы «файловый менеджер» и положите созданный фавикон в корень вашего сайта.

favic

После этого через все тот же файловый менеджер переходим в папку с названием вашей темы и открываем для редактирования файл «header.php». Либо в административной панели «WordPress» идем по пути: внешний вид- редактор и с правой стороны заголовок(«header.php»). В этом файле ищем строчку «<head>…</head>» и между ними вставляем следующий код.

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

С уважением, Богданов Антон!Если вы используете плагин «Hyper Cache» , то необходимо зайти в его настройки и почистить кэш, чтобы увидеть результат. Переходим на страницу вашего сайта, обновляем его и любуемся проделанной работой. Я, если честно, этот код вообще не вставлял и при этом у меня все прекрасно отображается. С фавиконом ваш сайт выглядит достойно в глазах ваших посетителей и будет иметь некую уникальность перед остальными сайтами. На этом у меня все. Теперь вы знаете, как сделать фавикон для сайта. Не забудьте подписаться на обновление блога.

 

Интересные материалы по теме:

3 комментария

  1. Лидия

    Приветствую ! Давно хотела сделать фавиконы для своих сайтов , только не знала как загрузить и куда . Сделала 5 штук . Скоро вставлю . Может даже сегодня . Если позволит деревенское инет-соединение и мой старый ноутбук .

    1. Антон Богданов

      Привет Лидия. Рад за вас, что разобрались. Пользуетесь 3G модемом?

  2. Анютка Незабудка

    Фавикон необходим каждому сайту. Многие сайты узнаешь и запоминаешь по фавикону.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: