Вообще-то, тема создания favicon - это жуткий баян. В интернете так много информации по этому поводу, что действительно удивляешься отсутствию этой фишки у многих блоггеров.
Что такое favicon? Это иконка размером 16х16 пикселей.
Левее http:// вы видите эту иконку. Посмотрите на закладки, которые вы сохраняете в вашем браузере. Там та же иконка. И такие иконки есть у многих блогов и сайтов. Почему же ее нет в вашем блоге?
Ведь сделать ее очень просто.
Берёте иконку в формате 16х16 пикселов. Выкладываете ее на какой-нибудь бесплатный файл-хостинг в интернете (легче всего воспользоваться Google Page Creator). Затем копируете код, который видите ниже, и вставляете его в код вашего шаблона после тега.<head>.
<link href='http://nicantic.googlepages.com/5favicon.ico'
rel='shortcut icon'/>
А текст, выделенный красным, заменяете на адрес иконки, по которому она хранится в интернете (этот адрес вы можете получить на вашем файл-хостинге, в Google Page Creator кликните по файлу правой кнопкой и выберите "копировать ссылку"). Сохраняете шаблон и вуаля - у вас тоже есть favicon.
"А где же взять эту иконку?", - спросите вы.
Есть 3 варианта решения:
1. Взять готовую иконку в бесплатных галереях в интернете.
Favicon gallery1 Favicon gallery2 Favicon gallery3
2. Сделать иконку из любого имеющегося у вас изображения с помощью онлайн-сервисов.
Вы загружаете на сайт изображение и через секунду получаете favicon.
Favicon Generator Favicon Generator Favicon Generator
3. Самому сделать такую иконку. Этот вариант, как по мне, самый лучший: ваша иконка будет уникальной!
Вот давайте и попробуем сделать такую .JPG)
иконку с помощью сервиса favicon.cc
1. Заходим на сайт.
Перед нами рабочая область, разделенная на несколько зон: зона меню слева, рабочая зона по центру, зона выбора цвета справа, зона предварительного просмотра внизу. Управление осуществляется с помощью левой кнопки мыши: клик - выбор необходимого цвета,"стирачки", "пипетки"; удержание - непрерывная линия.
Рабочая область - это квадрат 16х16 ячеек. Каждая ячейка отвечает одному пикселу в разрешении иконки. Окно предварительно просмотра показывает изменения в реальном времени - поэтому вы можете сразу видеть конечный результат.
2. Для начала делаем рамку иконки. Выбираем черный цвет, кликнув в необходимой области справа. Зажав левую кнопку, проводим линии по периметру рабочей области.
3. Затем таким же образом рисуем сам узор.
4. Выбираем белый цвет и заполняем им прозрачные области внутри рисунка.
Дело в том, что "шапка" вкладки интернет-страницы, на которой будет расположена ваша иконка, может иметь разный цвет в зависимости от того, каким браузером вы пользуетесь, стоят ли у вас плагины, которые раскрашивают заголовки вкладок в разный цвет, и даже от того, активна ваша вкладка или нет. Поэтому прозрачные области лучше заполнять белым цветом, даже не смотря на то, что в поле адреса прозрачные области всегда будут белыми. Ориентируйтесь на favicon на вкладке - она более всего заметна.
5. Кликаем "Downloud favicon", сохраняем иконку на локальном компьютере, заходим в Google Page Creator, загружаем ее на сервера Гугл.
Затем кликаем правой кнопкой по названию файла в поле "Uploaded stuff", выбираем "Копировать ссылку" и проставляем этот адрес в код, как описано выше.
Сохраняем шаблон и наслаждаемся.
Как сделать favicon?
Подписаться на:
Комментарии к сообщению (Atom)
Подписка на блог
Подпишитесь в ридере или, через электронную почту:
Поиск Google:
Последние посты
Теги
- Виджеты и Скрипты (3)
- Как заработать $ (5)
- кнопки (3)
- Раскрутка (2)
- Советы (14)
- Тюнинг блога (13)
- Шаблоны (5)
- Юзабилити (1)
- AdSense (4)
- Blogun.Ru (1)
- favicon (1)
- Feedburner (4)
- float (1)
- Google (2)
- HTML - CSS (6)
- Tn Pegas - новости (1)
8 коммент.:
Спасибо за информацию! Попробую сделать.
Пожалуйста, скинь ссылку на свой блог!
А у меня не получается... :-((
Вот адрес блога, куда пыталась поставить свой логотип-favicon: http://inf-2009.blogspot.com/
В чем может быть причина?
Напишите что сделали, как пытались сделать. Экстрасенсов нет=))) Причина в юзере однозначно...
Повторите все с начало и по внимательнее если снова не получиться, будем разбираться!
Объясните плз, а зачем выкладывать на бесплатный хостинг?
Нельзя задать относительный путь? Например:
link href="images/favicon.ico" rel="shortcut icon"
Потому что это самый простой вариант. Этот способ описывается для Blogger, ни о коком images и речи не идет. Если у вас WordPress, то там совсем другое дело.
Спасибо за инструкцию, давно хотел сделать себе фавиконку, да всё руки не доходили. Добавил блог в закладки, как соберусь сделаю.
Отправить комментарий